← Your site, for real

Pages for everyone

Check a page works for everyone: pictures described with alt, headings as the page's outline, labels joined to their boxes, links that say where they go, readable colours; then test it with a classmate.

About one in five people has a disability. A page built with the right tags works for screen readers, keyboards and phones as well as for you.

Not everyone uses a page the way you do. Some people hear it through a screen reader, which reads the tags aloud; some use only a keyboard; some see it small or with poor contrast. A page works for all of them when its tags say what each part is. The checklist:

  1. Pictures have alt text that says what they show (or alt="" if they are only decoration).
  2. Headings are the page's outline: one <h1>, then <h2>, then <h3>, never chosen for their size.
  3. Boxes have a <label> joined by for and id.
  4. Links say where they go: not "click here".
  5. Colours are easy to read: dark text on a light background, or the other way round.
  6. The keyboard reaches everything: press Tab through the page.

The same list works for a hand-built page, a Bootstrap page or a Vue app: they all end up as tags in the browser.

PredictRead the code and say what it will do before you run anything. A wrong guess is fine: it shows you what to look for.

Predict

page.html
<img src="trophy.svg" width="80">
<p><a href="https://example.com/rooms">Click here</a></p>

Neither the picture nor the link says what it is.

A screen reader reaches the picture, then the link. What does it say?

RunRun it and compare the result with your prediction.

Run

This version passes the checklist. Click into the preview, then press Tab again and again: the keyboard moves through the link, the box and the button. Click the word Name: the cursor jumps into its box.

page.html
<h1>Chess club</h1>
<img src="trophy.svg" alt="A gold trophy" width="80">
<h2>When we meet</h2>
<p>Wednesdays at lunch, in the <a href="https://example.com/rooms">library meeting room</a>.</p>
<h2>Join</h2>
<label for="name">Name</label>
<input id="name" type="text">
<button>Join</button>
Try it yourselfYour edits are saved in this browser.

InvestigateTrace how each line of code connects to what you see.

Investigate

page.html
<h1>Chess club</h1>
<img src="trophy.svg" width="80">
<h4>When we meet</h4>
<p>Wednesdays at lunch. <a href="https://example.com/rooms">Click here</a> for the room.</p>
<h4>Join</h4>
<p>Name</p>
<input type="text">
<button>Join</button>
The page this code makes
What this code makes

Four problems, four fixes.

Headings chosen for their size.

This version looks almost the same but fails the checklist. Match each problem with its fix.

<img src="trophy.svg"> has no words
<h4>When we meet</h4> comes straight after the h1
<p>Name</p> above the box
Click here

A screen reader user jumps between headings to find the parts of this page, and hears levels 1, 4, 4: it sounds as if two levels are missing. Click the two lines that are wrong.

ModifyChange the code on purpose and check the result.

Modify

alt for each one.

Need a hint?

Each picture needs an alt that says what it shows, for someone who can't see it.

Another hint

Add alt="…" inside each img tag, describing that picture.

Show the expected result
What the finished page looks like
What it should look like. Your words can be different.

Labels joined to their boxes.

Need a hint?

A label names a box. for on the label and id on the box must match.

Another hint

Swap each p for a label with for="…", and give its input the same id.

Show the expected result
What the finished page looks like
What it should look like. Your words can be different.
Try it yourselfYour edits are saved in this browser.

Give both pictures alt text.

    This ticks when your page has all of the above.

    Give both boxes a label joined with for and id.

      This ticks when your page has all of the above.

      MakeBuild something new using what you have learned. Expect a few tries; that is normal.

      Check your own page

      Paste in a page you have made, from any course. Then:

      1. Go through the six points above and fix what you find.
      2. Test it with a classmate. Give them one job (join the club, find the meeting time, answer the first question) and watch without helping. Then ask them to do it again with only the keyboard. Note every place they hesitated.
      3. Fix the three biggest problems they found.
      Try it yourselfYour edits are saved in this browser.

      Info

      Where this leads

      Next: put it online.

      Your page passes the checklist and a classmate has tested it. What is the next step to let anyone use it?

      For teachers

      Students predict what a screen reader says for a picture with no alt and a "click here" link, move through an accessible page with the keyboard, match problems to fixes, find headings chosen for size, fix pictures and labels, then check their own page and test it with a classmate. About 55 minutes.

      Open the teacher guide: answers, solutions, slides and a worksheet.

      Students will be able to

      Before class

      The lesson works on any page, from any route through the Web pathway: Bootstrap and Vue pages end up as ordinary tags in the browser, so the same checks apply. Nothing new is taught about HTML: alt, headings, labels and links all appear in HTML & CSS; this lesson is about why they matter and checking for them.

      The checklist follows the most common failures in automated checks of real home pages (missing alt text, missing form labels, low contrast and empty or vague links top the WebAIM Million survey every year). Contrast is hard to judge by eye: in Chrome or Edge, right-click the page, Inspect, and the colour picker shows a contrast ratio (4.5 or more for normal text). Screen readers: Narrator (Windows, Ctrl + Windows + Enter) or VoiceOver (Mac, Command + F5) let students hear their page; turn them off the same way.

      The classmate test is the important part: a five-minute test with one person finds more problems than a checklist. Students give one task and watch without helping.

      Running the lesson

      1. Predict: if you can, play a screen reader reading a page with no alt (Narrator or VoiceOver).
      2. Run: everyone presses Tab through the preview. Ask what the outline around each part is for.
      3. Investigate: for the bug, ask how a screen reader user moves around a page (by headings).
      4. Modify: ask students to say each alt text aloud: does it say what the picture shows?
      5. Make: pair students. The tester only tries; the maker only watches and notes, then fixes.

      The hard part (on purpose)

      Students think a page that looks right is right. Ask "how would someone who can't see it, or can't use a mouse, do this?" and let them try with only Tab and Enter.

      When students get stuck

      Stretch and support

      Stretch: Run Chrome's Lighthouse accessibility check (Inspect, Lighthouse) on a real website and on your page. Listen to your page with Narrator or VoiceOver.

      Support: Give students the six points as a printed tick sheet for their own page.

      Where it leads

      Next lesson: put the page online. For Digital Technologies, this lesson covers designing the user experience and testing it with users (Years 9 and 10, AC9TDI10P07). Class idea: everyone tests a classmate's page with only the keyboard.

      Sources

      What each step is for

      Now you can
      Next lesson2. Put it onlineA website is a folder of files: download the page and every file it uses, make every path relative, test the folder on your own computer, then publish it to a host.