Accessibility (a11y)

Web accessibility (often abbreviated as a11y) refers to the practice of making websites and web applications usable by everyone, including people with disabilities. The term "a11y" is a numeronym where 11 represents the 11 letters between "a" and "y" in "accessibility."

Why Accessibility Matters

  • Ensures equal access to information and functionality for all users
  • Required by law in many jurisdictions (ADA, Section 508, WCAG)
  • Improves usability for everyone, not just users with disabilities
  • Enhances SEO and search engine discoverability
  • Expands your potential audience

Key Principles (POUR)

Perceivable Information and UI components must be presentable to users in ways they can perceive.

Operable UI components and navigation must be operable by all users.

Understandable Information and UI operation must be understandable.

Robust Content must be robust enough to work with current and future technologies.

Common Accessibility Practices

Semantic HTML

html
<!-- Good: Semantic elements -->
<nav>
  <ul>
    <li><a href="/home">Home</a></li>
  </ul>
</nav>

<!-- Avoid: Non-semantic divs -->
<div class="nav">
  <div class="link">Home</div>
</div>

ARIA Labels

html
<button aria-label="Close menu">
  <svg><!-- Close icon --></svg>
</button>

Keyboard Navigation

javascript
// Ensure interactive elements are keyboard accessible
<button
  onKeyDown={(e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      handleClick()
    }
  }}
>
  Click me
</button>

Alt Text for Images

html
<img src="chart.png" alt="Sales increased by 25% in Q4 2024">

Testing Tools

  • Screen readers: NVDA, JAWS, VoiceOver
  • Browser extensions: axe DevTools, WAVE, Lighthouse
  • Automated testing: jest-axe, cypress-axe, pa11y
  • Color contrast checkers: WebAIM Contrast Checker

Common Issues to Avoid

  • Missing alt text on images
  • Poor color contrast
  • Non-keyboard accessible interactive elements
  • Missing form labels
  • Improper heading hierarchy
  • Auto-playing media without controls

Learn More