Building Accessible React Components

Web accessibility ensures that websites and applications are usable by everyone, including people with disabilities. As React developers, we have a responsibility to build inclusive experiences.

Why Accessibility Matters

According to the WHO, over 1 billion people worldwide have some form of disability. By building accessible applications, we ensure that our products can be used by the widest possible audience.

Key Principles

1. Semantic HTML

Always use semantic HTML elements when possible. They provide built-in accessibility features:

// ❌ Bad - div with click handler
<div onClick={handleClick}>Click me</div>
 
// ✅ Good - proper button element
<button onClick={handleClick}>Click me</button>

2. ARIA Attributes

When semantic HTML isn't enough, use ARIA attributes to provide additional context:

<button
  aria-expanded={isOpen}
  aria-controls="menu"
  aria-label="Open navigation menu"
>
  <MenuIcon />
</button>

3. Keyboard Navigation

Ensure all interactive elements are keyboard accessible:

const handleKeyDown = (e: KeyboardEvent) => {
  if (e.key === 'Enter' || e.key === ' ') {
    handleClick();
  }
};

4. Focus Management

Properly manage focus, especially in modals and dynamic content:

useEffect(() => {
  if (isOpen) {
    modalRef.current?.focus();
  }
}, [isOpen]);

Testing Accessibility

• Use screen readers (VoiceOver, NVDA)
• Test with keyboard only
• Run automated tests with axe-core
• Get feedback from users with disabilities

Conclusion

Building accessible applications isn't just the right thing to do—it often leads to better UX for everyone. Start incorporating these practices into your development workflow today.