HTML5: Techniques for providing useful text alternatives

Editor's Draft 1st April 2010

Editor:

Steve Faulkner, The Paciello Group.


Abstract

This document contains author conformance requirements for use of the alt attribute in HTML5 and best practice guidance for authors of HTML documents on providing text alternatives for images.

Status of This document

This document is for review by the HTML and Protocols & Formats working groups and other interested people. It is subject to change without notice. This document has no formal standing within W3C. The basis of the current content is from sections 4.8.2.1.1 to 4.8.2.1.11 of the HTML5 specification and the text produced for Action 54 in the HTML issue tracker.

Table of Contents

Introduction

Text Alternatives

Text alternatives are a primary way of making visual 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.

Examples of scenarios where users benefit from text alternatives for images

General Text Alternative Good Practices

Conformance Requirements

All diagrams, examples, and notes in this specification are non-normative, as are all sections explicitly marked non-normative. Everything else in this specification is normative.

The key words "MUST", "MUST NOT", "REQUIRED", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this document are to be interpreted as described in RFC2119.


Methods for Providing Text Alternatives

The img element alt attribute

The primary method for providing text alternatives for images is by including text in the img element alt attribute. In graphical browsers the content of the alt attribute is typically displayed along with an indication (bordered area and/or an image icon) of the presence of an image when the image is not displayed, because the user has disabled image display or the image source information is incorrect. Assistive technologies such as screen readers will typically announce the presence of an image followed by the alt attribute content. Text based browsers may display the alt attribute content in brackets or in different colored text or as the content of a link to the image or as text without any indication of the image a prefixed with an indication of the image.

Example:

<img src="example.jpg" alt="Alternative text.">
Advantages:
Disadvantages:

 

The figure and figcaption elements

to do

The aria-labelledby and aria-describedby attributes

to do

Text content within the same document or another document

to do

Text content next to or prior to an image

to do

The img element title attribute

to do

The img element longdesc attribute

to do


Requirements and Recommendations:

The requirements and recommendations for the alt attribute depend on what the image is intended to represent and the context in which it is used, as described in the following sections. Each section includes a description, code and graphical examples and links to related techniques.

1. A link or button containing nothing but an image

When an a element that is a hyperlink, or a button element, has no text content but contains one or more images, the alt attributes MUST contain text that together convey the purpose of the link or button.

Example 1.1

In this example, a user is asked to pick her preferred color from a list of three. Each color is given by an image, but for users who cannot view the images, the color names are included within the alt attributes of the images:

Example Rendering:

The example HTML code as displayed in a browser. 3 links each containing a rectangular image:  1 is blue with the text 'blue', 2 red with the text 'red' and 3 is green with the text 'green'.

Example code:

<ul>
<li><a href="red.html"><img src="red.jpeg" alt="Red"></a></li>
<li><a href="green.html"><img src="green.jpeg" alt="Green"></a></li>
<li><a href="blue.html"><img src="blue.jpeg" alt="Blue"></a></li></ul>

Example 1.2

In this example, a button has a set of images to indicate the kind of color output desired by the user. The first image is used to give the text alternative.

Example Rendering:

A button with the letters R G B.

Example code:

<abbr title="red, green and blue."><button name="rgb">
<img src="red.jpg" alt="RGB"><img src="green.jpg" alt=""><img src="blue.jpg" alt=""></button>
</abbr>

Since each image represents one part of the text, it could also be written like this:

<abbr title="red, green and blue.">
<button name="rgb"><img src="red.jpg" alt="R"><img src="green.jpg" alt="G">
<img src="blue.jpg" alt="B"></button></abbr>

However, as the images form the visual representation of a single button and users will not normally interact with the individual images, adding the text alternative to one of the images only is most appropriate.

Related techniques and resources

2. Graphical representations: charts, diagrams, graphs, maps, illustrations

The full text alternative MAY be provided in the alt attribute, or a shorter text alternative MAY be provided in the alt attribute or in a programmatically associated element, and a longer programmatically associated text alternative provided in the same document or in a linked document.

It is important to understand that a text alternative provided in the alt attribute is a replacement for the image, while a short text alternative in the alt attribute, accompanied by a programmatically associated longer text alternative, can be a description of the image or a link target if the image is the sole content of a link.

While all the examples below can be considered for use, each method has advantages and disadvantages.

Example 2.1

In the following example we have an image of a flowchart , with text in the alt attribute describes the process shown in the flowchart:

Example Image:

flowchart

Example Code:

<p>A flowchart representing a process for dealing with a non-functioning lamp:</p>
<p><img src="flowchart.gif" alt="If the lamp doesn't work; check if it's plugged in. 
If not, plug it in. If it's plugged in and still doesn't work; check if the bulb is burned out. 
If it is, replace the bulb. If it still does not work; buy a new lamp."></p>

