Warning:
This wiki has been archived and is now read-only.

Action54AltAttribute

From HTML WG Wiki
Jump to: navigation, search

Action 54: First Draft

Statement of Purpose

The following draft text is based on the February 6, 2008 PFWG finding that the HTMLWG:

"...re-work the <img> element section to bring it into line as techniques for implementing WCAG 2.0.We say 2.0 because of the strong likelihood that WCAG 2.0 will precede HTML5 to Recommendation status...

WCAG WG is chartered to set Accessibility guidelines and HTML WG is not; so HTML5 should be careful to create features that support WCAG and describe their use in ways that conform to WCAG."

The aim of this draft is therefore to comply with WCAG 2.0, Guideline 1.1. Text Alternatives:

"Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language..."

Further Advice

Additional advice has been sought, is needed, and is pending from PFWG for this action item regarding the following:

Contents

Draft Text for the HTML 5 Specification

The image given by the src attribute is the embedded content, and the value of the alt attribute is the img element's fallback content.

Authoring requirements: The src attribute must be present, and must contain a URI (or IRI). The alt attribute must present and must contain a text alternative that serves the equivalent purpose as the image. What is to be considered an equivalent purpose, depends on the way an image is used.

Note: The remainder of the authoring section of 3.14.2 is informative and provides examples of how images are used within web pages and what are to be considered as appropriate text alternatives.

Text Alternatives

Text alternatives are a primary way for making information accessible, because they can be rendered through any sensory modality (for example, visual, auditory or tactile) to match the needs of the user. Providing text alternatives allows the information to be rendered in a variety of ways by a variety of user agents. For example, a person who cannot see a picture can have the text alternative read aloud using synthesized speech.

To determine appropriate Text alternatives it is important to think about why an image is being included in a document. What is its purpose? Thinking like this will help you to understand what is important about the image for the page's intended audience. Every image has a reason for being on a page because it either provides useful information, performs a function, or enhances aesthetics. Therefore, knowing what the image is for, makes writing appropriate Text alternatives easier.

General alt Text Good Practices

  • Provide the same informational content as the image.
  • Where an image performs a specific function, such as a graphical link, provide information about its functionality.
  • Be succinct as possible while still conveying equivalent values. Short text that describes its purpose or gives an overview will often suffice.
  • Write suitable alt text according to context. The same image in a different situation may need very different alt text.
  • Avoid redundant alt text. An example of this would be repeating the same text in your document, as well as in the alt attribute, and is unnecessary.

Use Cases

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: 

<!-- #montage {background: url(images/montage.png);}-->

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

User Agent Requirements

Advice has been sought, is needed, and is pending from PFWG regarding the separate issue of what an authoring or publishing tool should insert, in a case where no alt has been provided by the author, but the image is known to be "critical content".

ATAG 1.0 Techniques

ATAG 2.0 Techniques

UAAG 1.0 Techniques

Editors

This document is authored and offered to the HTML WG by working group members:

  • Steven Faulkner
  • Joshue O Connor
  • Laura Carlson

Peer reviewed by:

  • Gez Lemon
  • Gregory J. Rosmaita

May 8, 2008.

We would like to invite everyone to discuss this first draft of Action 54 on

Related References:

Retrieved from "https://www.w3.org/html/wg/wiki/index.php?title=Action54AltAttribute&oldid=4636"