Technical Constraints

Because alt is an HTML attribute there are some restrictions on what it can contain and how it can be used:

Principles For Providing Text Alternatives

Even though there are restrictions on its value, the alt attribute is still needed in order to make documents properly accessible. This section describes general principles for authors and developers to use when considering the use of the alt attribute, the longdesc attribute, and also the newer ARIA described-by and described-at attributes. [[WAI-ARIA]]

We mention described-at here, but it is 1) not approved and 2) we don't point that out until much later in the document. We should probably remove this reference or at least point to the information about its status.

The Web Accessibility Initiative provides An fDecision Tree to help authors decide what to put into an alt attribute value.

Functional images: State the Purpose

Where an image has a function (e.g., a button to press) or serves a clear purpose such as identifying the maker of a page by a company logo, be direct and simply give the purpose (e.g., Make Payment or W3C Logo).

Examples of scenarios where users benefit from text alternatives for images

• They have a slow connection and are browsing with images disabled.
• They have a vision impairment and use text to speech software.
• They have a cognitive impairment and use text to speech software.
• They are using a text-only browser.
• They are listening to the page being read out by a voice Web browser.
• They have images disabled to save on download costs.
• They have problems loading images or the source of an image is wrong.
• They are in an environment where focusing upon a screen is challenging and/or dangerous, and having the content read to them is a safer alternative (e.g., driving a vehicle).

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, include text in the alt attribute(s) that together convey the purpose of the link or button.

  <ul>
  <li><button><img src="b.png" alt="Bold"></button></li>
  <li><button><img src="i.png" alt="Italics"></button></li>
  <li><button><img src="strike.png" alt="Strike through"></button></li>
  <li><button><img src="blist.png" alt="Bulleted list"></button></li>
  <li><button><img src="nlist.png" alt="Numbered list"></button></li>
  </ul>
  

The image link is broken, and I don't see such an image name in the current HTML source. Where is this image?

<a href="http://w3.org">
  <img src="images/w3c_home.png" width="72" height="48" alt="W3C web site">
</a>    

<a href="http://w3.org">
  <img src="images/w3c_home.png" width="72" height="48" alt="W3C home">
</a>  

<a href="preview.html">
  <img src="images/preview.png" width="32" height="30" alt="Print preview.">
  </a>  

<a href="pipco-home.html">
  <img src="pip.gif" alt="PIP CO home"><img src="co.gif" alt="">
  </a>    

Graphical Representations: Charts, diagrams, graphs, maps, illustrations

Readers can benefit when content is presented in graphical form, for example as a flowchart, a diagram, a graph, or a map showing directions. People unable to see the image for any reason will need the information provided in another form.

Diagrams often convey a lot of information. This means that a textual alternative may be quite lengthy. The content of the alt attribute is in general limited to the amount of text that will fit in the space normally occupied by the image. In addition, it may be tedious for someone listening to an audio rendition of a Web page to have to skip over a lengthy description each time they reach the diagram.

An appropriate technique, then, is to have a short description in the alt attribute, such as bar chart of product sales by region, and to link to a longer image description.

An image description in this context is text, whether embedded in the main document or elsewhere, that would enable a reader to have a good idea of what the image looks like. This is different from an alternate representation in that, for example, it might mention that a pie chart is circular or that the items in a bar chart are horizontal rows, and should mention any significant colors. Such a description can enable people to participate in conversations about the image, or to answer examination questions that might rely on the way the information is represented and not just the underlying data.

Using the alt attribute with an external image description

An external image description is just another document, normally in HTML, that describes an image. You should consider using an external image description if one of more of the following applies:

• The description would not interest people able to see the image itself.
• The description might be lengthy enough to annoy people who can see the image, or confuse people reading the page.
• The description is provided by a third party, for example for diagrams in examination questions.

Using the alt attribute with an associated text alternative

A text alternative presents the same essential information as a diagram or illustration but in a text format accessible in cases where the image is not seen or used. It is normally contained in the same document as the image. You should supply a text alternative in addition to the alt attribute in these circumstances:

• The information takes more than a few words to describe but is still of use to someone who can see the image.
• A user might reasonably want to select the text alternative, or to find it with a browser search function, regardless of whether the image is displayed.
• The text alternative requires structured markup such as MathML, tables, emphasis, multiple paragraphs, links, or Japanese ruby annotations. Attributes such as alt cannot contain elements.
• The text alternative is not in the same language as the main document. Attributes such as alt cannot be marked with xml:lang for language.

<p><img src="overlapping-circles.html"
	  alt="overlapping circles" longdesc="overlapping circles-d.html><br>
	What color should be used to complete the white part of
	the diagram, assuming a reflective color model?</p>
	  

Using the alt attribute with an associated text alternative

You should consider supplying a text alternative in addition to the alt attribute in these circumstances:

• The text alternative is more than a few words long, or is complex or detailed.
• A user might reasonably want to select the text alternative, or to find it with a browser search function.
• The text alternative requires structured markup such as MathML, emphasis, multiple paragraphs, links, or Japanese ruby annotations. Attributes such as alt cannot contain elements.
• The text alternative might need to be translated into other languages, or is not in the same language as the main document. Attributes such as alt cannot be marked with xml:lang for language.

