Screen-reader poetry

The one question

Every image asks the same question: does this picture carry information the words do not? If yes, the alt text says what the picture shows, in the order it matters. If no — the image is decorative, a logo beside the company name, a gradient behind text — the alt text is empty and the image is aria-hidden, because reading 'image, decorative gradient' aloud is noise, and noise is the enemy of attention.

The poetry is in the economy: alt text is the haiku of your UI. 'Quarterly revenue chart: up 22% from Q2 to Q3' tells the listener everything the chart shows. 'Chart showing revenue growth over time' tells them the chart exists — which they already know — and nothing else.

alt-text.md

Decorative   alt=""               (aria-hidden, not omitted)
Functional  alt="Search"          (the button's job, not its icon)
Informative alt="Map pin: the venue is on Market St,
              two blocks east of the station"
Complex     <figure> + caption + data table + alt pointing
            to both — a chart is never one alt string

The ear test

The discipline that fixes most alt text: read it aloud. Alt text that works reads like a good friend describing the screen — 'there is a photo of the workshop, the mechanic is mid-laugh, the dog is asleep on the chair' — not like a museum label ('photograph, mechanic, dog, chair') and not like a legal disclaimer ('image of workshop scene with mechanic and canine companion'). Screen readers are ears; write for ears.

Say what is relevant, in context: the same photo of a product gets different alt text on a product page (the product, its state) and a brand page (the scene, the feeling).
Name the numbers: a screenshot of a form error should read the error, not 'screenshot of form'. The words already on the page should never be duplicated in alt text — the listener hears them twice.
Respect the listener's time: alt text is a detour from the flow. Long descriptions belong to the page (a caption, a table), not to a 200-word alt string.

Labels are alt text for controls

A button that shows only an icon needs a label the reader can hear; an input's label must be associated (the label element, not a placeholder — placeholders disappear and are not reliable labels); and a group of radio buttons needs a fieldset legend naming the question they answer. The same economy applies: 'Search', not 'Click here to search our website'. Attention is the budget, and every label spends some of it — spend it on the word that names the action.

The keyboard walk →