CanAdapt home

Alt Guidance and Alt text in the HTML5 Document

Prepared for the HTML-A11Y Task Force Text Subteam
by David MacDonald Sept 25, 2012 Draft Revision 1.5

SUMMARY: This document provides commentary on two aspects relating to alternative text in the HTML5 draft specification. (June 7, 2012 Editor's Draft)

  1. Analysis of Guidance on usage of alternative text, as provided in Section 4.8 of the HTML5 specification (7 June 2012 version)
  2. Analysis of alternative texts currently provided for images in the HTML5 draft specification (7 June 2012 version)

Detailed information as well as suggestions are provided in the following sections.

Part 1: Analysis of Guidance on usage of alternative text, as provided in Section 4.8 of the HTML5 specification

Part 1 provides a point-by-point analysis in support of the 2010 bug #10708. It details specific items of author guidance regarding the use of alternative text found in Section 4.8 of the HTML 5 specification in comparison with the "Web Content Accessibility Guidelines (WCAG) 2.0" (a W3C Technical Recommendation) and/or the HTML Working Group's draft note: "HTML5: Techniques for providing useful text alternatives"  (latest editor's draft: http://dev.w3.org/html5/alt-techniques/).

The following 17 examples are provided to illustrate specific instances of guidance on alternative text that conflicts with existing W3C guidance. The recommendaton is to remove, not simply align the guidance; and similarly to remove any other non-normative guidance on alternative text from Section 4.8, since this exceeds the level of detailed non-normative guidance in many parts of the draft HTML5 spec, and it is redundant with the guidance provided in the draft note: "HTML5: Techniques for providing useful text alternatives".

Note: Most examples of guidance on alternative text in the HTML5 draft specification are not numbered, so the nearest section number is cited, and a snippet of code and adjacent HTML5 text is provided for reference.

Problematic alt advice in HTML5 Section 4.8 HTML5 Section and Quote Violations of WCAG and/or A11y TF Comments Related issues or emails How would it be corrected?

The HTML5 spec advises that alt "must be present and that its value must be the empty string." whereas established guidance requires descriptive alt text on an example like this one in Section 4.8.1.1.6 of HTML 5.

...

The HTML5 spec advises that it's "wrong" to include short text alternative on a flowchart, whereas established guidance is that there should be a non-empty text alternative.

 

 

 

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

A flowchart that repeats the previous paragraph in graphical form:

<p>The Network passes data to the Input Stream Preprocessor, ....</p> <p><img src="http://dev.w3.org/html5/spec/images/parsing-model-overview.png" alt=""></p>

In these cases, it would be wrong to include alternative text that consists of just a caption. If a caption is to be included, then either the title attribute can be used, ...

<p>The Network passes data to the Input Stream Preprocessor ... </p> <p><img src="http://dev.w3.org/html5/spec/images/parsing-model-overview.png" alt="" title="Flowchart representation of the parsing model."></p>

This HTML5 advice would fail WCAG 2.0 SC 1.1.1 Situation B It is also inconsistent with section 3.6 of “HTML5: Techniques for providing useful text alternatives” 29 March 2012 draft, section 4.1.2 which says:

Do not use null alt text if “An image contains relevant information, an alternative interpretation of which is available in the same document as structured text. Using an empty alt attribute hides an image from some users, which is incorrect, the image is not meaningless, it contains information which a range of users could interpret with the aid of the short text alternative and longer description. It also provides a text alternative for users who have images turned off in their browsers, so they can, if they wish, load and view the image. If an empty alt attribute is present there may be no indication that an image is present. Furthermore if a description of an image is provided in a document, a programmatic association between the image and the descriptive text is required, using an empty alt attribute on the image effectively precludes the assigning of a programmatic association.”

WCAG would conquer with the above quote. Null ALT is reserved for Pure Decoration

Issue 203

Bug 7362

Recommend removing the example.

The HTML5 spec recommends the use null alt text if the description of the image is nearby but is not programmatically associated with the image, and therefore not accessibility-supported, whereas, established guidance is that the description needs to be in ALT text or programmatically associated in an accessibility-supported manner

4.8.1
<p>I lived in <img src="carouge.svg" alt=""> Carouge.</p>...

<p><img src="carouge.svg" alt=""></p> <p>The coat of arms depicts a lion, sitting in front of a tree. It is used as decoration all over the town.</p> ...

<article> <h1>Fluffy and the Yarn</h1> <p>Fluffy was a cat who liked to play with yarn. He also liked to jump.</p> <aside><img src="fluffy.jpg" alt="" title="Fluffy"></aside> <p>He would play in the morning, he would play in the evening.</p> </article>

4.8.1.1.6
<p>According to a study covering several billion pages, about 62% of documents on the Web in 2007 triggered the Quirks rendering mode of Web browsers, about 30% triggered the Almost Standards mode, and about 9% triggered the Standards mode.</p><p><img src="rendering-mode-pie-chart.png" alt=""></p>

WCAG does not provide this use case for null alt text, and some accessibility community participants would argue its a failure of WCAG 1.1 because null alt is only for "pure decoration". Some users who rely on image text alternatives people want to know there is an image there and what's in it. http://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html

Oct 2007 email
Gregory J. Rosmaita
Suggestion to consult WCAG

"the HTML WG needs to work on authoring advice with the Web Accessibility Guidelines Working Group ... if it is to enter the realm of author guidance -- after all, WCAG 1.0 is a technical recommendation, and WCAG 2.0 will more than likely become one long before work on HTML5 is complete, so harmonization of the two efforts is essential... "

Bug 11027 Provide Text alternatives

 

Recommend the example be removed.

The HTML5 spec recommends that the author works the alt text into the flow of the sentences around it, as if to make it part of the prose. This causes screen reader users to hear “Graph:” and then text that flows right into the following sentence, not knowing where the image description ends.

Established best practises are that ALT text simply describe the graphic

4.8.1
<p>He picked up the folder and a piece of paper fell out.</p> <p><img src="carouge.svg" alt="Shaped like a shield, the paper had a red background, a green tree, and a yellow lion with its tongue hanging out and whose tail was shaped like an S."></p> <p>He stared at the folder. S! ...</p> ...

<article> <h1>My cats</h1> <h2>Fluffy</h2> <p>Fluffy is my favorite.</p> <img src="fluffy.jpg" alt="She likes playing with a ball of yarn."> <p>She's just too cute.</p> <h2>Miles</h2> <p>My other cat, Miles just eats and sleeps.</p> </article>

<p>I've got a cat named Fluffy and a dog named Miles.</p> <img src="fluffy.jpg" alt="Fluffy, my cat, tends to keep itself busy.">

4.8.1.1.3
<p> You are standing in an open field west of a house. <img src="house.jpeg" alt="The house is white, with a boarded front door."> There is a small mailbox here. </p>

There are no documented accessibility accessibility community participants known to the HTML A11Y TF who recommend alt text be put in the past tense to weave it into the story, nor are there requests for this by blind users to WCAG, and is not consistent with WCAG 2.0 guidance.

Most AT announces something like “Graphic:...” when they encounter an image.  So weaving alt text into sentences won’t accomplish the goal of free flowing prose to blind users. It will just confuse people, who won’t know when the description of the image ends and the prose starts. 

In the 2nd and 3rd code examples to the left, the alt text is worked into the paragraph, which is using a pronoun for the cat etc... if the blind person is going from photo to photo this type of alt text will not adequately inform them of the image without gaining context from the surrounding paragraph. Working alt into the flow of the sentence is not standard, nor expected or desired by most users.

  Recommend the example be removed.
The HTML5 spec recommends the use of the title attribute instead of the alt attribute, when it is well established that title is not supported in some Assistive Technology, whereas established guidance is is that title is not intended for that purpose, and it is a poor use of the title attribute.

4.8.1 Here it is not known at the time of publication what the image will be ... instead only a brief caption for the image is provided, in the title attribute:

<p>The last user to have uploaded a coat of arms uploaded this one:</p> <p><img src="last-uploaded-coat-of-arms.cgi" title="User-uploaded coat of arms."></p>

... Not providing replacement text makes the document more difficult to use for people who are unable to view images, e.g. blind users, ...

4.8.1.1.6 Graphical representation of some of the surrounding text
...In these cases, it would be wrong to include alternative text that consists of just a caption. If a caption is to be included, then either the title attribute can be used, ...

4.8.1.1.10
<p><label>What does this image say? <img src="captcha.cgi?id=8934" title="CAPTCHA">

WCAG 2 does not provide a use case for this omission of alt text.  The title attribute is inconsistently supported in assistive technology. It is contentious advice which does not represent the consensus of accessibility community participants.

The paragraph following the code example understates the problem. Not having an alt attribute doesn't make it "more difficult" for blind people, it completely shuts them out. The correct response is for the tool to prompt the user for an alt text.

The advice for 4.8.1.1.10 captcha, there is no consensus on using the title instead of the alt . WCAG on the other hand requires a "text alternative" on Captcha.

Bug filed Aug 2009 #7362

Bug#9216 Mar 2010

Recommend the example be removed.

The HTML5 spec advises the author to use the Title attribute in conjunction with alt text, with is not accessibility-supported.

The HTML5 spec advises the author that it is “bad” to use that the word “photo” as part of alt text describing a photo. Some screen reader users may want to know it's a photo and not a painting.

 

4.8.1.1.3
Text such as "Photo of white house with boarded door" would be equally bad alternative text (though it could be suitable for the title attribute or in the figcaption element of a figure with this image).

4.8.1.1.6
<p><img src="http://dev.w3.org/html5/spec/images/parsing-model-overview.png" alt=""   title="Flowchart representation of the parsing model.">

The position of the HTML5 document does not represent the views of the accessibility community on this. If information is in the Title attribute when there is an alt attribute present, the Title will not be read by most assistive technology. It is not accessibility-supported, which makes it a violation of WCAG 2.

Some screen reader users may want to know it’s a photo and not a painting, or drawing. This is an issue that should be discussed outside of the specification, rather than creating a false failure.

Bug filed Aug 2009 #7362

Bug#9216 Mar 2010

Recommend removing the example

The HTML5 spec advises the author that it is “wrong” to use that the word “logo” as part of alt text describing the logo. Whereas some users may want to know that it is a logo. Either with or without a the word "logo" is acceptable.

4.8.1.1.4 In some cases, the icon is supplemental to a text label conveying the same meaning. In those cases, the alt attribute must be present but must be empty.

... <nav> <p><a href="/help/"><img src="/icons/help.png" alt=""> Help</a></p> <p><a href="/configure/"><img src="/icons/configuration.png" alt=""> Configuration Tools</a></p> </nav>

Some screen reader users may want to know it’s a logo, and not some other type of image. This is an issue that should be discussed outside of the specification, rather than creating a false failure that is inconsistent with WCAG.

  Recommend removing the example

The HTML5 spec advises the author to provide editorial information in the alt text that is not available to sighted users unless images off. Whereas, sighted users may want this information that would not normally be available to them.

4.8.1
<p>The trick here is to know how to anticipate; to know at what speed and what distance the subject will pass by.</p> <img src="fluffy.jpg" alt="A cat flying by, chasing a ball of yarn, can be photographed quite nicely using this technique.">

This provides information that a sighted person might want, but they would not know about unless they turn off images in their browser.   Recommend removing the example
The HTML5 spec advises the author to use the title attribute for supplementary text in addition to alt, this is not consistent with established practices. It is an accessibility-supported way to provide optional supplementary information

4.8.1.1.1
So, in general, alternative text can be written by considering what one would have written had one not been able to include the image.

A corollary to this is that the alt attribute's value ... it is not meant to supplement the image. The titleattribute can be used for supplemental information.

Some of the example alt text above this paragraph do exactly what is being discouraged in the paragraph, they supplement the image, and doesn't describe what is above it.

There is not consensus that supplemental information cannot be provided in the alt with the straight alternative. Providing supplemental information in the Title attribute in addition to the alt text, would not be read by most screen readers. It is not accessibility-supported, which makes it a violation of WCAG 2.

Bug filed Aug 2009 #7362

Bug#9216 Mar 2010

Recommend removing the example
The HTML5 spec advises the author that it is “bad” and "incorrect" to provide alt text that describes the image instead of trying to work the alt text into the flow of the surrounding sentences, which is contrary to established guidance is that alt provide equivalent purpose.

4.8.1.1.1
Second, here's the bad solution. In this incorrect way of doing things, the alternative text is simply a description of the image, instead of a textual replacement for the image. It's bad because when the image isn't shown, the text doesn't flow as well as in the first example.

This is the wrong way to do things. --> <p> You are standing in an open field west of a house. <img src="house.jpeg" alt="A white house, with a boarded front door."> There is a small mailbox here. </p>

There is nothing in this "bad" example that is contrary to WCAG 2, on the contrary, most users would prefer this type of alt text. The HTML5 advice is inconsistent with expert advice, with current use, with WCAG and with user preferences. There is not any known active debate around this issue in the accessibility world.

  Recommend removing the example
The HTML5 spec advises the author that a logo is “purely decorative” and should have null alt text in some instances. Whereas, established guidance the logo is NOT purely decorative.

4.8.1.1.4
If the logo is being used next to the name of the entity that it represents, then the logo is supplemental, and its alt attribute must instead be empty.

If the logo is merely used as decorative material (as branding, or, for example, as a side image in an article that mentions the entity to which the logo belongs), then the entry below on purely decorative images applies.

Saying the alt "must instead be empty" if the logo is supplemental makes it a failure to put something like "W3C logo". This is not a failure of WCAG, and some users who rely on image text alternatives may want to know that there is a logo there. There are no instructions in WCAG to give null alt text to supplemental information, only to "pure decoration"

  Recommend removing the example
The HTML5 spec advises that image sites need not provide alt on images whereas established guidance is that images need to provide text alternatives to pass WCAG

A photo on a photo-sharing site, if the site received the image with no metadata other than the caption, could be marked up as follows:<figure> <img src="1100670787_6a7c664aef.jpg"> <figcaption>Bubbles traveled everywhere with us.</figcaption></figure>

This is inconsistent with WCAG 2 which requires alt text. In this example the Figcaption could be sufficient, but it doesn't provide an equivalent purpose to picture 2009Jan 0564
bug to make required alt more explicit
Recommend removing the example
The HTML5 spec provides an example that may offend some readers. It depicts the Church as a spaghetti monster.

4.8.1.1.9
<h1>The Church</h1> <p>You come across a flying spaghetti monster. Which side of His Noodliness do you wish to reach out for?</p> <p><a href="?go=left" >....

This may offend some readers. It is referencing Richard Dawkins, who uses the "flying spaghetti monster" argument to debate against the existence of God.

The W3C generally does not to wander into religion or politics with its examples. Particulary critical ones.

  Recommend removing the example
The HTML5 spec advises web authors that there is no eed for basic alt text on web cams etc…

4.8.1.1.10
(e.g. a Webcam), or because the page is being generated by a script using user-provided images where the user did not provide suitable or usable alternative text (e.g. photograph sharing sites), or because the author does not himself know what the images represent (e.g. a blind photographer sharing an image on his blog).

In such cases, the alt attribute may be omitted, but one of the following conditions must be met as well:

A photo on a photo-sharing site, if the site received the image with no metadata other than the caption, could be marked up as follows:<figure> <img src="1100670787_6a7c664aef.jpg"> <figcaption>Bubbles traveled everywhere with us.</figcaption></figure>

There are an array of different approaches to web cams and advice is still developing. The HTML5 spec should not take a position on this.

2009Jan 0564
bug to make required alt more explicit

/2007Oct/0286
PFWG review of omitting alt

Bug 9215 filed regarding web cams

Recommend removing the example
The HTML5 spec calls alt text a "replacement" for the image whereas WCAG says it has an "equivalent purpose".

4.8.1.1.3
It is important to realize that the alternative text is a replacement for the image, not a description of the image.

WCAG 2 says “a text alternative that serves the equivalent purpose”. There is no real way to "replace" an image.   Recommend removing the example
The HTML5 spec discusses images of text without discouraging their use whereas WCAG discourages their use and only allows images of text if the visual presentation cannot be met with text and CSS) WCAG 2 SC 1.4.5

