Alt text

This is an adaptation of an internal blog post I wrote at VisitScotland in September 2024. In response to misleading 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. Let's look at a few.

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. We don't do that any more, 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:

  1. An event with probability 100% is perfectly unsurprising and yields no information.
  2. The less probable an event is, the more surprising it is and the more information it yields.
  3. 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. Text added to the page may or may not reduce the overall amount of information on the page, depending on how it relates to 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.

Figure 1 - With this text, the image is “perfectly unsurprising” and therefore yields no information.

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.

Figure 2 - Alt text is required: “Mushrooms, fried egg, crispy bacon and a potato scone scattered with green shoots [1] .”

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:

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.

Two pints of lager in Tennents branded glasses on a pub table.
Figure 3 - This image has no informational overlap witht the text it accompanies.

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 stag with large antlers
Figure 4 - a less obvious, possibly accidental, mismatch between image and text.

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] :

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

Oct 5, 2024

[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. ↩