Glossary
ARIA
ARIA (Accessible Rich Internet Applications) is a W3C specification that lets web developers add accessibility metadata to HTML elements that wouldn't otherwise communicate their role or state to assistive technology.
ARIA is a set of HTML attributes — `role`, `aria-label`, `aria-labelledby`, `aria-describedby`, `aria-live`, `aria-hidden`, and many more — that augment the accessibility tree. Browsers expose the accessibility tree to screen readers, voice-control software, and other assistive tech. Without ARIA, custom UI components (sliders, tabs, dropdowns built from `<div>`s) would be invisible to that tooling.
The first rule of ARIA: don't use ARIA if you can use a native HTML element. `<button>` already announces itself as a button; `<button role='button'>` is redundant and can introduce bugs. ARIA is for the cases where native HTML doesn't have an element with the right semantics — custom carousels, accordions, autocomplete inputs, modal dialogs, live-update regions.
Most-useful ARIA attributes in practice: `aria-label` to provide a screen-reader label when there's no visible text (icon-only buttons), `aria-labelledby` to link a control to a visible label element by ID, `aria-expanded` for accordions and dropdowns, `aria-current='page'` for the active item in navigation, `aria-live` for regions that update dynamically (form errors, toast notifications), `aria-hidden='true'` to hide decorative elements from screen readers.
Common ARIA mistakes: over-using `role` on elements that already have semantic meaning (a `<nav>` doesn't need `role='navigation'`), missing labels on icon-only buttons (a `<button><Icon /></button>` is just announced as 'button' with no purpose), and forgetting `aria-live` regions for content that updates without a page reload (single-page apps are notoriously bad at this).
Testing ARIA: use a screen reader (NVDA on Windows is free; VoiceOver on macOS is built-in) and tab through your page. Listen to what's announced. If something is unclear, fix it. axe DevTools (free Chrome extension) catches structural ARIA mistakes automatically.
Example
A custom dropdown built from `<div>`s with click handlers is invisible to screen readers. Adding `role='combobox'`, `aria-expanded`, `aria-controls`, and `aria-activedescendant` (or replacing the whole thing with a native `<select>`) makes the dropdown announce itself correctly and become usable for keyboard-only and screen-reader users.