🎓 A1Learner
🔍

HTML Accessibility

HTML accessibility is the building of pages that everyone can use. Alt text, labels, and plain link words do much of that work.

Alt text describes an image

A screen reader is a tool that reads a page aloud. It reads the alt text in place of the picture.

<img src="tree.jpg" alt="Maya planting a tree">
<p>Volunteers plant trees each spring.</p>

A label names its field

The for value of the label matches the id of the input. A screen reader speaks the label when the field gains focus.

<label for="email">Email</label>
<input type="email" id="email" name="email">
<p>We reply within two days.</p>

Link words carry the meaning

A link that names its target makes sense read on its own. Vague words like click here tell a listener nothing.

<p>Read the <a href="guide.html">full planting guide</a> for dates.</p>

Headings in order

One main heading opens the page, and a level-two heading opens the next part. Tools can list the headings as an outline of the page.

<h1>Park Guide</h1>
<h2>Trails</h2>
<p>Three trails start at the gate.</p>

Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>City Pool</title>
</head>
<body>
<h1>City Pool</h1>
<p>The pool opens at seven each morning.</p>
<img src="pool.jpg" alt="Swimmers in the city pool">
<form>
<label for="name">Your name</label>
<input type="text" id="name" name="name">
<button type="submit">Join now</button>
</form>
<p>Read the <a href="rules.html">pool safety rules</a> before your first visit.</p>
</body>
</html>

Key points

  • Accessibility: the practice of building pages that everyone can use
  • Accessible markup says the same thing in code that sighted readers see at a glance
  • Alt text: words that describe an image for people who cannot see it
  • Lang attribute: the attribute on the html element that names the language of the page
  • Label: an element that names a form field in words
  • Semantic order: headings and landmarks placed in the order a reader meets them

In this example, the html element names English through its lang attribute. The image carries alt text that describes the swimmers. The label names the text field and matches its id. The button carries clear words, and the link names its target in the sentence. Each choice gives assistive tools the same facts that sighted readers get at a glance.

Note

Accessibility helps every visitor, since clear pages are easier for everyone to scan

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

What does alt text do on a page?