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.
Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.
Predict and Run 10 min · Investigate 10 min · Modify 10 min · Make (check and classmate test) 25 min
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.
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.
| What you will see | A question to ask | The fix |
|---|---|---|
| Clicking the label does not put the cursor in the box. | Do for and id match exactly, capitals included? | Use the same word in both: for="name" and id="name". |
| Tab skips a button or link. | Is it a real button or a tag (a, input) that can take focus, or a div made to look like one? | Use button or a; a clickable div is invisible to the keyboard. |
| Long alt text that repeats the caption. | What would you say to a friend on the phone about this picture? | A short description; alt="" if the picture is only decoration. |
One possible solution for each task. Other correct programs are fine.
<h1>Art show</h1>
<img src="star.svg" alt="A star" width="60">
<img src="medal.svg" alt="A medal for the best painting" width="60">
<h2>Sign up</h2>
<p>Your name</p>
<input type="text">
<p>Your year</p>
<input type="number">
<button>Sign up</button>
<h1>Art show</h1>
<img src="star.svg" width="60">
<img src="medal.svg" width="60">
<h2>Sign up</h2>
<label for="name">Your name</label>
<input id="name" type="text">
<label for="year">Your year</label>
<input id="year" type="number">
<button>Sign up</button>
Open task: any program that does what the step asks.
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.
Name two changes that make a page work for a screen reader without changing how it looks.
For example: alt text on pictures, labels joined to boxes, headings in order, link text that says where it goes.
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.