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)
Detailed information as well as suggestions are provided in the following sections.
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 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:
WCAG would conquer with the above quote. Null ALT is reserved for Pure Decoration |
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><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 |
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 "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 <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 |
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 4.8.1.1.10 |
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. |
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 4.8.1.1.6 |
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. |
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 |
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 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. |
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 |
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 |
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 |
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 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 /2007Oct/0286 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 |
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 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. |
WCAG requires alternative text on all images. | Recommend removing the example |
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 |
<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 |
<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. |
Provide Alt text describing the image | |
Section 4.10.7.4 |
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 |
No ALT Text… just a URL 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. |
Provide Alt text describing the 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. |
Provide Alt text describing the 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 | ||
<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. |
Provide Alt text describing the image | ||
10.5.13 |
<img alt="" class="extra" src="http://dev.w3.org/html5/spec/images/sample-progress.png">
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 |