Alt text
This is an adaptation of an internal blog post I wrote at VisitScotland in September 2024.
In response to recommendations from a 3rd party auditor, alt text was being omitted from images by default on the basis that they were "purely decorative" — a position I strongly disagreed with.
I'd previously provided an argument against this interpretation of the audit's findings, but I still had questions about the informational role of images as VisitScotland content.
This article is an attempt to clarify and articulate my thoughts.
Pure decoration
The whole thing boils down to whether an image is "purely decorative" or not. Online advice seems clear cut when you read it, but examples tend to be highly simplified and hard to reason about when it comes to real-world practice.
Examples
Example 1 (I think we can all agree) should not have alt text. It is literally a decorative <img> tag creating an element border. Modern websites don't do this, so let's move on.
Examples 2 and 3 are contextually, rather than literally decorative. These are situations in which simple images and simple text are presented in such close proximity that alt text would clearly be duplicative and counter-productive for assistive technology users. The purpose of the image is not to convey information, but as a visual affordance making the information easier for some users to digest.
Whether an image ‘conveys information’ is the core criterion by which we judge it decorative or not… but what does that really mean? Removing a crocus flower image from a link reading "Crocus flower" doesn't deny anyone information — but that's surely not true for photographs used on a national tourism website.
What is information?
Claude Shannon’s “A Mathematical Theory of Communication” describes information as a measure of surprise:
- An event with probability 100% is perfectly unsurprising and yields no information.
- The less probable an event is, the more surprising it is and the more information it yields.
- If two independent events are measured separately, the total amount of information is the sum of the self-informations of the individual events.
Imagine a single photographic image on an otherwise blank page.
The image is the entirety of the content, and since we have no basis for expecting any particular image it yields 100% of the page’s information. Adding text to the page will increase the informantional content of the page only to the extent that it provides information not contained in the image.
Redundant imagery
In the following example we can safely remove the image’s alt text. A person with no sight doesn’t need to know the image is there, and a person with partial sight using a screen reader with the mouse pointer can confidently infer from the text what the depiction is.
Fried Eggs
With a crisp exterior and a golden, runny yolk, fried eggs are essential to the Scottish breakfast. Perfectly paired with a tattie scone, they're the finishing touch of the dish.
Illustrative imagery
Here’s a structurally identical example in which the text conveys nothing about what a traditional Scottish breakfast actually consists of or looks like.
Breakfast
The traditional Scottish breakfast is a testament to how years of history and tradition can come together to remind us that sharing a meal ultimately strengthens the bonds we’re building with loved ones.
The image is informative to the extent that it depicts anything not described by the text. I think illustrative is a good category name here; the picture is an instance of what the text describes, without being definitive. There’s a degree of informational redundancy here, because we can reasonably expect a depiction of some kind of breakfast food. But there's some surprise because we don't know precisely what.
Consider how your perception of the article would change if the image was:
- a plate of kippers
- a bowl of porridge
- two pints of lager
Incongruous imagery
Picking up on the last of the illustrative options above:
Breakfast
The traditional Scottish breakfast is a testament to how years of history and tradition can come together to remind us that sharing a meal ultimately strengthens the bonds we’re building with loved ones.
The ironic mismatch between the graphic and textual content turns this into a joke by subverting our expectations.
Clearly the “surprise” value of the image affects the tone and meaning of the content. (It would be very surprising indeed to see this on visitscotland.com!)
If we don't add alt text to this image we are not delivering equivalent content to all users, which is one of our fundamental accessibility obligations.
Incongruity, accidental or otherwise
If we saw the lager image on a live site it would be a clear case of gross misconduct, but what about this:
Breakfast
The traditional Scottish breakfast is a testament to how years of history and tradition can come together to remind us that sharing a meal ultimately strengthens the bonds we’re building with loved ones.
A breakfast stag is likely to be interpreted as unintentionally humorous rather than a deliberate joke. Regardless of the the intent all of our users have a right to experience the content as it is authored. This can’t be overstated.
This is a key misunderstanding about accessibility. It’s not primarily concerned with whether users' experiences of a website are good, but that they’re equivalent.
Sensible defaults
Of course, “equivalent” doesn’t mean “identical” (because that’s not possible across the entire audience) it means equally truthful. The users themselves can judge the quality of the content so long as they have access to it.
When alt text is redundant nobody is being denied access to information. Sighted and non-sighted users alike experience that redundancy – just in different ways. For sighted users any redundancy is minimally troublesome, perhaps even convenient.
Assistive technology users, we are told, will suffer from clutter on the page if alt text duplicates information contained in the article. This may be true for lists of links with images, but these are the exceptions that prove the rule.
Basically: having alt text is the correct default position. Unless you’re really sure that removing alt text is beneficial and you can explain precisely why, you’d better leave it in. Because depriving someone of information is worse than providing it twice.
How to proceed
One of the recurring phrases in the pages I’ve been linking to is this:
“The author determines the purpose for using the image.”
In order to properly manage the meaning and representation of images, we must make the intended purpose of the image explicit as a content design concern.
Content should be proposed, drafted and executed in a similar way to UI components, with specific UX goals, functional and non-functional requirements, testable acceptance criteria and so on.
The purpose of an image should be known in advance and a particular image selected on the basis of its suitability for that purpose.
The treatment of alt text would be informed by categorisation of that purpose [2] :
- Redundant: a literal re-expression of associated text.
- Illustrative: one of many possible subject examples.
- Descriptive: conveys what a specific thing looks like.
Image assets should be stored with well-formed descriptive alt text as metadata which is applied by default wherever it is used. Content editors should have the opportunity to amend or remove alt text on a case-by-case basis with reference to context.
Conclusion
As is often the case, examining content through the lense of accessibility can help us improve its overall quality.
When we say it's OK to remove alt text, we're saying "this image is meaningless". If that's the case why are we using it? Just to fill space? "A picture's worth a thousand words", the saying goes, and while (we hope) it doesn't weigh 1000KB, it's still an expensive form of content to deliver so we should be wringing every bit of meaning from it that we can [3] .
This exercise has clarified my thinking around the use of images and alt text as content, but there's still a lot of ground to cover. For now, though…
END
[1] The images are supposed to be appealing. Writing alt text that serves this content goal in an appropriate way is a whole other essay. ↩
[2] Deliberately avoiding existing terminology like "decorative" and "informative" to prevent confusion. ↩
[3] Programmers talk about code smells: "any characteristic in the source code of a program that possibly indicates a deeper problem". Alt text removal is a 'content smell' — it might not be a problem, but we should be suspicious. ↩