PF/XTech/HTML5/TextAlternativeExamples
Text Alternative Proposal Code Examples
This document contains examples and sample code for the WAI/PF recommendations on Textual Alternatives in HTML5. Please feel free to comment upon the contents of this page, and to contribute your own examples.
Table of Contents:
Use of FIGURE, LEGEND, and @alt
Three Stages of A Butterfly's Life Example
Each of the images in the 3 stages of a butterfly's life REQUIRE alt
text and/or labelledby
to provide them with unique and appropriate short descriptions, just as each form control in a FIELDSET
has its own LABEL
defined for it, with the value of the LEGEND
element providing a CAPTION-like function for the FIELDSET
, so too does LEGEND
provide a means of declaratively marking explicit bindings of groups of related
objects, as in:
<FIGURE aria-labelledby="l1"> <LEGEND id="l1">The Three Stages of a Butterfly's Life Cycle</LEGEND> <IMG alt="Stage 1: The larval stage." src="butterfly1.svg" longdesc="butterfly1.html"> <IMG alt="Stage 2: The pupal stage." src="butterfly2.svg" longdesc="butterfly2.html"> <IMG alt="Stage 3: The adult stage." src="butterfly3.svg" longdesc="butterfly3.html"> </FIGURE>
the LEGEND
applies to all three images as a collection of related objects, available, for example, in a screen reader situation, either through a verbosity setting or via an extended query, such as MagicKey+TAB reads the alt text of the individual graphic which has focus, MagicKey+TAB pressed twice rapidly (or with a moderator key) provides the user with the LEGEND
which describes, tersely, the group to which the individual image belongs, so that the user can be made aware of:
a) each individual image's short alternative text;
b) the grouping to which the image belongs (if it is one of a series presented in a FIGURE) or any other modality-specific content contained in HTML5's media-specific elements, including AUDIO, VIDEO, OBJECT and CANVAS;
Alt Attribute Code Samples From HTML Action 54
These examples are from the first draft of HTML Action 54 Alt Attribute Code Samples by Steve, Laura, and Josh. Feel free to use, revise, ignore them as needed for the proposal.
Purely Decorative Images
Description
Purely decorative images are visual enhancements, decorations or embellishments that provide no function or information beyond aesthetics to users who can view the images. They have no meaning in themselves and do not provide page content.
Examples
- Spacers
- Bullets
- Box corners
Markup Details
Mark up purely decorative images so they can be ignored by assistive technology with a null alt attribute (alt="") or preferably use CSS techniques. If the image isn't providing the user any informative content or enhancing greater understanding of the content, then it is appropriate for the alt text to be empty.
Markup Sample 1
Context: bullets.
HTML:
<ul class="bullets"> <li>Item</li> <li>Item</li> <li>Item</li> </ul>
CSS:
ul.bullets li {list-style-image:url(bullet.png);}
Markup Sample 2
Context: Any decorative image in a document.
<img src="decorative.png" alt="">
Markup Sample 3
Context: Specifying decorative images in the CSS document.
CSS:
Further Techniques
- Using null alt text and no title attribute on img elements for images that AT should ignore (HTML) W3C World Wide Web Consortium Note.
- Using CSS to include decorative images (CSS) W3C World Wide Web Consortium Note.
Complex Data Images
Description
Complex data images allow sighted users to understand data and data relationships. These visual representations can convey a vast amount of non-text content.
Examples
- Charts
- Graphs
- Diagrams
- Histograms
Markup Details
Provide a short text equivalent that gives the user an overview of the content or helps them to understand the thrust of a relationship. In addition, for many data images it may be necessary to provide more detailed information or supplemental content in another suitable way. Often these types of images are tabular by nature, making a table a logical markup choice, because a table allows assistive technology users to interrogate and navigate the data. Other ways of conveying equivalent information for complex data images are to use the image as a link, or to provide a separate text link to a more complete text description.
Markup Sample 1
Context: A graph depicting browser visits. It uses short alt text to summarize a trend with all the data in the image provided in a table.
<img src="graph.png" alt="Browser X leads visits to my site at 50 percent." aria-describedby="t1"> <table summary="Browsers and percent of visitors to my site." id="t1"> <!-- Remainder of table -->
Markup Sample 2
Context: A graph that repeats the previous paragraph in graphical form.
<p id="piedescription">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="The majority of documents triggered quirksmode." aria-describedby="piedescription"></p>
Markup Sample 3
Context: flowchart that repeats the previous paragraph in graphical form.
<p id="flowdescription">The network passes data to the Tokeniser stage, which passes data to the Tree Construction stage. From there, data goes to both the DOM and to Script Execution. Script Execution is linked to the DOM, and, using document.write(), passes data to the Tokeniser.</p> <p><img src="images/parsing-model-overview.png" alt="parsing model overview" aria-describedby="flowdescription"></p>
Further Techniques
- Providing short text alternatives that provide a brief description of the non-text content W3C World Wide Web Consortium Note.
- Providing long description for non-text content that serves the same purpose and presents the same information W3C World Wide Web Consortium Note.
- Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description W3C World Wide Web Consortium Note.
- Providing a long description in another location with a link to it that is immediately adjacent to the non-text content W3C World Wide Web Consortium Note.
Images of Pictures
Description
Images of pictures or graphics include visual representations of objects, people, scenes, abstractions, etc. This non-text content can convey a significant amount of information visually or provide a specific sensory experience to a sighted person.
Examples
- Photographs
- Paintings
- Drawings
- Artwork
Markup Details
Appropriate alt text value for a picture is a brief description, or name. As in all alt text authoring decisions, writing suitable text equivalents for pictures requires human judgment. The alt text value is subjective to the context where the image is used and the page author's writing style. Therefore, there is no single 'right' or 'correct' piece of alt text for any particular image. In addition to providing a short text alternative that gives a brief description of the non-text content, also providing supplemental content through another means when appropriate may be useful.
Markup Sample 1
Context: One of many vacation trip candid photographs uploaded to a photo-sharing site. It pictures your dog, Bubbles, digging in the sand on the beach.
<figure> <img src="1100670787_6a7c664aef.jpg" alt="My dog, Bubbles, digging in the sand on the beach"> <legend>Bubbles traveled everywhere with us.</legend> </figure>
Markup Sample 2
Context: An image on a page explaining in general terms Rorschach inkblot personality tests. The image is an abstract freeform which is subjective to individual interpretation.
<img src="inkblot.jpg" alt="An abstract, freeform inkblot">
or
<figure> <img src="/commons/a/a7/Rorschach1.jpg" alt="An abstract, freeform inkblot"> <legend>A black outline of the first of the ten cards in the Rorschach inkblot test.</legend> </figure>
Markup Sample 3
Context: Image of a painting inspired by a poem, on a page reciting that poem. In this case it is Waterhouse's 1888 "The Lady of Shalott" painting which was inspired by Tennyson's poem of the same name. In addition to the name provided via the alt attribute, a detailed description is provided on another page which is accessed via a link in the legend. A visible link like this can benefit not only screen reader users, but many others as well.
<h1>The Lady of Shalott</h1> <figure> <img src="painting.jpg" alt="The Lady of Shalott, by John William Waterhouse"> <legend><a href="description.html">Painting inspired by Tennyson's poem</a></legend> </figure> <!-- Full Recitation of Alfred, Lord Tennyson's Poem -->
Further Techniques
- Providing short text alternatives that provide a brief description of the non-text content W3C World Wide Web Consortium Note.
- Providing the accepted name or a descriptive name of the non-text content W3C World Wide Web Consortium Note.
- Providing long description for non-text content that serves the same purpose and presents the same information W3C World Wide Web Consortium Note.
- Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description W3C World Wide Web Consortium Note.
- Providing a long description in another location with a link to it that is immediately adjacent to the non-text content W3C World Wide Web Consortium Note.
Images of Text
Description
Images of text are pictures of alphabetic or numeric textual characters.
Examples include pictures of:
- Words
- Phrases
- Wordmark
- Mathematics
- Equations
- Formulæ
Markup Details
Mark up images of text so that they will provide assistive technology with equivalent information. Provide a text equivalent word-for-word that is the same as that provided in the image. Consider the necessity of using images of text at all and try to use electronic text when appropriate. Electronic text is presentation neutral and can be rendered visually, auditorily, tactilely, or by any combination. When an appropriate markup language exists like MathML for mathematical equations, it is appropriate to use markup rather than images to convey information.
Markup Sample 1
Context: Acme Company's wordmark which visually reads "Acme Company" in a fancy designed image.
<img src="wordmark.png" alt="Acme Company">
Markup Sample 2
Context: An image of the word "New!".
<img src="new.png" alt="New!">
Markup Sample 3
Context: Electronic text styled with CSS used instead of an image of text.
HTML:
<span class="new">New!</span>
CSS:
.new{
color:#000; background-color:#FF9; padding:0em 0.1em; border:1px solid #000; font-size: 0.8em; }
Markup Sample 4
Context: A mathematical equation.
HTML:
<!-- negative example --> <img src="pythagorean.png" alt="a2+b2=c2 (The square on the hypotenuse is equal to the sum of the squares on the other two sides.)"> <!-- positive example in MathML --> <mathml> <mrow> <apply> <eq/> <apply> <plus/> <apply> <power/> <ci>a</ci> <cn>2</cn> </apply> <apply> <plus/> <power/> <c1>b</c1> <cn>2</cn> </apply> <power/> <c1>c</c1> <cn>2</cn> </apply> </mrow>
Further Techniques
- Images of Text (Limited) W3C World Wide Web Consortium Note.
- Providing short text alternatives that provide a brief description of the non-text content W3C World Wide Web Consortium Note.
- Text Alternatives W3C World Wide Web Consortium Note.
CAPTCHA Images
Description
CAPTCHA stands for "Completely Automated Public Turing test to tell Computers and Humans Apart". CAPTCHA images are used for security purposes to confirm that content is being accessed by a person rather than a computer. This authentication is done through visual verification of an image. CAPTCHA typically presents an image with characters or words in it that the user is to re-type. The image is usually distorted and has some noise applied to it to make the characters difficult to read.
Examples
- An obscured image of textual characters
- An obscured image of a word
Markup Details
Provide text alternatives that identify and describe the purpose of the non-text content, and provide alternative forms of the CAPTCHA using output modes for different types of sensory perception. For instance provide an audio alternative along with the visual image. Locate the audio option right next to the visual one. This helps but is still problematic for people without sound cards, the deaf-blind, and some low hearing people. Another method is to include a form that asks a question along with the visual image. This helps but is can be problematic for people with cognitive impairments.
Markup Sample 1
Context: A CAPTCHA test which uses a distorted image of text.
<img src="captcha.png" alt="An audio challenge follows if you cannot read the text in this image."> <!-- audio CAPTCHA option that allows the user to listen and type the word --> <!-- form that asks a question -->
Further Techniques
- Providing a text alternative that describes the purpose of the CAPTCHA W3C World Wide Web Consortium Note.
- Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality W3C World Wide Web Consortium Note.
Images of Symbols
Description
Images of symbols are graphic representations that signify some concept, object, entity, quality, or brand. A symbol may be used to imply or represent a meaning beyond the obvious and apparent.
Examples
- Logos
- Icons
- Emblems
Markup Details
Markup images of symbols to identify the essence of what they represent or their purpose. It is usually unnecessary to describe the appearance of such an image or to identify it as a logo. Descriptions of what a symbol looks like would typically only be an appropriate text equivalent when it's purpose is as an image (see images of pictures), for instance in the context of a page explaining the visual qualities of a well designed logo. If the symbol provides redundant or purely decorative information, the value of the alt attribute of the image can be null (alt="")
Markup Sample 1
Context: A logo used for branding.
<h1><img src="w3clogo.png" alt="The World Wide Web Consortium (W3C)"></h1>
Markup Sample 2
Context: A warning icon on a weather page about hazardous conditions.
<img src="warningicon.png" alt="warning">
Further Techniques
- Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content W3C World Wide Web Consortium Note.
Functional Images
Description
Functional images are images that allow the user to 'do' things. They provide functionality. Activating or selecting a functional image causes something to happen, such as activating a link that causes a resource to be retrieved.
Examples
- Navigation Links
- Buttons
Markup Details
To provide the same functionality to the user, emphasize the action performed by the image or the link purpose. For instance, if a search button is a magnifying glass or binoculars, appropriate alt text could be "search" or "find"; not "magnifying glass", "binoculars" or "button". For navigation images, use the destination of the link as alt text. "Previous page" or "Next page" would be appropriate alt text for navigation images; not "picture of an arrow". By default, on receiving focus, a screen reader will announce to the user that it is link. So for navigation images, it is unnecessary to say "Link to previous page". "Previous page" will suffice. If a redundant text link of a navigation image is provided, the value of the alt attribute of the image can be null (alt="").
Markup Sample 1
Context: Navigation link.
<a href="page1.html"><img src="leftarrow.png" alt="Previous page"></a>
Markup Sample 2
Context: Navigation link with text content.
<a href="page1.html"><img src="leftarrow.png" alt="">Previous page</a>
Further Techniques
- Using alt attributes on images used as submit buttons W3C World Wide Web Consortium Note.
- Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content W3C World Wide Web Consortium Note.
- Providing link text that describes the purpose of a link W3C World Wide Web Consortium Note.