Thanks to a retweet by Beth Fox, I came across ‘s 2017 post, Alt-texts: The Ultimate Guide. It’s well worth reading in full, but I want to summarize why I think that.
is visually impaired, and his screen reader comes across lots of what he calls alt-text-fails, like image file names or photographer credits. As he says:
An alt-text is a description of an image that’s shown to people who for some reason can’t see the image…
Alt-texts are super important! So important that the Web Content Accessibility Guidelines (WCAG) have alt-texts as their very first guideline…
For a long time on my blogs, including this one, I treated alt-text as a way to show a kind of cleverness: many of the images here have alt-text that was intended as a pun or a side comment; it doesn’t describe the image at all. So it was no help to anyone.
Describing: it depends
points out what should be obvious: what you put in the alt-text description depends on context. Here’s an image from his post:
If the context was about a TV series, he says, the alt-text might be:
Star of the show, Adam Lee, looking strained outside in the rain.
In an article on photography, though:
Close up, grayscale photograph of man outside, face in focus, unfocused background.
The top items for me from Göransson:
- Describe the image in context.
- Keep it concise.
- Don’t say it’s an image (as in, don’t put “image of” or similar in the alt-text).
- End with a period (so the screen reader will pause for a moment).
- Always include text labels with icons.
That last point is about alt-text, in a sense: he’s saying put text on screen next to an icon, and not in alt-text. Icons shouldn’t stand alone, as users who didn’t create the icons could tell you. (That’s a whole other story, as this link from his article illustrated.)