The Hidden Nuggets of WCAG2: When Not to Use ALT Attributes

So, just when should you not use an ALT attribute?

Short answer: never.

You must always have an ALT attribute if you have an IMG element. Always. No ifs, no buts, no maybes.

But WCAG2 Says …

I have developers come to me and insist that WCAG2 says it’s okay not to have an ALT attribute. They are referring to the section of Success Criterion 1.1.1 which says:

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.

These devs take this to mean that an ALT attribute may be omitted where the element effectively has no meaning. In fact, WCAG2 quite specifically states that if no information is conveyed by an image then it should be coded so that it can be ignored by assistive technologies.

This does not mean there shouldn’t be an ALT attribute – it means the ALT attribute should be empty.

The specific technique, H67 is:

Using null alt text and no title attribute on img elements for images that AT (assistive technology) should ignore

According to WCAG2, you can only make an assistive technology ignore your image if you have an empty (or “null”) ALT attribute – that is: alt="".  This is emphasised in WCAG2 by the inclusion of Failure 38:

Failure of Success Criterion 1.1.1 due to omitting the alt-attribute for non-text content used for decorative purposes only in HTML

When exactly should I use an empty ALT attribute?

You should use an empty ALT attribute when the image conveys no information. But be careful – I’ve seen people take this to extremes. Only images such as borders or spacer images should have empty ALT attributes. In most cases an image will require an ALT attribute – and if you’re not sure whether you should have an ALT attribute or not, err on the side of caution and use one.

Here are just a few examples where images should have empty ALT attributes:

The spacer GIF:

The underline feature:

The bullet point:

The decorative image:

However, in all of the examples above, it would be preferable to follow Technique C9: Using CSS to include decorative images.

What’s a decorative image?

The last example was of an image used for pure decoration. WCAG2 defines pure decoration as:

serving only an aesthetic purpose, providing no information, and having no functionality

Note: Text is only purely decorative if the words can be rearranged or substituted without changing their purpose.

Example: The cover page of a dictionary has random words in very light text in the background.

The following are some examples of images that have empty ALT attributes. In all these examples the images don’t convey a lot of information, but they are still not pure decoration. They convey some information and need descriptive ALT attributes.

ALT attribute should be ‘Old style map’

ALT attribute should be ‘Older man with glasses smiling at the camera’

ALT attribute should be ‘Merry Christmas’

The exception that makes the rule

The only exception is when you have an image that links off to a page, sitting next to a text link that links off to the same page. In that case the image and the text should be contained within the same HREF element and the ALT attribute should be empty. For example, the following should all have empty ALT attributes:

Hopefully, that’s going to help you make the right choice as to when to give an image an empty ALT attribute so that screen readers ignore it, or one that has meaningful information that will help the user.

However, that’s not all there is to say about ALT attributes.

Next week, I’ll have more on the weird and wonderful world of ALT attributes.