PF/XTech/HTML5/TextAlternativeExamples

From W3C Wiki
< PF‎ | XTech‎ | HTML5

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

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

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

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

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

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

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