Accessibility basics

What you'll learn

The core habits that make a page usable by people with different abilities and tools.

Why it matters

Around one in six people live with a disability. Many use a keyboard instead of a mouse, a screen reader, or high zoom. Accessible pages are also easier for everyone, and often required by law for public services.

Explanation

Accessibility (often written a11y) means designing so that people can perceive, operate and understand the page. Most of it comes from using HTML properly:

• Text alternatives: every meaningful image has alt text. Decorative images use alt="".
• Labels: every form control has a <label>.
• Headings and landmarks: use h1 to h6 in order and semantic tags such as main and nav so users can jump around.
• Keyboard access: everything clickable must be reachable with Tab and activated with Enter or Space. Real <button> and <a> elements do this for free.
• Contrast: text must stand out from its background (a ratio of at least 4.5 to 1 for normal text).
• Focus visibility: never remove the focus outline without replacing it.

ARIA attributes (such as aria-label) add meaning where HTML alone is not enough. The first rule of ARIA: if a native HTML element does the job, use it instead.

Example

Step-by-step walkthrough

1. A "skip link" lets keyboard users jump past the menu. Press Tab once in the preview to see it get focus.
2. <nav aria-label="Main"> names the navigation landmark.
3. The close button shows only "X", so aria-label="Close dialog" tells a screen reader what it does.
4. The search input has a real <label>.
5. The image alt describes the information in the chart, not just "chart".
6. Everything uses native elements, so the keyboard works without extra code.

Try it yourself

Press Tab repeatedly to walk through the page using only the keyboard. Then add an alt to a new image.

Keyboard and labelsHTML / CSS

Editable code<a href="#content">Skip to main content</a> <nav aria-label="Main"> <a href="#">Home</a> <a href="#">Courses</a> </nav> <main id="content"> <h1>Welcome</h1> <button aria-label="Close dialog">X</button> <label for="q">Search</label> <input id="q" type="search"> </main>

Run ResetCopyCtrl+Enter to run

Common mistakes

• Clickable divs. A <div onclick> cannot be reached by keyboard. Use <button>.
• Removing the focus outline with outline: none and nothing in its place.
• Colour as the only signal, such as red text alone to mark errors.
• Overusing ARIA. Wrong ARIA is worse than none.

Quick quiz

Summary

• Use semantic HTML, alt text, labels and ordered headings.
• Make everything usable by keyboard and keep focus visible.
• Use ARIA only to fill gaps.

Next: audio and video.

<a href="#content">Skip to main content</a>

<nav aria-label="Main">
  <a href="#">Home</a>
  <a href="#">Courses</a>
</nav>

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

  <button aria-label="Close dialog">X</button>

  <label for="q">Search</label>
  <input id="q" type="search">

  <img src="https://placehold.co/120x60/png?text=Chart" alt="Bar chart: sales doubled in 2024" width="120" height="60">
</main>