4.8.1.1.5
Sometimes, an image just consists of text, and the purpose of the image is not to highlight the actual typographic effects used to render the text, but just to convey the text itself.

In such cases, the alt attribute must be present but must consist of the same text as written in the image itself.

There is no note, or warning that this should not be done unless there is no way of achieving the desired visual presentation using programmatic means such as CSS. It is a violation of WCAG 2 SC 1.4.5 to use an image of text if the visual presentation can be accomplished with text (and CSS). This is ignored in the HTML5 advice. Images of text cause trouble for a variety of reasons.

  Recommend removing the example

The HTML5 spec gives advice to "Never put the image's caption in the alt="" attribute!" when there is a long description present. The advice fails WCAG

 

4.8.1.1.6
<!-- This is WRONG. Do not do this. Instead, do what the above examples do. --> <p>The Network passes data to the Input Stream Preprocessor, ....</p>
<p><img src="http://dev.w3.org/html5/spec/images/parsing-model-overview.png" alt="Flowchart representation of the parsing model."></p>
<!-- Never put the image's caption in the alt="" attribute! -->
WCAG States that if there is no alt text for an image that has a long description then it is a failure of WCAG 2.0 SC 1.1.1 Situation B   Recommend removing the example

The HTML5 spec allows a Meta Generator exemption

