Web Accessibility Basics: Writing HTML for Everyone

Web accessibility means building pages that everyone can use, including people who are blind, deaf, or who cannot use a mouse. In this lesson you will learn the HTML habits that make a page accessible from the start.

Who benefits from accessible HTML?

Accessibility (often shortened to a11y, because there are 11 letters between the "a" and the "y") is about removing barriers. Think of a building with a ramp next to the stairs. The ramp helps wheelchair users, but it also helps parents with buggies and people carrying heavy boxes. Accessible websites work the same way.

People who benefit include:

• People who are blind and use a screen reader, a program that reads the page out loud or sends it to a braille display. Common screen readers are NVDA and JAWS on Windows, VoiceOver on Mac and iPhone, and TalkBack on Android.
• People who cannot use a mouse and move around the page with the keyboard only.
• People with low vision who zoom the page to 200% or more.
• People who are deaf and need captions for videos.
• People with dyslexia or memory problems who need clear, simple pages.
• Everyone else: someone using a phone in bright sunlight, or someone with a broken arm.

A screen reader does not "see" your design. It reads your HTML. That is why good HTML is the most important accessibility tool you have.

Use semantic elements first

You already know semantic elements like <header>, <nav>, <main>, <button> and <label>. For accessibility, they are gold. A screen reader user can jump straight to the <main> area, list all the links in <nav>, or press a key to move from heading to heading. A <div> gives them none of this.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Green Leaf Café – Menu</title>
</head>
<body>
  <header>
    <p>Green Leaf Café</p>
    <nav aria-label="Main">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/menu">Menu</a></li>
        <li><a href="/contact">Contact us</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Our menu</h1>
    <h2>Breakfast</h2>
    <p>Served every day from 8 to 11 am.</p>
    <h2>Lunch</h2>
    <h3>Soups</h3>
    <p>Tomato and basil, or lentil and carrot.</p>
  </main>
  <footer>
    <p>Open Monday to Saturday.</p>
  </footer>
</body>
</html>

In the browser this looks like a plain page. But a screen reader now knows the language is English, where the navigation is, where the main content starts, and how the headings are nested. The heading outline goes h1 → h2 → h3 with no skipped levels, like a table of contents.

Tip: Always set lang on the <html> element. Without it, a screen reader may read English text with a French or German accent, which is very hard to understand. If one paragraph is in another language, add lang to it too: <p lang="es">Hola</p>.

Alt text, link text and colour contrast

You learned the alt attribute in the media lessons. Here is the accessibility rule in one sentence: write what the image tells the reader, not what it looks like in detail. A chart image needs its main message ("Sales doubled between 2024 and 2026"). A purely decorative image needs an empty alt="" so screen readers skip it.

Link text matters just as much. Screen reader users often pull up a list of all links on a page. A list of ten "Click here" links is useless.

<!-- Bad: the link makes no sense on its own -->
<p>To see our prices, <a href="/pricing">click here</a>.</p>

<!-- Good: the link says where it goes -->
<p>See our <a href="/pricing">pricing plans</a>.</p>

<!-- Good: an image that is also a link -->
<a href="/">
  <img src="logo.svg" alt="Green Leaf Café home page">
</a>

<!-- Good: a decorative image -->
<img src="leaf-divider.svg" alt="">

The first link only says "click here". The second link reads well even when it is alone. The logo link uses alt to describe where the link goes, because the image is the only content of the link.

Colours are set with CSS, not HTML, but keep one rule in mind now: text needs enough contrast with its background. Light grey text on a white background is hard to read for many people. You will learn to check contrast in the CSS course.

Common mistake: Using colour alone to show meaning, like "required fields are red". Some people cannot see red. Add text too, such as the word "(required)".

What is WCAG?

WCAG (Web Content Accessibility Guidelines) is the international rulebook for accessibility, written by the W3C. The current version is WCAG 2.2. It has three levels: A (the minimum), AA (the normal target for most websites and the level many laws require) and AAA (the highest). Its ideas are grouped into four words: content must be perceivable, operable, understandable and robust. You don't need to memorise it. If you use semantic HTML, good alt text, clear links, headings in order and labels on every form field, you already meet many of its rules. You can read a friendly summary on MDN's accessibility guide.

Practice exercise

Take any page you built earlier in this course and check it: Does <html> have lang? Is there exactly one <h1> and are headings in order? Does every image have a sensible alt? Does every link make sense on its own? Fix anything that fails.

Hint: Try reading only your link texts and headings out loud, top to bottom. If it still makes sense, you are on the right track.

Frequently asked questions

Do I need to install a screen reader to test my page?

It helps a lot. VoiceOver is already built into Mac and iPhone, Narrator is built into Windows, and NVDA is free. Even five minutes of listening to your page will teach you more than any checklist.

Is accessibility required by law?

In many places, yes. The European Accessibility Act applies to many websites and apps in the EU since June 2025, and the US, UK and other countries have similar rules. Most of them point to WCAG level AA.

Does accessible HTML look different?

No. Accessible HTML usually looks exactly the same. The differences are in the structure that assistive technology reads.

Key takeaways

• Accessibility helps everyone, not only people with disabilities.
• Semantic elements give screen readers structure for free, so use them first.
• Set lang, keep one <h1> and nest headings in order.
• Write alt text that gives the image's message, and link text that makes sense alone.
• WCAG 2.2 level AA is the usual target, and good HTML gets you much of the way.