Although the alt attribute is essential to enable someone to understand which image was not rendered, it should not be relied on to convey detailed content.

<a href="#desc"><img src="flowchart.gif" alt="Flowchart: Dealing with a broken lamp."></a>
...
...
<div id="desc">
<h2>Dealing with a broken lamp</h2>    
<ol>    
<li>Check if it's plugged in, if not, plug it in.</li>
<li>If it still doesn't work; check if the bulb is burned out. If it is, replace the bulb.</li>
<li>If it still doesn't work; buy a new lamp.</li>    
</ol>
</div>

<figure role="group" aria-labelledby="caption">
<img src="rainchart.gif" alt="Bar chart: Average rainfall in millimeters by Country and Season.">
<table>
<caption id="caption">Rainfall in millimeters by Country and Season.</caption>
<tr><td><th scope="col">UK <th scope="col">Japan<th scope="col">Australia</tr>
<tr><th scope="row">Spring <td>5.5 (highest)<td>2.4 <td>2 (lowest)</tr>
<tr><th scope="row">Summer <td>4.5 (highest)<td>3.4<td>2 (lowest)</tr>
<tr><th scope="row">Autumn <td>3.5 (highest) <td>1.8 <td>1.5 (lowest)</tr>
<tr><th scope="row">Winter <td>1.5 (highest) <td>1.2 <td>1 lowest</tr>
</table>
</figure>    

The table image and data table are grouped using a figure element with a [[WAI-ARIA]] role="group". The figure is labelled by the table caption content using aria-labelledby.

Once figure and figcaption are accessibility supported in browsers, the addition of ARIA attributes will not be required.

For any of the examples in this section the details and summary elements could be used so that the text descriptions for the images are only displayed on demand:

  <figure>
  <img src="flowchart.gif" alt="Flowchart: Dealing with a broken lamp.">
  <details>
  <summary>Dealing with a broken lamp</summary>
  <ol>
  <li>Check if it's plugged in, if not, plug it in.</li>
  <li>If it still doesn't work; check if the bulb is burned out. If it is, replace the bulb.</li>
  <li>If it still doesn't work; buy a new lamp.</li>
  </ol>
  </details>
  </figure>
  

Images of text

Sometimes an image contains only text, and the purpose of the image is to display text using visual effects and/or fonts. It is strongly recommended that text styled using CSS be used, but if this is not possible, provide the same text in the alt attribute as is in the image.

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

When an image is used to represent a character that cannot otherwise be represented in Unicode (e.g., gaiji, itaiji, or new characters such as novel currency symbols) the text alternative should be a more conventional way of writing the same thing (e.g., using the phonetic hiragana or katakana to give the character's pronunciation).

An image should not be used if Unicode characters would serve an identical purpose. Only when the text cannot be directly represented using Unicode (e.g., because of decorations or because the character is not in the Unicode character set) would an image be appropriate. If necessary Web fonts can be used to supply specific representations for Unicode characters. This is preferable to the use of images because a text reader or search engine can process the Unicode character directly.

<p><img src="initials/fancyO.png" alt="O">nce upon a time and a long long time ago...

A graphical representation of some of the surrounding text

In many cases an image is actually just supplementary &emdash; its presence merely reinforces the surrounding text. In these cases, the alt attribute must be present but its value MUST be the empty string.

In general, an image falls into this category if removing the image doesn't make the page any less useful, but including the image makes it a lot easier for users of visual browsers to understand the concept.

<header>
<h1>The Lady of Shalott</h1>
<p>A poem by Alfred Lord Tennyson</p>
</header>
<figure>
<img src="shalott.jpeg" alt="Painting of a woman in a white flowing dress, sitting in a small boat.">
<p><a href="http://bit.ly/5HJvVZ">About this painting.</a></p>
</figure>

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

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.

Mark purely decorative images so they can be ignored by assistive technology by using an empty alt attribute (alt="").

<header>
<div><img src="border.gif" alt="" width="400" height="30"></div>
<h1>Clara's Blog</h1>
</header>

<p>Welcome to my blog...</p>  

Inline images

When images are used inline as part of the flow of text in a sentence, provide a word or phrase as a text alternative which makes sense in the context of the containing sentence:

I <img src="heart.png" alt="love"> you.

My <img src="heart.png" alt="heart"> breaks.

Unicode characters could be used as an alternative to inline images where appropriate. Modern browsers have support for characters like "♥" and "☺", and support the use of custom fonts to render those as colored image fonts.

Image maps

<p>View houses for sale in North Katoomba or South Katoomba:</p>
<p><img src="imagemap.png" width="209" alt="Map of Katoomba" height="249" usemap="#Map">

<map name="Map">
<area shape="poly" coords="78,124,124,10,189,29,173,93,168,132,136,151,110,130" href="north.html"
alt="Houses in North Katoomba">
<area shape="poly" coords="66,63,80,135,106,138,137,154,167,137,175,133,144,240,49,223,17,137,17,61"
alt="Houses in South Katoomba" href="south.html">
</map>