Building Accessible UI Components

Web accessibility (a11y) is not a 'feature'—it's a fundamental requirement. Building inclusive interfaces ensures that everyone, regardless of their physical or cognitive abilities, can access the information and services we provide. In this deep dive, we'll explore how to build truly accessible components in React.

The Moral and Business Case

Beyond the ethical responsibility, accessibility makes good business sense. It improves SEO, increases your potential market reach by 15-20%, and ensures compliance with global legal standards like the ADA and EAA. Most importantly, accessible design is often just *better* design for everyone.

The First Rule of ARIA

The first rule of ARIA is: 'Don't use ARIA if you don't have to'. Semantic HTML is the foundation of an accessible web. A `<button>` tag comes with built-in keyboard support and screen reader recognition that a `<div>` with an `onClick` simply does not have.

Complex Pattern: The Modal Dialog

Modals are one of the most common but poorly implemented UI patterns. A truly accessible modal must: 1. Trap focus inside the dialog, 2. Close on 'Escape' key, 3. Return focus to the trigger on close, and 4. Be properly labeled with ARIA.

export const Modal = ({ isOpen, onClose, children }) => {
  if (!isOpen) return null;

  return (
    <div 
      role="dialog" 
      aria-modal="true"
      aria-labelledby="modal-title"
      className="fixed inset-0 z-50"
    >
      {/* Focus trap and content here */}
    </div>
  );
};

Implementation Checklist

• Use semantic elements (<nav>, <main>, <header>, <section>).
• Ensure color contrast meets WCAG AA standards (4.5:1 for normal text).
• Provide visible focus indicators for keyboard users.
• Add meaningful alt text for all functional images.
• Use ARIA labels correctly for non-textual elements.

Summary

Accessibility is a journey, not a destination. By making it a core part of your development process, you create products that are more robust, more usable, and more welcoming to all users.