Accessibility Basics & Focus Management

Web accessibility (a11y) ensures that digital applications are usable by everyone, including people relying on screen readers or keyboard navigation. Building accessible components requires semantic HTML (<button>, <dialog>), explicit ARIA attributes (aria-expanded, aria-controls), visible focus rings, and proper keyboard event handling (Enter, Space, Escape, Arrow keys).

When creating modal overlays or dropdown menus, implement focus trapping — ensuring keyboard focus (Tab key) cycles exclusively inside the active overlay and returns to the triggering button upon closure.

Before

Inaccessible Clickable Div

1<!-- ❌ Inaccessible: Cannot be focused via Tab key, missing screen reader semantics -->2<div onClick={toggleOpen}>Open Menu</div>

After

Accessible Interactive Control

1<!-- ✅ Semantic button with ARIA state and focus styling -->2<button3  type="button"4  aria-expanded={isOpen}5  aria-controls="dropdown-menu"6  onClick={toggleOpen}7  className="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"8>9  Open Menu10</button>

Exercise

Build an accessible custom accordion item component with correct aria-expanded and aria-controls bindings.

Check your understanding

Why should you prefer native <button> elements over <div onClick=...>?Show answerHide answer
Answer
Native buttons automatically support keyboard focus, Enter/Space activation, and screen reader role semantics.
What does focus trapping accomplish in a modal dialog?Show answerHide answer
Answer
It prevents keyboard navigation (Tab key) from escaping into the hidden background page content while the modal is open.