Accessibility Basics and Checking Your HTML

What you'll learn

• What accessibility means and who it helps.
• Six HTML habits that make pages accessible.
• How to check your HTML with the W3C validator and your browser's developer tools.
• What to learn after this course.

The idea

Who uses the web differently?

Accessibility means building pages that everyone can use. Millions of people use the web in ways you might not expect:

• Blind people use a screen reader, which reads the page aloud and lets them jump between headings, links and landmarks.
• People who can't use a mouse use only the keyboard (Tab to move, Enter to activate).
• People with low vision zoom pages to 200% or more.
• Deaf people need captions on videos.

Good HTML gets you most of the way there, for free.

Six habits

1. Set the language: <html lang="en">.
2. Use headings in order, with one <h1>.
3. Write alt text for images (alt="" for decoration).
4. Label every form field with <label>.
5. Use real buttons and links: <button> for actions, <a href> for going somewhere. They work with the keyboard automatically; a clickable <div> doesn't.
6. Write link text that makes sense on its own.

Checking your HTML

• The W3C Markup Validation Service finds mistakes such as unclosed tags, duplicate ids and missing alt attributes. Paste your code into Validate by Direct Input.
• Your browser's developer tools (right-click → Inspect) show the page as the browser understood it. If your nesting is wrong, you'll see it there.
• Try your page with only the keyboard: press Tab repeatedly. Can you reach every link and button, and can you see where you are?

Try it

Press Tab in the preview to move between controls. The top half uses real elements; the bottom half uses look-alike <div>s and <span>s. Notice which ones the keyboard can reach:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Accessibility check</title>
  <style>
    .fake { display: inline-block; padding: 6px 12px; background: #2563eb; color: white; border-radius: 6px; cursor: pointer; }
    .fake-link { color: #2563eb; text-decoration: underline; cursor: pointer; }
  </style>
</head>
<body>
  <h1>Keyboard test</h1>

  <h2>Real elements (keyboard works)</h2>
  <button type="button" onclick="alert('Saved!')">Save</button>
  <a href="#">Read more about saving</a>
  <p><label for="q">Search</label> <input id="q" type="search"></p>

  <h2>Look-alikes (keyboard can't reach them)</h2>
  <div class="fake" onclick="alert('Saved!')">Save</div>
  <span class="fake-link" onclick="alert('Reading...')">Read more about saving</span>
  <p><input type="search" placeholder="Search"> (no label)</p>
</body>
</html>

Your turn

1. Paste your own index.html into the W3C validator and fix every error it finds.
2. Use only the keyboard on your page and on a website you use often.
3. Turn on your computer's screen reader for two minutes (Narrator on Windows: Ctrl+Win+Enter; VoiceOver on Mac: Cmd+F5) and listen to your page.

Common mistakes

• Clickable <div>s and <span>s. Use <button> and <a>.
• Removing the focus outline (the ring around the selected control) with CSS. Keyboard users need it.
• Text in images. Screen readers and translators can't read it; use real text.
• Never testing. A two-minute keyboard check catches many problems.

Key points

• Accessibility helps screen-reader, keyboard, low-vision and deaf users, and usually everyone else too.
• Good HTML is most of the work: lang, headings, alt text, labels, real buttons and links, clear link text.
• Check your code with the W3C validator, developer tools and a keyboard-only test.
• Next steps: learn CSS to style your pages, then JavaScript. When you're comfortable, Modern HTML5 in Production teaches the professional side: accessibility audits, fast pages, SEO and security.