Images, video and audio

Decide what an image is for, and write the text that does its job — or say that it has none.

05of 16
≈ 12Min read
5Parts

The question is never "what is in the picture"

It is why is this picture here. The same photograph needs different alt text in different places: in a catalogue it is "Vesper, a panel door in oak"; beside a paragraph about the hinge it is "the concealed hinge, closed"; as a decorative background it needs no text at all.

Write what the reader would miss if the image did not load — which is also, conveniently, what a search engine wants.

The decision, in five cases

The image is…Write
Decorative — a texture, a divider, a mood shot beside the same information in wordsalt="" — and nothing else
Informative — it carries information the text does nota short sentence: what it shows, and why
A link or a buttonwhere it goes or what it does, not what it looks like
Text in an image — a logo, a quotethe words in the image
Complex — a chart, a plan, a diagrama short alt, plus the detail in real text nearby
alt="" and no alt at all are different

An <img> with alt="" is removed from the accessibility tree: correct for decoration. An <img> with no alt attribute is announced by reading the file name, which is how somebody ends up listening to "I M G underscore four eight two one dot J P G".

Writing it

  • No "image of", "picture of", "graphic of" — the role already says it is an image.
  • Keep it to roughly one sentence. If it needs three, the detail belongs in the page.
  • Do not repeat the caption: the two are read one after the other.
  • Punctuate it, so it is not run into the next thing.
four images, four decisions
<img src="/vesper.jpg" alt="The Vesper door in oak, fitted in a white hallway">

<img src="/texture.png" alt="">                       <!-- decoration -->

<a href="/catalogue"><img src="/logo.svg" alt="DOMVYBE — the catalogue"></a>

<figure>
  <img src="/sales.png" alt="Sales by month, 2024 — the detail is in the table below">
  <figcaption>Revenue rose from January to November, with a dip in February.</figcaption>
</figure>

SVG and icons

focusable="false" matters because old Internet Explorer and some tooling still put an inline <svg> in the tab order. And an icon inside a named button should always be hidden — the button carries the name.

inline SVG needs telling what it is
<svg aria-hidden="true" focusable="false">…</svg>       <!-- decoration, and keep it out of tab order -->

<svg role="img" aria-label="Three stars out of five">…</svg>

<button aria-label="Close">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

Video and audio

  • Captions for anything spoken — not the automatic ones, unless somebody has read them. They also serve every viewer in a quiet office or a loud train.
  • A transcript for audio, and for video where it is practical. It is the only form that is searchable, translatable and readable on a slow connection.
  • Audio description where the picture carries information the sound does not — a silent demonstration, an on-screen diagram. Often the cheaper fix is to say it out loud in the script.
  • No autoplay with sound. Browsers block it, users hate it, and it talks over a screen reader.
  • Real controls: a custom player needs everything in the Keyboard and Widgets lessons. <video controls> already has it.
the minimum
<video controls preload="metadata" poster="/poster.jpg">
  <source src="/fitting.mp4" type="video/mp4">
  <track kind="captions" src="/fitting.az.vtt" srclang="az" label="Azərbaycanca" default>
  <track kind="captions" src="/fitting.en.vtt" srclang="en" label="English">
</video>

Practice

Next →The keyboard