Building Accessible React Components

Accessibility is not just a nice-to-have feature—it’s essential for creating inclusive web applications. In this post, I’ll share practical techniques for building accessible React components.

Why Accessibility Matters

According to the WHO, over 1 billion people worldwide have some form of disability. By building accessible applications, we ensure that everyone can use our products effectively.

Key Benefits

• Wider audience reach - More users can interact with your application
• Legal compliance - Many countries require digital accessibility
• Better SEO - Accessible sites often rank better in search engines
• Improved UX - Accessibility improvements benefit all users

Essential ARIA Attributes

ARIA (Accessible Rich Internet Applications) attributes help screen readers understand your UI:

function Button({ children, onClick, isLoading }) {
  return (
    <button
      onClick={onClick}
      aria-busy={isLoading}
      aria-disabled={isLoading}
      disabled={isLoading}
    >
      {isLoading ? "Loading..." : children}
    </button>
  );
}

Keyboard Navigation

Always ensure your components are keyboard accessible:

function Modal({ isOpen, onClose, children }) {
  useEffect(() => {
    const handleEscape = (e) => {
      if (e.key === "Escape") onClose();
    };

    if (isOpen) {
      document.addEventListener("keydown", handleEscape);
      return () => document.removeEventListener("keydown", handleEscape);
    }
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    <div role="dialog" aria-modal="true">
      {children}
    </div>
  );
}

Focus Management

Proper focus management is crucial for keyboard users:

1. Focus trapping - Keep focus within modals and dialogs
2. Focus restoration - Return focus to the trigger element when closing
3. Skip links - Allow users to skip repetitive navigation

Testing Your Components

Use these tools to verify accessibility:

Tool	Purpose
axe DevTools	Automated accessibility testing
NVDA/VoiceOver	Screen reader testing
Lighthouse	Performance and accessibility audits

Conclusion

Building accessible components requires intentional effort, but the payoff is worth it. Start with semantic HTML, add ARIA attributes where needed, and always test with real assistive technologies.

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” — Tim Berners-Lee