A photo that just says "image"
Some people cannot see the screen, so an app called a screen reader reads the page aloud to them.
On a café's page it reaches a photo with no description and just says "image". Is that the menu, or a cake? Nobody can tell. A few words in the page's code would have fixed it.
By the end of this lesson
Note
I can check that a web page works for everybody.
Key words
| Word | What it means | Example |
|---|---|---|
| Accessibility | making a page usable by everybody, including disabled people | |
| Screen reader | an app that reads the screen aloud | |
| Alt text | words in the code that describe an image | alt="A slice of carrot cake" |
| Heading | a title inside a page, from h1 down to h6 | |
| Language attribute | code that tells a screen reader which language to speak | <html lang="en"> |
| Test | a check you can run again and get a clear answer |
The cells students fill in are left blank in this preview.
Headings are a page's map
A screen reader user often jumps from heading to heading to find their way, like reading a contents page.
So a page has one h1, its main title. The sections under it are h2, and parts of a section are h3. A level is never skipped. Going from h1 straight to h3 makes the map wrong.
Alt text describes an image
Every img needs an alt part that says what the picture shows: <img src="cake.jpg" alt="A slice of carrot cake">.
The screen reader reads the alt text aloud. If the picture does not load, the browser shows the alt text instead. The café page below has two faults. Find them, fix them and press Run.
Fix the café page
<h1>Corner Café</h1>
<img src="cake.jpg">
<h3>Opening times</h3>
<p>Monday to Saturday, 8am to 6pm.</p>
<h2>Menu</h2>
<p>Toast, soup and cakes.</p>
Before you start the Runs
Note
Press Start the lab and wait until it says it is running. The bakery's website is called web. This copy is yours alone and has no way out to the internet. Only send requests to your own copy.
Read the bakery page's code
curl -s http://web/Shown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
Count its main headings
curl -s http://web/ | grep -c "<h1>"Shown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
Does it say its language?
curl -s http://web/ | grep -c "lang="Shown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
Worked example: checking the bakery page
| Check | What the lab showed | Good? |
|---|---|---|
| Exactly one h1 | 1 | Yes |
| The page says its language | 0 | No: a screen reader has to guess |
| Every image has alt text | There are no images | Nothing to fix |
| Link words say where they go | Price lists | Yes |
The cells students fill in are left blank in this preview.
A common mistake
Warning
Many people think alt text should be the file name or the word "image". The screen reader already says it is an image. Describe what the picture shows in a few words. A picture that is only decoration gets an empty alt="", so it is skipped.
A test gives a clear answer every time
Looking at a page once is a check. A test is a check written down, so it can run after every change and say yes or no.
The two Runs below are small tests. One asks whether the page answers. The other asks whether it still shows the bakery's name.
Test: does the page answer?
curl -s -o /dev/null -w "%{http_code}\n" http://web/Shown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
Test: is the name still there?
curl -s http://web/ | grep -c "Brightside Bakery"Shown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
Going further: a check with nothing to check
Type curl -s http://web/ | grep -c "<img" in the terminal. What does the answer mean for the alt text check?
Then use your page_problems function from the assignment on the café page from this lesson, before and after your fix. Which problems does it find?