Lesson 5: Accessibility — Focus, Keyboard & ARIA
You styled a `<div>` with `onClick` that looks like a perfect button. But a keyboard user can't reach it, and a screen reader doesn't know it's clickable. This lesson teaches you to build accessible components in the design system: semantic controls, a token-based focus ring, and `aria-label` — acce
A real button is like a door with a handle — anyone opens it, by hand or by keyboard. A clickable `<div>` is a wall painted to look like a door: it looks right, but there's nothing to grab.
- semantic control
- An HTML element with built-in meaning — `<button>`, `<a>`, `<input>` — that comes with keyboard support, focus, and an accessibility role for free, no extra code.
- focus-visible
- A state that shows a focus ring only during keyboard navigation, not mouse clicks. In Tailwind: `focus-visible:ring-2` — a clear cue for keyboard users without bothering mouse users.
- aria-label
- An attribute that gives an accessible name to an element with no visible text — like an icon-only button — so a screen reader can announce what it does.
- keyboard operability
- The ability to use every control with the keyboard alone — Tab to focus, Enter/Space to activate — a baseline accessibility requirement.
