Building accessible React components isn't just a nice-to-have—it's a fundamental responsibility of modern web development. Over half a billion people globally experience disabilities, and proper accessibility ensures your application works for everyone.
Understanding WCAG 2.1
WCAG (Web Content Accessibility Guidelines) 2.1 is the gold standard for web accessibility. It's organized around four principles:
- •Perceivable — Information must be perceivable by users
- •Operable — Components must be operable by keyboard
- •Understandable — Content must be clear and predictable
- •Robust — Must be compatible with assistive technologies
Semantic HTML First
Start with semantic HTML. Use proper heading hierarchy (h1, h2, h3), semantic elements like <button>, <nav>, and <main>, and avoid divs when a semantic element exists.
// ❌ Avoid
<div onClick={handleClick} className="button">
Click me
</div>
// ✓ Preferred
<button onClick={handleClick}>
Click me
</button>ARIA Attributes
ARIA (Accessible Rich Internet Applications) provides attributes that help screen readers understand your components. Use them when semantic HTML alone isn't sufficient.
// Describe the purpose
<button aria-label="Close menu">
<XIcon />
</button>
// Mark live regions
<div aria-live="polite" aria-atomic="true">
{message}
</div>
// Indicate expanded state
<button aria-expanded={isOpen}>
Toggle
</button>Testing Accessibility
Always test your components with real assistive technologies and automated tools. Use axe DevTools, Lighthouse, and screen readers like NVDA or JAWS to verify accessibility.
Accessibility is not a feature—it's a requirement. Building accessible components benefits everyone, not just people with disabilities. Good accessibility practices improve usability, SEO, and overall code quality.