Example 2.2

Here's another example of the same flowchart image, showing a short text alternative included in the alt attribute, in this case the text alternative is a description of the link target as the image is the sole content of a link. The link points to a description, within the same document, of the process represented in the flowchart. Note a title has been included on the link for sighted mouse users, the title provides information about the link target.

Example Code:

<p><a href="#d1" title="Flowchart description."><img src="flowchart.gif" alt="Broken lamp flowchart description."></a></p>
...

<div id="d1">
<h2>Broken lamp flowchart description</h2>

<p>If the lamp doesn't work; check if it's plugged in. If not, 
plug it in. If it's plugged in and still doesn't work; check if the bulb 
is burned out. If it is, replace the bulb. If it still does not work; buy a new lamp.</p>
</div>

Advantages:
Disadvantages:

Example 2.3

Here's another example of the same flowchart image, showing a short text alternative included in the alt attribute and a longer text alternative in text, programmatically associated using the aria-describedby attribute:

Example Code:

<p><img src="flowchart.gif" alt="A flowchart representing a process for dealing with a non-functioning lamp." 
aria-describedby="d1"></p>


<p id="d1">If the lamp doesn't work; check if it's plugged in. If not, 
plug it in. If it's plugged in and still doesn't work; check if the bulb 
is burned out. If it is, replace the bulb. If it still does not work; buy a new lamp.</p>
Advantages:
Disadvantages:

Related techniques and resources

3. Images of text

Sometimes, an image only contains text, and the purpose of the image is to display text using visual effects and /or fonts. While it is strongly recommended that text styled using CSS be used, but if this is not possible, in most of these cases, the content of the alt attribute SHOULD consist of the same text as written in the image itself.

Example 3.1

This example shows an image of the text "Get Happy!" written in a fancy multi colored freehand style. The image makes up the content of a heading. In this case the text alternative for the image should be "Get Happy!".

Example Image:

Get Happy!

Example code:

<h1><img src="gethappy.gif" alt="Get Happy!"></h1>

 

Example 3.2

In this example we have an advertising image consisting of text, the phrase "The BIG sale" is repeated 3 times, each time the text gets smaller and fainter, the last line reads "...ends friday" In this case it is recommended that the image's text alternative only include the text "The BIG sale" once as the repetition is for visual effect and the repetition of the text for users who cannot view the image is unnecessary and may be confusing.

Example Image:

The big sale ends Friday.

Example code:

<p><img src="sale.gif" alt="The BIG sale ...ends friday."></p>
Advantages:
Disadvantages:

Related techniques and resources

4. Images that include text

Sometimes, an image consists of a graphics such as a chart and associated text. In this case it is recommended that the text in the image is included in text alternative.

Example 4.1

Consider an image containing a pie chart and associated text. It is recommended wherever possible to provide any associated text as text, not an image of text. If this is not possible include the text in the text alternative.

Example Image:

Figure 1. Distribution of Articles by Journal Category. 
Pie chart: Language=68%, Education=14% and Science=18%.

Example code:

<p><img src="figure1.gif" alt="Figure 1. Distribution of Articles by Journal Category. 
Pie chart: Language=68%, Education=14% and Science=18%."></p>
Advantages:
Disadvantages:

Example 4.2

Here's another example of the same pie chart image, showing a short text alternative included in the alt attribute and a longer text alternative in text, programmatically associated using the aria-describedby attribute:

Example code:

<p><img src="figure1.gif" alt="Figure 1" aria-describedby="d2"></p>

<p id="d2">Figure 1. Distribution of Articles by Journal Category. 
Pie chart: Language=68%, Education=14% and Science=18%.</p>
Advantages:
Disadvantages:

Related techniques and resources

to do

5. A purely decorative image that doesn't add any information

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.

Purely decorative images MUST be marked up 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 the alt attribute MUST be empty.

Example 5.1

Here's an example of an image being used as a decorative banner for a persons blog, the image offers no information and so should have an empty alt attribute. While it is not unacceptable to include decorative images inline, it is recommended if they are purely decorative to include the image using CSS.

Example image in context:

Clara's Blog

Welcome to my blog...

 

Example code:

<p><img src="border.gif" alt="" width="400" height="30"></p>

<h1>Clara's Blog</h1>
<p>Welcome to my blog...</p>

Related techniques and resources

6. Images that enhance the themes or subject matter of the page content

An image that isn't discussed directly by the surrounding text but still has some relevance can be included in a page using the img element. Such images are more than mere decoration, they may augment the themes or subject matter of the page content and so still form part of the content. In these cases, the alt attribute MUST be present but its value MAY be null. In cases where the image is closely related to the subject matter of the page content, the text alternative MUST include a description of the content of the image or a description of the target of a linked page, if it is the content of a link.

Example 6.1

