What is Web Accessibility (a11y)?

What You'll Learn

• What accessibility means
• Key accessibility practices
• ARIA attributes

Understanding Accessibility

Web accessibility means designing websites that people with disabilities can use. This includes:

• Visual disabilities
• Auditory disabilities
• Motor disabilities
• Cognitive disabilities

The term "a11y" is a numeronym (11 letters between 'a' and 'y').

Key Practices

1. Semantic HTML

Screen readers understand structure better.

2. Alt Text

Describe images for screen readers.

3. Keyboard Navigation

Ensure tab order works and focus is visible.

4. Color Contrast

Maintain sufficient contrast ratios.

5. Captions

Provide captions for videos.

Code Examples

<!-- Semantic structure -->
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<!-- Images with alt text -->
<img src="chart.png" alt="Sales chart showing 50% growth in Q4">
<img src="decorative-line.png" alt=""> <!-- empty for decorative -->

<!-- Form labels -->
<label for="email">Email address</label>
<input type="email" id="email" required aria-describedby="email-hint">
<span id="email-hint">We'll never share your email</span>

<!-- Buttons with icons -->
<button aria-label="Close dialog">
  <svg><!-- X icon --></svg>
</button>