Accessibility Basics

Accessibility (often written a11y) means people can use your site whatever their abilities: blind people using screen readers, people who can only use a keyboard or switch device, people with low vision who zoom in, deaf people who need captions, and people with cognitive disabilities who need clear content.

The good news: correct HTML does most of the work. Built-in elements come with keyboard support and meaning that assistive technology understands.

The essentials you already know

• lang on html.
• A descriptive title, and one h1 with a logical heading outline.
• Landmarks: header, nav, main, footer.
• alt on every image (empty for decorative ones).
• A label for every form control; fieldset/legend for groups.
• Real buttons and as instead of clickable divs.
• Link text that makes sense on its own.
• Captions for video, transcripts for audio.
• Tables with caption and th + scope.

Keyboard access

Put your mouse away and press Tab. Focus should move through every link, button, and form field in a sensible order, and you should always see where the focus is. Links, buttons, and form controls are focusable automatically; a div with a click handler is not.

A skip link

Keyboard users otherwise tab through the whole header on every page:

<body>
  <a href="#main" class="skip-link">Skip to main content</a>
  <header>
    <nav aria-label="Main">
      <a href="/">Home</a>
      <a href="/menu">Menu</a>
    </nav>
  </header>
  <main id="main">
    <h1>Menu</h1>
  </main>
</body>

CSS usually hides the skip link until it receives focus.

Don't rely on color or senses alone

<!-- Avoid: only color tells people which fields are required -->
<p>Fields in red are required.</p>

<!-- Better -->
<p>Fields marked "required" must be filled in.</p>
<label for="city">City (required)</label>
<input id="city" name="city" required>

Instructions like "click the green button" or "see the box on the right" fail for people who can't see color or layout.

Check your work

• Tab through the page.
• Zoom to 200% — does everything still work?
• Use a screen reader: NVDA (free, Windows), VoiceOver (built into macOS and iOS — Cmd + F5), TalkBack (Android).
• Run Lighthouse or the axe DevTools extension, and the validator.

Level 2 goes much further: accessible names, ARIA, and live regions.

Practice

List four accessibility problems in this snippet, then fix it.

<!-- Wrong: several accessibility problems -->
<div onclick="location.href='/cart'">Cart</div>
<img src="sale.png">
<input name="q" placeholder="Search">
<h4>Today's deals</h4>

<a href="/cart">Cart</a>
<img src="sale.png" alt="Summer sale: 30% off all bread" width="600" height="200">
<label for="q">Search</label>
<input id="q" name="q" type="search">
<h2>Today's deals</h2>