HTML Accessibility

ARIA attributes, roles, states, keyboard navigation, and screen readers.

Overview

Accessible HTML ensures everyone can use your website.

Key Concepts

• ARIA Roles — Define element purpose
• ARIA States — Current element state
• Keyboard Navigation — Tab order and focus management
• Screen Readers — Assistive technology support
• Color Contrast — Readable text for all users

Code Examples

<!-- Accessible button -->
<button 
  aria-label="Close dialog"
  aria-pressed="false"
  onclick="toggleDialog()"
>
  ×
</button>

<!-- Accessible navigation -->
<nav aria-label="Main navigation">
  <ul role="menubar">
    <li role="none">
      <a role="menuitem" href="/">Home</a>
    </li>
    <li role="none">
      <a role="menuitem" href="/about">About</a>
    </li>
  </ul>
</nav>

<!-- Live region for dynamic content -->
<div aria-live="polite" aria-atomic="true" id="status">
  <!-- Status messages announced to screen readers -->
</div>

<!-- Accessible form -->
<form>
  <div>
    <label for="search">Search</label>
    <input 
      type="search" 
      id="search" 
      aria-describedby="searchHelp"
      aria-required="true"
    >
    <span id="searchHelp">Enter a search term</span>
  </div>
  
  <div role="alert" aria-live="assertive" id="errors">
    <!-- Error messages -->
  </div>
</form>

<!-- Skip navigation link -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<main id="main-content">
  <!-- Main content -->
</main>

Practice

Make a complex form fully accessible with ARIA and keyboard navigation.