Station 05 · Accessibility text

The credits

Imagine a guest at the door of the house who cannot see the brass and the velvet. Your job, as the proprietor, is to describe the room out loud. That is what alt text and ARIA labels are. They are the captions a screen reader speaks. Get them right and a whole class of patron walks aboard. Skip them and the room is silent.

Below is a real poster and a real icon button. Toggle their captions and listen to what disappears. Every image and every icon on this site gets the same treatment.

figure.html — a picture with a caption a reader can hear

1<img
2  src="/poster.jpg"
3  alt="A captain at the helm of the S.S. Rollout at dusk"
4/>

Poster · S.S. Rollout

Screen reader says

A captain at the helm of the S.S. Rollout at dusk

icon-button.html — a glyph with a label a reader can hear

1<button aria-label="Donate to Rollout">
2  ♥
3</button>

♥

Screen reader says

Donate to Rollout, button

Hover any tag or any caption. Toggle a label off and listen to what disappears.

What you just learned

The screen is one of many ways a page is read. Roughly one in fifty patrons reads with their ears, through a screen reader.
alt text on an image is the caption a reader hears. A picture with no alt is silence — the reader just hears 'image'.
An icon button with no aria-label is silence the same way — 'button' is all the reader hears, and 'button' is not a job description.
Two attributes, a few quiet seconds of writing. The whole boat opens up to a reader who could not see it otherwise.

Next — Station 06: The paint shop

Right this way…