Here is an example of an image closely related to the subject matter of the page content but not directly discussed. An image of a painting inspired by a poem, on a page reciting that poem. The following snippet shows an example. The image is a painting titled the "Lady of Shallot", it is inspired by the poem and its subject matter is derived from the poem. Therefore it is strongly recommended that a text alternative is provided. The description of the content of the image would be redundant for users who can view the image, so the appropriate place to put it is in the alt attribute.

Example Image

A painting inspired by Alfred Tennyson's poem The Lady of Shalott

Example code:

<hgroup><h1>The Lady of Shalott</h1>
<h2>A poem by Alfred Lord Tennyson</h2></hgroup>
<figure><img src="shalott.jpeg" alt="A painting of a  young women with long hair sitting in a wooden boat, 
she is wearing a flowing white dress. A large piece of intricately patterned fabric is draped over the side. 
In her right hand she holds the chain mooring the boat. Her expression is mournful. She stares at a crucifix 
lying in front of her. Beside it are three candles. Two have blown out."></figure>


<!-- Full Recitation of Alfred, Lord Tennyson's Poem.  -->

Example 6.2

It is not always easy to write a useful text alternative for an image, another option is to provide a link to a description or further information about the image.

In this example of the same image, there is a short text alternative included in the alt attribute, in this case the text alternative is a description of the link target as the image is the sole content of a link. The link points to points to a page containing information about the painting. Note a title has been included on the link for sighted mouse users, the title provides information about the link target.

Example image in context:

The Lady of Shalott
A poem by Alfred Lord Tennyson.

Information about this painting inspired by the poem.

Full recitation of Alfred, Lord Tennyson's poem.

Example code:

<hgroup><h1>The Lady of Shalott</h1>
<h2>A poem by Alfred Lord Tennyson</h2></hgroup>
<figure><a href="http://bit.ly/5HJvVZ" title="Information about this painting inspired by the poem.">
<img src="shalott.jpeg" alt="Information about this painting inspired by the poem."></a></figure>

<!-- Full Recitation of Alfred, Lord Tennyson's Poem.  -->

 

Example 6.3

Example image in context:

The Lady of Shalott
A poem by Alfred Lord Tennyson.

Painting of a woman in a white flowing dress, sitting in a small boat.

Information about this painting.

Example code:

<hgroup><h1>The Lady of Shalott</h1>
<h2>A poem by Alfred Lord Tennyson</h2></hgroup>
<figure><a href="http://bit.ly/5HJvVZ">
<img src="shalott.jpeg" alt="Painting of a woman in a white flowing dress, sitting in a small boat.">
<p>Information about this painting.</p></a></figure>
<!-- Full Recitation of Alfred, Lord Tennyson's Poem.  -->

Example 6.4

Here is another example of the same image used in a different context. In this case it is used to add a bit of medieval themed decoration to an advertisement. As the image bears no direct relation to the content of the page it is considered appropriate to use an empty alt attribute. It can also be considered appropriate to provide a brief description of the image as some users who cannot view images appreciate having information provided about images of paintings and photographs regardless of the context in which the images are used. As decisions about when to provide a text alternative are based on context of use, both options are considered to be conforming HTML5.

Example 1 Image in context:

Medieval Nights

Join us for our medieval theme nights every Friday at Boaters Bar, on the riverside, Kingston upon Thames.

Example code 1:

<h1>Medieval Nights</h1>

<p><img src="shalott.jpeg" alt=""></p>
<p>Join us for our medieval theme nights every Friday at 
Boaters Bar,on the riverside, Kingston upon Thames.</p>

Example 2 Image in context:

Medieval Night

Members and friends of the blind and low vision users group are invited to a medieval theme night on Friday at Boaters Bar, on the riverside, Kingston upon Thames.

Example code 2:

<h1>Medieval Nights</h1>

<figure><img src="shalott.jpeg" alt="Painting of a woman in a white flowing dress, sitting in a small boat."></figure>
<p>Members and friends of the blind and low vision users group are invited to a medieval 
theme night on Friday at Boaters Bar, on the riverside, Kingston upon  Thames.</p>

Related techniques and resources

7. An image not intended for the user

Generally authors should avoid using img elements for purposes other than showing images.

If an img element is being used for purposes other than showing an image, e.g. as part of a service to count page views, then an empty alt attribute MUST be included. In such cases, the width and height attributes should both be set to zero.

Example 7.1

An example of an img element used to collect web page statistics. The alt attribute is empty.

Example code:

<p><img src="http://server3.web-stat.com/count.pl?octafish.com" 
width="0" height="0" alt=""></p>

Related techniques and resources

8. Icons and logos

An icon is usually a simple picture representing a program, action, data file or a concept. Icons are intended to help users of visual browsers to recognize features at a glance.

