Accessibility fundamentals

Accessible HTML is a legal requirement in many places and makes sites better for all users.

Accessibility (a11y) means people using screen readers, keyboards, voice control or zoom can use your page. Most of it comes free when you use the right element.

Use native elements. A <button> is focusable, activates with Enter and Space, and is announced as a button. A <div onclick> does none of that. The same goes for links, inputs, checkboxes and selects.

Everything works by keyboard. Tab moves through links, buttons and form controls in DOM order. Never remove the focus outline without replacing it (style :focus-visible instead), and keep the source order logical rather than rearranging visually with CSS.

Every control has an accessible name: from its text content, its <label>, or alt for images. An icon-only button needs a name, for example visually hidden text or aria-label="Close".

Structure is navigation: a sensible heading hierarchy, landmarks (main, nav), and lists for lists. Screen-reader users jump by these.

Other essentials:

Set lang on <html>.
Don't convey meaning by colour alone; add text or icons.
Keep text contrast at least 4.5:1 (WCAG AA).
Add captions to video.
Add a "skip to content" link as the first focusable element.

Test by unplugging the mouse and tabbing through the page, and by running the browser's Lighthouse or accessibility inspector. Automated tools catch roughly a third of issues; keyboard and screen-reader testing finds the rest.

Example

<body>
  <a class="skip-link" href="#content">Skip to content</a>
  <header>...</header>

  <main id="content">
    <h1>Inbox</h1>

    <!-- Bad: not focusable, no role, no keyboard support -->
    <div class="btn" onclick="archive()">Archive</div>

    <!-- Good: native button with an accessible name -->
    <button type="button" onclick="archive()">Archive</button>

    <!-- Icon-only button: name it -->
    <button type="button" aria-label="Close dialog">
      <svg aria-hidden="true" width="16" height="16"><!-- x icon --></svg>
    </button>

    <p class="error"><strong>Error:</strong> the email is required.</p>
  </main>
</body>

Remember

Native elements bring keyboard support and roles for free
Everything must be reachable and visible by keyboard
Every interactive element needs an accessible name
Never rely on colour alone

Watch out for

Setting outline: none on focus without a visible replacement.

Check yourself

Why is <div onclick="save()">Save</div> an accessibility problem?

Official docs: developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility/HTML

Example

Remember

Watch out for

Check yourself

Builds on

Unlocks