This is a well know discussion. Issue 31c

4.8.1.1.12 Guidance for markup generators

Markup generators (such as WYSIWYG authoring tools) should, wherever possible, obtain alternative text from their users. However, it is recognized that in many cases, this will not be possible.

4.8.1.1.13 Guidance for conformance checkers

WCAG requires alternative text on all images.

2007 email 7 members

2007 Oct

2010

Recommend removing the example

Part 2: Analysis of alternative texts currently provided for images in the HTML5 draft specification (7 June 2012 version)

Part 2 provides a point-by-point analysis in support of the 2010 Bug 11027. There are 11 images below which appear in the HTML 5 Specification. Nine (9) images used null alt text but were not “Pure Decoration”. One (1) has an ALT text typo, and (1) is a candidate for a long description at 108 words. It is assumed images were given null alt values because they are embellishing or visualizing a concept discussed in a nearby paragraph. This use of ALT text is inconsistent with WCAG 2. Null alt text under WCAG cannot be used for this purpose because it causes the Assistive Technology to ignore the image. Users who rely on image text alternatives want to know that there is an image there. WCAG requires that Null alt can only be used on Pure Decoration. http://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html

Contentious alt in HTML5 Section 4.8 HTML5 Section and Quote Violations of WCAG and/or A11y TF Comments Recommendation Suggested ALT text

