HTML Accessibility Guide

HTML Accessibility Guide

Accessible HTML ensures your website works for everyone, including people using screen readers, keyboards, or other assistive technologies.

Why Accessibility Matters

• 1 billion+ people worldwide have disabilities
• Accessible sites rank better in search engines
• Many accessibility features benefit all users
• Legal requirements in many countries (ADA, WCAG)

Tip

Good accessibility is good HTML. Semantic, well-structured HTML is naturally more accessible.

Core Principles

1. Use Semantic HTML

Semantic elements convey meaning to assistive technologies.

Do

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<main>
  <article>
    <h1>Article Title</h1>
    <p>Content...</p>
  </article>
</main>

Don't

<div class="nav">
  <div class="link" onclick="go('/')">Home</div>
  <div class="link" onclick="go('/about')">About</div>
</div>

<div class="main">
  <div class="article">
    <div class="title">Article Title</div>
    <div>Content...</div>
  </div>
</div>

2. Provide Text Alternatives

All images need alt text:

HTML

<!-- Informative image --> <img src="chart.png" alt="Sales increased 50% in Q4 2024"> <!-- Decorative image --> <img src="divider.png" alt=""> <!-- Complex image --> <figure> <img src="diagram.png" alt="System architecture diagram"> <figcaption> Full description of the architecture... </figcaption> </figure>

Result ▶ Run

3. Structure Content with Headings

Use headings (<h1> through <h6>) in logical order:

<h1>Main Page Title</h1>
  <h2>Section 1</h2>
    <h3>Subsection 1.1</h3>
    <h3>Subsection 1.2</h3>
  <h2>Section 2</h2>

Caution

Don’t skip heading levels! Going from <h1> to <h3> confuses screen reader users.

4. Make Forms Accessible

Always associate labels with inputs:

HTML

<form> <!-- Good: explicit label association --> <label for="email">Email address</label> <input type="email" id="email" name="email" required> <!-- Also good: implicit association --> <label> Password <input type="password" name="password" required> </label> <!-- Provide helpful error messages --> <p id="email-error" role="alert" hidden> Please enter a valid email address </p> <button type="submit">Sign In</button> </form>

Result ▶ Run

5. Ensure Keyboard Navigation

All interactive elements must be keyboard accessible:

• Use <button> for actions, <a> for navigation
• Don’t remove focus outlines (style them instead)
• Use logical tab order (or tabindex="0")
• Provide skip links for repetitive content

<!-- Skip link at top of page -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Main content target -->
<main id="main-content">
  ...
</main>

ARIA When Needed

ARIA (Accessible Rich Internet Applications) supplements HTML when native semantics aren’t enough.

Note

First rule of ARIA: Don’t use ARIA if you can use native HTML. A <button> is better than <div role="button">.

Common ARIA Patterns

<!-- Live regions for dynamic content -->
<div aria-live="polite">
  <!-- Content updates announced to screen readers -->
</div>

<!-- Expanded/collapsed state -->
<button aria-expanded="false" aria-controls="menu">
  Menu
</button>
<div id="menu" hidden>...</div>

<!-- Custom controls -->
<div role="slider"
     aria-valuemin="0"
     aria-valuemax="100"
     aria-valuenow="50"
     aria-label="Volume">
</div>

Testing Accessibility

1. Keyboard test: Navigate your entire site using only Tab, Enter, and arrow keys
2. Screen reader test: Use VoiceOver (Mac), NVDA (Windows), or Orca (Linux)
3. Automated tools: axe, WAVE, Lighthouse accessibility audit
4. Color contrast: Ensure 4.5:1 ratio for normal text, 3:1 for large text

Checklist

• All images have appropriate alt text
• Headings are in logical order (no skipped levels)
• All form inputs have associated labels
• Color is not the only way to convey information
• Focus indicators are visible
• Skip links are provided for navigation
• ARIA is used correctly (or not at all if unnecessary)
• Page works with 200% zoom
• Videos have captions

Resources

• WCAG 2.1 Guidelines
• WebAIM
• A11y Project Checklist
• MDN Accessibility Guide