A div styled to look like a button is a rectangle to a screen reader. ARIA bridges the gap: role='button' says what it is, aria-label names it, aria-expanded says whether the menu is open. It is the accessibility layer for everything custom — tabs, dialogs, toasts — that HTML grew up without.
The first rule of ARIA is 'do not use ARIA': the native <button> already announces itself correctly, so ARIA on top of good semantics is noise at best and a lie at worst. Reach for it where native elements genuinely cannot — and prefer fixing the markup over annotating bad markup.
Related terms
WCAG
The Web Content Accessibility Guidelines — the standard that defines what makes web content usable by people with disabilities; AA contrast is 4.5:1 for body text.
Semantic HTML
Using elements that mean what they contain — nav, article, button — so screen readers, crawlers and browsers understand the page for free.
Hydration
The step where JavaScript takes over server-rendered HTML in the browser and makes it interactive.
The bench this belongs to
Full-stackIf you can describe it, we can build it. React and Next.js on the front, Python or Node behind, Postgres underneath, shipped to somewhere you can afford to run.
