Web Accessibility Training
Toronto, Montreal, Ottawa and worldwide via Webex More

When can a web author use null alt text
alt="" to make an image conform to WCAG?

There are a variety of opinions among reputable web accessibility professionals about when it is appropriate to use alt="" in the grey zone of ambient images. Most of the variance appears to be around the interpretation of "Pure Decoration".

Summary of Conclusions

  1. If it's a gradient image or spacer image etc., all agree it needs alt="".
  2. If it's a picture that has a purpose, information or function then it needs descriptive alt text.
  3. If it is a photo of some thing for ambience or eye candy, then it is in the grey zone and can have alt="". However, a short alt description is preferable to most screen reader users.

Detailed rational: Brief History of Null alt text

Back when table layouts ruled the web world, web masters used 100's of little spacer images to adjust positioning on the page. Screen reader read the file name "spacer, spacer spacer" 100's of times per page. This was solved with alt="" to make screen reader users ignore them. (There was a war on whether there should be a space between the quotes but that was resolved.)

WCAG 2 definition of "Pure Decoration "

The current language of the WCAG actually dates back to it's earliest drafts, in the days when spacer images were still common on the web.

In the WCAG, there is a deliberate avoidance of the word "Decoration" and instead the term "Pure decoration" (my emphasis) is introduced and defined as:

pure decoration

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.

So technically, "Pure decoration" is very narrow.

The concepts of "Adjacency" and "Redundancy"

The strict definition of "Pure Decoration" in WCAG does not include the concepts of adjacent or redundant text, nor does the the Understanding document. However, Techniques H2 (written about 2002) says if an linked image has the same destination as text next to it, use alt="" and wrap them both in the same anchor. Years later redundancy and adjacency was solidified in the HTML5 spec. Here is the text:

If the src attribute is set and the alt attribute is set to the empty string ( alt="" )
  • The image is either decorative or supplemental to the rest of the content, redundant with some other information in the document.
  • If the image is available and the user agent is configured to display that image, then the element represents the element's image data.
  • Otherwise, the element represents nothing, and may be omitted completely from the rendering. User agents may provide the user with a notification that an image is present but has been omitted from the rendering.

The recently created web accessibility tutorials created by the W3C Education and Outreach group, with approval by WCAG, further solidifies the concepts of redundancy and adjacency. They are in final draft right now but the section on images has been approved by WCAG. It says:

<--- begin quote --->

Code snippet:

<p> <img src="dog.jpg" alt="Dog with a bell attached to its collar."> Off-duty guide dogs often wear ... </p>

Note: If the text included an explanation of how the dog wears a bell, the image might be considered redundant and therefore decorative. As this isn’t mentioned in the text, the image is deemed to be informative. Example 2 on this page. (my emphasis)

It would be a WCAG failure to place a caption or legend before or after an image which refers to an ambient image with an alt="" . For instance, "©2004" placed after an image with alt="" would confuse a screen reader user, because the image is non-existent for them.

<--- end quote --->

The concept of "Ambient Images"

WCAG does not mention ambient photos in its definition of "pure decoration". Clearly they contain "information" so they don't meet the strict definition, but ambient images (eye candy photos) have slowly become a common use of alt="" . This is perhaps the biggest grey zone and is most controversial use case of alt="" in actual practice.

HTML5 says the following:

4.7.1.1.8 A graphical representation of some of the surrounding text

In many cases, the image is actually just supplementary, and its presence merely reinforces the surrounding text. In these cases, the alt attribute must be present but its value must be the empty string.

In general, an image falls into this category if removing the image doesn't make the page any less useful, but including the image makes it a lot easier for users of visual browsers to understand the concept.

The EO tutorial also articulates ambience as a justifiable use of alt="" .

<--- begin quote --->

Example 4

Code snippet:


<img src="family.jpg" alt="We’re family-friendly. ">

This image is used only to add ambience or visual interest to the page.

Note: If the purpose of this image was to identify a plant or convey other information, rather than to just improve the look of the page, it should probably be treated as informative. The author determines the purpose for the use of the image.

<--- end quote --->

Comments still accepted on the EO Tutorial and the ALT guidance in HTML5

The HTML5 at text guidance is currently under review so if you want to comment on the description of ambient images found in section 4.7.1.1.8 you can set up a bugzilla account here.

You can also comment on the Education and Outreach (EO) tutorial but comments are closing soon.

What are accessibility professionals saying?

I posted a Twitter Poll

It caused quite a discussion of about 30 posts. Here are some of the responses:

User testing

We have conducted informal testing with screen reader users, and have found about 90% prefer a short alternate on decorative images, unless they are "pure decoration" such as a gradient line, or spacer.

Fellow WCAG member, Kathy Wahlbin with Interactive A11Y had similar results in user testing. She reports users say "I like that" to a short description of decorative photographs.

Sam J, an advanced screen reader user reports above that it doesn't matter to him, and he prefers not to be bothered with the graphic unless it has a functional purpose.

WebAim proposes that user testing should consider loss aversion, which is that users are more inclined to say "keep" something, even if there is less value in keeping it than not keeping it. In this case, I prefer to take the users at their word, even if they may be experiencing loss aversion. Loss aversion may be a reasonable human characteristic. Veteran screen reader user Leonie Watson posted an article saying the following:

It seems to me that one person’s eye candy is another person’s emotional link to a website ...If people don’t want to listen to the alt text, they won’t. If [sighted] people don’t want to pause and look at the image, they won’t. In either case, it’s good to have the choice.

This is what we have found with most screen reader users.

Conclusion

The WCAG Working Group, has allowed the interpretation of "pure decoration" to evolve to include redundancy, adjacency and ambience in the new EO WCAG tutorial, and HTML5 specification without comment or objection, and it is doubtful the WCAG will further define "pure decoration". They probably would if the disability community raised serious concerns but that hasn't happened. Most screen reader users feel that alt on ambient images is nice to have, but not worth fighting for.

The general feeling of the WCAG Working Group is that if an author appears to be conscientiously applying alt on the site (rather than dumping alt="" on everything) then the author can decide whether something is intended to be purely decorative or not. Most experts in the field identify a grey zone in the interpretation of pure decoration. Think of it as a continuum:

  1. If it's a gradient image or spacer image etc., all agree it needs alt="".
  2. If it's a picture that has a purpose, information or function then it needs descriptive alt text.
  3. If it is a photo of some thing for ambience or eye candy, then it is in the grey zone and can have alt="". However, a short alt description is preferable to most screen reader users.

Feel free to comment on Twitter @davidmacd

Author information:

David MacDonald is a veteran WCAG member, co-editor of Using WAI ARIA in HTML5 and HTML5 Accessibility Task Force Member. Opinions are my own.




CONTACT US

For a quote or just to chat about your organization's needs


EMAIL

help at can hyphen adapt dot com, (spoken phonetically to trick spam bots)

PHONE

six one three, eight zero six, nine zero zero five

SOCIAL MEDIA