3.2.5.1

Venn diagram 

<p><object data="images/content-venn.svg" height="288" width="1000"><img alt="" src="http://dev.w3.org/html5/spec/images/content-venn.png"></object></p>

Null alt text under WCAG cannot be used for this purpose. People who are unable to view images need to know that there is an image there and what it is. Null is reserved for pure decoration which this is not.

http://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html

Provide Alt text describing the image  

4.9.10

table information flow diagram

<img alt="" height="256" src="http://dev.w3.org/html5/spec/images/table-scope-diagram.png" width="459">

Null alt text under WCAG cannot be used for this purpose. People who are unable to view images need to know that there is an image there to describe it. Null alt can only be used on decorative text.
http://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html

Provide Alt text describing the image  

Section 4.10.7.4

drop down with urls

Alt=”A text box with an icon ... to the right of the drow down box, ...”

typo "drow down" instead of "drop down" fix the typo  
4.10.7.3.7

dropdown auto complete example

No ALT Text… just a URL of image.

dropdown auto complete example

No ALT Text… just a URL of image.

Null alt text under WCAG cannot be used for this purpose. People who are unable to view images need to know that there is an image there to describe it. Null alt can only be used on decorative text.
http://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html

Provide Alt text describing the image  
 

screen shot of image

No ALT Text… just a URL of image.

