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
- If it's a gradient image or spacer image etc., all
agree it needs
alt=""
. - If it's a picture that has a purpose, information or function then it needs descriptive alt text.
- 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 shortalt
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:
- 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 withalt=""
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 --->
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
POLL: Does this alt text pass #WCAG?
<img scr="john.jpeg"
alt="">
<h1>John Doe
Biography</h1>
<p>John was born....
— David MacDonald (@davidmacd) January
20, 2015
It caused quite a discussion of about 30 posts. Here are some of the responses:
@davidmacd @pauljadam @dylanbarrell @jared_w_smith @mixolydian example
portrait shot http://t.co/B8yS1KDDqq
it's a judgement call by author
— Steve Faulkner (@stevefaulkner) January
20, 2015
@davidmacd fail, how
can I as a blind user view John's photo? Show it to a friend
to help me find that person in a crowd or put on a PPT?
— Paul J Adam (@pauljadam) January
20, 2015
@davidmacd @jared_w_smith @pauljadam In most
instances I'd say it's trivial although obviously there
are cases where it would be necessary.
— Sam J (@mixolydian) January
20, 2015
@pauljadam @davidmacd Here is my
argument in a more appropriate medium than Twitter http://t.co/slqtQDx814
— holistica11y (@dylanbarrell) January
20, 2015
@dylanbarrell
that's fine. you can't just put alt="" on it
though. @davidmacd
— Paul J Adam (@pauljadam) January
20, 2015
@davidmacd Yes, it
passes. The content of the image is conveyed.
— Jared Smith (@jared_w_smith) January
20, 2015
@davidmacd @jimthatc @pauljadam I don't
think the question is whether the image is decorative but rather
whether it is redundant.
— Sam J (@mixolydian) January
20, 2015
@davidmacd agree, like
short alts on grey zone things. having the option is nice
— Brian Moore (@bmoore123) January
28, 2015
@davidmacd IMO ambient
images can include clues to diversity, acceptance, and inclusion
- can have #a11y
importance.
— Jon Avila (@JonAvilaSSB) January
29, 2015
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:
- If it's a gradient image or spacer image etc., all
agree it needs
alt=""
. - If it's a picture that has a purpose, information or function then it needs descriptive alt text.
- 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 shortalt
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
PHONE