Building Accessible React Components

Why Accessibility Matters

Web accessibility ensures that everyone, including people with disabilities, can use your application. It's not just good ethics—it's often a legal requirement and improves UX for all users.

Semantic HTML First

Always start with semantic HTML elements:

// Good - uses semantic elements
<nav>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>

// Avoid - divs with click handlers <div onClick={goToHome}>Home</div> ```

ARIA Attributes

When semantic HTML isn't enough, use ARIA:

function Modal({ isOpen, onClose, children }) {
  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-title"
      hidden={!isOpen}
    >
      <h2 id="modal-title">Modal Title</h2>
      {children}
      <button onClick={onClose} aria-label="Close modal">
        <XIcon />
      </button>
    </div>
  )
}

Keyboard Navigation

Ensure all interactive elements are keyboard accessible:

function Dropdown({ items }) {
  const [activeIndex, setActiveIndex] = useState(0)
  
  const handleKeyDown = (e: React.KeyboardEvent) => {
    switch (e.key) {
      case 'ArrowDown':
        setActiveIndex(i => Math.min(i + 1, items.length - 1))
        break
      case 'ArrowUp':
        setActiveIndex(i => Math.max(i - 1, 0))
        break
      case 'Enter':
        selectItem(items[activeIndex])
        break
    }
  }
  
  return <ul onKeyDown={handleKeyDown} tabIndex={0}>...</ul>
}

Accessibility Checklist

• All images have alt text
• Form inputs have associated labels
• Color contrast meets WCAG standards
• Focus states are visible
• Page has proper heading hierarchy
• Skip links are provided for navigation