Skip to main content

Screen Readers

Accessible websites support screen readers by combining semantic HTML, keyboard accessibility, meaningful structure, and inclusive design principles.

Semantic HTML

Use native HTML elements like headings, lists, and landmarks instead of divs or spans for meaningful content.

<header>
  <h1>Site Title</h1>
  <nav aria-label="Main Menu">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>
<main>
  <h2>Section Title</h2>
  <p>Content read in order by screen readers.</p>
</main>

ARIA & Live Regions

For dynamic content, use ARIA roles and aria-live to communicate updates to screen readers.

<div role="status" aria-live="polite" id="update-message">
  No new messages
</div>

Focus Management

Ensure logical focus order. When opening modals or menus, move focus to the first interactive element and return it on close.

Forms and Labels

Always label form elements properly so screen readers announce them correctly.

<label for="email">Email address</label>
<input type="email" id="email" name="email">

WCAG / Section 508 Keyboard Test Validator

Use this quick in-page validator to check common keyboard and accessibility requirements before testing with a screen reader or browser accessibility tool.

Best Practices