Null alt text under WCAG cannot be used for this purpose. People who are unable to view images need to know that there is an image there to describe it. Null alt can only be used on decorative text.
http://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html

Provide Alt text describing the image  
 

screen shot of image

Alt=”The dialog box could have the title 'Unknown File Type' and could say 'You have attempted to access:' followed by a URL, followed by a prompt such as 'How would you like FerretBrowser to handle this resource?' with three radio buttons, one saying 'Contact the FerretBrowser plugin registry to see if there is an official way to handle this resource.', one saying 'Pass this URL to a local application' with an application selector, and one saying 'Pass this URL to the "Kittens-at-work displayer" application at "kittens.example.org"', with a checkbox labeled 'Always do this for resources using the "application/x-meowmeow" type in future.', and with two buttons, 'Ok' and 'Cancel'.”

 

Candidate for a long description at 108 words. Provide a short alt text and longdesc with this text  
 

Screen shot network diagram

<img alt="" height="450" src="http://dev.w3.org/html5/spec/images/parsing-model-overview.png" width="345">

 

Null alt text under WCAG cannot be used for this purpose. People who are unable to view images need to know that there is an image there to describe it. Null alt can only be used on decorative text.
http://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html

Provide Alt text describing the image  
10.5.13

progress bar example

<img alt="" class="extra" src="http://dev.w3.org/html5/spec/images/sample-progress.png">

drop down of programming languages

alt=""

Null alt text under WCAG cannot be used for this purpose. People who are unable to view images need to know that there is an image there to describe it. Null alt can only be used on decorative text.

http://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html
Provide Alt text describing the image