Building Accessible React Components

Accessibility is not an afterthought — it's a fundamental aspect of good web development. Here's how to build accessible React components.

Semantic HTML

Always start with the right HTML element. Using semantic HTML provides built-in accessibility:

// ❌ Avoid
<div onClick={handleClick} role="button" tabIndex={0}>
  Submit
</div>

// ✅ Prefer
<button onClick={handleClick}>Submit</button>

ARIA Attributes

When semantic HTML isn't enough, ARIA attributes bridge the gap:

function Tabs({ tabs, activeTab, onChange }: TabsProps) {
  return (
    <div role="tablist" aria-label="Content tabs">
      {tabs.map((tab) => (
        <button
          key={tab.id}
          role="tab"
          aria-selected={tab.id === activeTab}
          aria-controls={`panel-${tab.id}`}
          onClick={() => onChange(tab.id)}
        >
          {tab.label}
        </button>
      ))}
    </div>
  )
}

Keyboard Navigation

Ensure all interactive elements are keyboard accessible:

• Use tabIndex appropriately
• Handle Enter and Space key events
• Provide visible focus indicators

Color and Contrast

Ensure sufficient color contrast ratios:

• Text: minimum 4.5:1 ratio
• Large text: minimum 3:1 ratio
• Don't rely solely on color to convey information

Testing

Use tools like axe-core, Lighthouse, and screen readers to verify accessibility:

npm install -D @axe-core/react

Conclusion

Building accessible components from the start saves time and ensures your application is usable by everyone. The React ecosystem provides excellent tools to help you along the way.