Accessibility (a11y)

What is Web Accessibility?

Web accessibility (a11y—"a" + 11 letters + "y") ensures people with disabilities can use your website. This includes:

💡 Accessibility benefits everyone—mobile users, elderly, people with temporary injuries, users in bright sunlight, etc.

Semantic HTML: The Foundation

Using the right HTML elements provides built-in accessibility:

<div onclick="submit()">
  Click me
</div>

<button onclick="submit()">
  Click me
</button>

Alt Text for Images

Essential for screen reader users and when images fail to load.

<img src="dog.jpg" />

<img src="chart.png" alt="image" />

<img src="logo.svg" alt="logo.svg" />

<img src="dog.jpg" alt="Golden retriever playing fetch" />

<img src="chart.png" alt="Sales increased 45% in Q4 2024" />

<!-- Decorative images -->
<img src="divider.png" alt="" />

Keyboard Navigation

Many users navigate without a mouse. Ensure all interactive elements are keyboard accessible.

<div onclick="showMenu()">
  Menu
</div>

<span onclick="openModal()">
  View details
</span>

<button onclick="showMenu()">
  Menu
</button>

<button onclick="openModal()">
  View details
</button>

ARIA (Accessible Rich Internet Applications)

ARIA attributes enhance accessibility when semantic HTML isn't enough.

<button aria-label="Close dialog">
  ×
</button>

<button aria-label="Search">
  🔍
</button>

<a href="/profile" aria-label="View your profile">
  <img src="avatar.jpg" alt="" />
</a>

<h2 id="dialog-title">Confirm deletion</h2>
<p id="dialog-desc">This action cannot be undone.</p>
<div 
  role="dialog" 
  aria-labelledby="dialog-title"
  aria-describedby="dialog-desc"
>
  <!-- dialog content -->
</div>

<button>
  <span aria-hidden="true">★</span>
  Favorite
</button>

<!-- Decorative icons -->
<span class="icon" aria-hidden="true">→</span>

<div role="button" tabindex="0">
  Custom button
</div>

<div role="navigation">
  <!-- navigation links -->
</div>

<div role="alert">
  Form submitted successfully!
</div>

<!-- Polite: wait for screen reader to finish -->
<div aria-live="polite">
  3 items in cart
</div>

<!-- Assertive: interrupt immediately -->
<div aria-live="assertive" role="alert">
  Error: Payment failed!
</div>

Focus Management

Make focus states visible and manage focus flow:

/* Removes focus outline */
button:focus {
  outline: none;
}

/* Custom focus styles */
button:focus {
  outline: 2px solid blue;
  outline-offset: 2px;
}

/* Or use :focus-visible */
button:focus-visible {
  outline: 2px solid blue;
}