Don’t alt all your images

Whenever I hear about accessibility, alt text comes up. Tools and plugins abound which say “this image doesn’t have an alt text, fail!”

Those tools are wrong. People who say the tools are right are also wrong.

What they’re referring to is the WCAG 2.0’s guideline about non-text content, or success criterion 1.1.1. This guideline says that “all non-text content that is presented to the user has a text alternative” — and it seems that’s as far as people read.

Here’s the guideline, minus the exceptions:

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. (Level A)

Let’s look more closely at what it’s saying. Anything that is content but is not text, such as images, should have a text alternative that serves the equivalent purpose. It doesn’t say the image itself has to have alt text, or the alt attribute — which is what the automated tools check for — nor does it suppose that every single image should have a text alternative. All non-text content needs a text-based alternative that has the same purpose.

Remember that there are exceptions in the criterion? One of those says that any non-text content that’s meant for decoration, formatting, or is invisible should be done in such a way that it can be ignored:

Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.

A decorative image is one that doesn’t show any additional information, is there for aesthetics, and doesn’t have any functionality attached to it. Formatting means any visual formatting. Invisible would include tracking gifs.

How should we handle these?

Remember that the guidelines say that these kinds of non-text content need to be done so they can be ignored by assistive technology. For images the solution is simple.

alt=””

A blank alt attribute.

You shouldn’t remove the alt attribute, because screen readers will announce that there’s an image. Instead, leave the attribute blank, so the technology knows to ignore it. This does seem to be a quirk of assistive technology, but it does also make sense; if the image doesn’t have an alt attribute it might still be important, so it gets announced so someone can ask what the image is. If the attribute is blank, you’re telling the system that “This image is decoration and doesn’t add any more content,” so it can skip over it.

How can you tell if an image is decoration?

I like to cover the image up and see if the content it’s with still makes sense. You could also swap it out with a picture of a cute kitten or something totally unrelated to the content. If the content still makes sense, blank the attribute.

The only thing to be careful of with this is images used in links. If the image is the only thing in the link, you need an alt attribute that serves equivalent purpose. If it’s your logo, then it should be:

If it’s the site’s logo, it should be:

If it’s a link to a page, it should be:

If the image is not the only content in a link leave the alt attribute blank:

In this third case, the link text is all you need as it’s a text-based alternative to the image that serves the same purpose, and as it’s part of the same link, computers know it’s for the same thing. They may not know what the image is but they know it’s linked to that text. Also, don’t forget that Google bases link strength in part on how relevant the link text is to the destination — bad alt attributes in a link = poorer relevancy = poorer results in Google).

Using alt attributes is to be commended. I praise anyone who thinks about using them. Just remember that the success criterion isn’t black and white, alt attribute or you fail. It’s about giving people the same or equivalent experience. Think what the image brings to your content, and write alt attributes accordingly. If it’s decorative and just looks pretty, is someone not knowing the image is there going to miss it?

There are some other alternatives to the alt attribute, which I’ll cover in a future Medium post. For now, I’d love to hear your thoughts and experiences.