Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://davidmacd.com/blog/what-is-pure-decoration-alt-text-in-wcag.html below:

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".

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.

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.)

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 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:

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 --->

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 --->

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.

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

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.

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

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.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.3