In some cases, the icon is supplemental to a text label conveying the same meaning. In those cases, an empty alt attribute MUST provided.

In other cases the icon adds emphasis to text content that needs to be conveyed textually, In such cases a text alternative MUST be provided.

Example 8.1

In this example, we have a link pointing to a site's home page, the link contains a house icon image and the text "home". The image has an empty alt text. Where images are used in this way, it is also be appropriate to add the image using CSS.

Example Image in context:

A house icon next to the word 'home'.

 

Example code 1 - inline image:

<a href="home.html">
<img src="icon.gif" width="15" height="15" alt="">Home</a>


Example code 2 - CSS image:

  #home:before
 {
  content: url(home.png);
 }


 <a href="home.html" id="home">Home</a>

Example 8.2

In this example, we have a warning message, with a warning icon. The icon emphasizes the importance of the message and identifies it as a particular type of content. Where images are used in this way, it is not appropriate to add the image using CSS.

Example Image in context:

Warning! Your session is about to expire.

Example code:

<p><strong><img src="warning.gif" width="15" height="15" alt="Warning!">
Your session is about to expire</strong></p>

 

Related techniques and resources

to do

9. Images of Pictures

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 include photographs, paintings, drawings and artwork.

An appropriate text alternative for a picture is a brief description, or name. As in all text alternative authoring decisions, writing suitable text alternatives 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.

Example 9.1

This example shows an image uploaded to a photo-sharing site. The photo is of a cat, sitting in the bath. The image has a text alternative provided using the img elements alt attribute. It also has an caption provided by including the img element in a figure element and using a figcaption element to identify the caption text. The text alternative in Example code 2 includes information "photo" about the type of image, although this is not generally recommended, authors MAY include such information in the alt attribute content.

Example image in context:

Lola the cat sitting under an umbrella in the bath tub.

Lola prefers a bath to a shower.

Example code 1:

<figure>  
<img src="1100670787_6a7c664aef.jpg" alt="Lola the cat sitting under an umbrella in the bath tub."> 
 <figcaption>Lola prefers a bath to a shower.</figcaption>  
</figure>  

Example code 2:

<figure>  
<img src="1100670787_6a7c664aef.jpg" alt="Photo of Lola the cat sitting under an umbrella in the bath tub."> 
 <figcaption>Lola prefers a bath to a shower.</figcaption>  
</figure>  

Example 9.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.

Image example in context:

Using interpretation of "ambiguous designs" to assess an individual's personality is an idea that goes back to Leonardo da Vinci and Botticelli. Interpretation of inkblots was central to a game from the late 19th century. Rorschach's, however, was the first systematic approach of this kind.

An abstract, freeform inkblot.

The first of the ten cards in the Rorschach test.

Code Example:

<figure>   
<img src="Rorschach1.jpg" alt="An abstract, freeform inkblot.">  
<figcaption>The first of the ten cards in the Rorschach test.</figcaption>   
</figure>  

Related techniques and resources

10. A group of images that form a single larger picture with no links

to do

 

11. Images that are a key part of the content

to do

12. CAPTCHA Images

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.

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.

Warning: It is strongly recommended that alternatives to CAPTCHA be used, as all forms of CAPTCHA introduce unacceptable barriers to entry for users with disabilities. Further information is available in the W3C's Inaccessibility of CAPTCHA.

Example 12.1

This example shows a CAPTCHA test which uses a distorted image of text. The text alternative in the alt attribute provides instructions for a user in the case where she cannot access the image content.

 

Example Image:

captcha containing the words 'aides' and 'sprucest'. The letters are distorted and the color of the letters and background is partially inverted,

Example code:

<img src="captcha.png" alt="An audio challenge follows if you cannot view this image."> 
<!-- audio CAPTCHA option that allows the user to listen and type the word -->  
<!-- form that asks a question -->

Further Techniques

13. Webcam images

 


Glossary

alt text

Colloquial term for a text alternative provided using the alt attribute of an img element.

assistive technology

Hardware and/or software that acts as a user agent, or along with a mainstream user agent, to provide functionality to meet the requirements of users with disabilities that go beyond those offered by mainstream user agents. A more detailed explanation of assistive technology is provided in the WCAG 2.0 glossary.

content (Web content)

Information and sensory experience to be communicated to the user by means of a user agent such as a web browser, including code or markup that defines the content's structure, presentation, and interactions.

non-text content

Any content that is not a sequence of characters that can be programmatically determined or where the sequence is not expressing something in human language

Note: This includes ASCII Art (which is a pattern of characters), emoticons, leetspeak (which uses character substitution), and images representing text.

Empty alt attribute or null alt attribute.

An alt attribute with no content:

<img src="null.gif" alt="">

Text alternative

A programmatically determined text that is used in place of non-text content, or text that is used in addition to non-text content and referred to from the programmatically determined text