Provide equivalent content

Alternative content answers one question: what would a person lose if this image, video or audio didn’t load? The alternative gives them that back. It’s not a description of pixels. It’s the purpose, in text. WCAG 1.1.1 Non-text Content (Level A) covers images. 1.2.2 Captions (Prerecorded), also Level A, covers video with speech.

The registration page has a logo, a decorative flourish, a venue map and a speaker video. Each needs a different treatment.

Classify by purpose first

Before writing any alt, I ask which of four kinds the image is:

• Informative: it carries information. Describe the information.
• Decorative: it adds nothing you’d miss. Give it an empty alt.
• Functional: it’s inside a link or button. Describe the action, not the picture.
• Complex: a chart or map. Give a short alt and the full information in text nearby.

Here is the repaired markup for the first three:

<a href="/"><img src="/img/logo.svg" alt="Web Dev Meetup Rome, home"></a>

<img src="/img/flourish.svg" alt="">

<img src="/img/venue-map.png" alt="Map of the venue, 200 metres from Colosseo metro station">

The logo is functional because it links home, so the alt says where you go. The flourish gets alt="", which tells screen readers to skip it entirely. Be careful: alt="" and no alt at all are different. With no attribute, VoiceOver reads the filename, “flourish dot svg, image”, which is the noise we’re trying to avoid.

The map is complex. The alt gives the one fact people need, and the directions section below it repeats the full route in text, so nothing depends on the picture.

Don’t repeat what’s already there

The flawed page had a speaker photo with alt="Photo of Sara Conti, speaker" right under the heading “Sara Conti”. A screen reader user heard the name twice. Since the photo adds nothing beyond the heading, alt="" is the right call. Repeating nearby text is as much a barrier as leaving it out, just a quieter one.

Captions for the video

The keynote video has speech, so it needs captions. Add a WebVTT track:

<video controls>
  <source src="/video/keynote.mp4" type="video/mp4">
  <track kind="captions" src="/video/keynote.en.vtt" srclang="en" label="English">
</video>

Auto-generated captions are a starting point, not the deliverable. On our keynote the automatic file turned “Astro islands” into “astral islands” four times. Someone has to watch it once with the captions on and fix the file. Then link a transcript below the video, which also helps people who prefer reading.

Test with images gone

Turn images off in the browser. In Chrome go to chrome://settings/content/images, choose “Don’t allow sites to show images”, and reload. Every image is replaced by its alt. If a paragraph now reads strangely, or a link becomes an empty box, that’s your finding. Turn images back on when you’re done.

Try this on your own page: list every image and media item, write its purpose in one word, and justify its alternative from that word.