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

Gian Wild

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:

Tweet from Jamie Oliver with a spacer GIF with a URL for an ALT attribute

The underline feature:

Orange underline under a heading with ALT attribute of ‘Heading Underline’

The bullet point:

Bullet point with an ALT attribute of ‘Infrared camera bullet point'

The decorative image:

Blue abstract wave image with ALT attribute of ‘separator’

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’

Old style map

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

Older man with glasses smiling at the camera

ALT attribute should be ‘Merry Christmas’

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:

’New item’ text link next to an icon with an ALT attribute of ‘New item’. ‘Edit item’ text link next to an icon with an ALT attribute of ‘Edit item’

’Object (312)’ text link next to an image of an urn with the ALT attribute ‘Object’

PDF version’ text link next to a PDF icon with the ALT attribute ‘PDF image’. ‘Microsoft Word version’ text link next to a Word icon with an ALT attribute of ‘Microsoft Word image’

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.

 

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • Ian

    Whilst I agree with most of this article, I don’t agree with ‘err on the side of caution and use alt text’ ideology.

    It should be the other way around. Only use alt text if it fits within the context of the document.

    Think about it like this: If someone was reading the text of the page to me, would reading the alt text assist or distract from the context? Only if the former, the alt attribute should be populated with clear and obvious text.

    • http://www.accessibilityoz.com.au Gian Wild

      This is an age-old argument. Some people think that the less description, the better. However in my experience the majority of people that actually use ALT attributes for information prefer more information, not less.
      ALT attributes are specifically created for people who cannot access the image visually. Although they may be used for many other purposes (eg as a tooltip), that is their primary purpose and ipso facto, it should describe the image. itself.

  • Alec

    Re: a null value for an image that is accompanied by text in an anchor. If the text is off-screen, either permanently or, more likely, in a responsive layout, would it not be right to include an alt value? I think that it would be, and this case occured for me this week, but what do think, Gian?

    • http://www.accessibilityoz.com.au Gian Wild

      In this particular technique, you don’t include the ALT attribute because otherwise the screen reader would repeat the same information. Although this may be annoying, it certainly doesn’t stop people from using the page, so I would argue that if the text appears off-screen (for any reason) then the image should have an ALT attribute. In most cases a screen reader would then repeat the information, but this ALT attribute would be available to users who navigated with images disabled.

  • http://www.webhipster.com Vincent Young

    “Only images such as borders or spacer images should have empty ALT attributes.”

    This statement is grossly overstated. There are more instances where an empty ALT attribute could be your best option.

    For example:

    An image that has visual cues such as an arrow pointing to a drop-down with the text, “Seating Chart”. Descriptive ALT text here might not make much sense here and could possibly be clutter for those using assistive technology (assuming the drop-down has a proper label).

    • http://www.accessibilityoz.com.au Gian Wild

      I would argue that the example you provide would be “pure decoration”. Unfortunately that section you refer to is badly worded- it should read “only images such as borders, spacer images and images used for decoration should have empty ALT attributes” (as indicated by the following section on pure decoration).

      • http://www.webhipster.com Vincent Young

        Sounds good Gian ;)

  • Stevie D

    Ian – Remember that alt text is used by people who can’t view images (whether for technical reasons or visual disability) and also by people who have chosen to disable images (such as those on a low-end mobile phone or a slow connection). In the latter case, including alt text slightly more liberally allows them to know that there is an image there, and to choose to load it if they want to.

    I think the examples given make it pretty clear the kind of situations where you should use alt=””.

  • Ben Barber

    The best resource for writing appropriate alt text is “HTML5: Techniques for providing useful text alternatives” at http://www.w3.org/TR/html-alt-techniques/. It’s really really good.

    • http://www.webhipster.com Vincent Young

      Agreed. A while back wrote an alt decision tree. Threw it up below:

      http://webhipster.com/testing/accessibility/alt/

      Any requests for alternative text, just let me know, and I’ll find the time.

      • http://www.accessibilityoz.com.au Gian Wild

        Excellent decision tree!

    • http://www.accessibilityoz.com.au Gian Wild

      Yes, that is an excellent resource. Unfortunately I find that it has been mis-named, as it is all about ALT attributes and not restricted to HTML5. I will be referring to that document in later ALT attribute articles.

  • http://rhysburnie.com Rhys Burnie

    Nice write up Gian I remember discussing this with you a few years ago.
    Ive spent many hours trying to argue that point with other developers who code every alt with a value even where giving a value is actually detrimental. There are many legit reasons for an empty alt, the most important to me being if the text surrounding the image describes its meaning there’s no need for it again.
    In many websites you end up with stuff like this in a screen reader “Cat Cat” where one of the Cat’s is alt text and the other is actual visible text, I’ve always argued the alt in such a case should be empty because Cat has already be stated. Its only when an image appears and the surrounding text doesn’t convey any of its meaning that it should be specifically stated, and in most cases these days I would suggest an image with an empty alt again but inside a figure element with figcaption.