Accessibility in React: ARIA and Focus Management

Accessibility (often abbreviated a11y) means building interfaces everyone can use, including people who rely on screen readers, keyboard navigation, or other assistive technologies. It is not an optional extra: it is a requirement for inclusive products, often a legal obligation, and it generally improves usability for everyone. React apps, being heavily JavaScript-driven, need deliberate attention to get accessibility right.

The foundation is semantic HTML — using the right element for the job (button, nav, label, heading) — which gives assistive technologies meaning for free. ARIA attributes supplement semantics where native elements fall short, conveying roles, states, and relationships. And because React apps update dynamically, focus management — controlling where keyboard focus goes — becomes critical for usable interactions.

This lesson covers the accessibility essentials for React: leading with semantic HTML, using ARIA correctly (and sparingly), managing focus for modals and dynamic content, and supporting keyboard navigation. These skills make your components usable by everyone and are a mark of professional, production-quality React work.

Analogy🏏Cricket

🏏 Think of it like cricket: Just as a captain sketches the desired field on a planning board first, then compares it to the current field to move only the fielders who need to shift — rather than clearing the ground and re-placing all eleven — React builds a new Virtual DOM plan, diffs it against the old, and moves only what changed. The insight is that planning on paper and adjusting the minimum is far cheaper than rearranging everything from scratch, which is exactly what reconciliation achieves.