Information Technology Systems and Services.
ITSS home

Example Short Text Alternative Markup

This page provides example short text alternative markup for:

  1. Purely Decorative Images
  2. Pictures
  3. Images of Text
  4. Complex Data Images
  5. Symbols
  6. Functional Images

1. Purely Decorative Images

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 are meaningless in themselves and do not provide page any content. Examples include: bullets, spacers, and box corners.

Mark up purely decorative "eye candy" 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 understanding of the content, then it is appropriate for the short text alternative to be empty. A null alt attribute hides an image from some users such as those who use screen readers and users who have images turned off in their browsers.

Purely Decorative Image Using a null alt attribute

Context: Any decorative image in a document.

<img src="http://www.mysite/images/decorative.png" 
alt="">

Setting the alt attribute to an empty string. alt="" tells screen readers to skip this image. Leaving off the alt attribute altogether is incorrect.

Purely Decorative Bullet Image Using CSS

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);}

Purely Decorative Background Image Using CSS

Context: Specifying decorative images in the CSS document.

CSS:

#montage {background: url(images/montage.png);}

"Text alternatives are necessary for people who cannot see images that convey important information. Therefore, it is a failure to use this property to add images to convey important information. This failure would apply equally in a case where the background image was declared in the HTML style attribute, as well as in a case where the background image declaration was created dynamically in a client script..."- Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information.

2. 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. Whenever a picture is not decorative, concisely explain or label what the image is in the context of the document's purpose without overly duplicating the text in which the image is embedded.

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.

Photograph Using alt for a Name

Context: A candid photograph of Adam Moran with his daughter in a newsletter article. A name prefaced by the type of image is used as the value of the the alt attribute.


<img src="images/adam.jpg"
alt="Photo: Adam Moren with daughter">

Painting Using alt to provide a Name

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. A name prefaced by the type of image is used as the value of the the alt attribute.


<h1>Painting of The Lady of Shalott</h1>
<img src="http://www.company/images/shalott.jpg"
alt="Painting: The Lady of Shalott">
<!-- Full Recitation of Alfred, Lord Tennyson's Poem -->

Abstract Picture Using alt for a Brief Description

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="http://www.company/images/inkblot.jpg"
alt="An abstract, freeform inkblot">

3. Images of Text

Images of text are pictures of alphabetic or numeric textual characters. Examples include pictures of: words, phrases, and wordmark.

Mark up images of 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.

Wordmark Image of Text Using alt to Provide a Word-for-Word Equivalent

Context: Acme Company's wordmark which visually reads "Acme Company" in a fancy designed image.


<img src="wordmark.png" 
alt="Acme Company">

Image of a Word Using alt to Provide a Word-for-Word Equivalent

Images of Text Markup Sample 2

Context: An image of the word "New!".

<img src="new.png"
alt="New!">

Using Real Text and CSS Instead of an Image

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;
 }

4. Complex Data Images

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 include: charts, graphs, and diagrams.

Provide a short text equivalent that gives the user an overview of the content or helps them to understand the essence of a relationship.

Line Graph Using alt for an Overview of Content

Context: A line graph depicting number of subscribers to a newsletter. It uses the alt attribute as short text alternative a to give the user an overview of the content of the image.


<img
alt="Line graph of the number of subscribers">
src="images/graph.png">

Chart Using alt to Convey a Trend

Context: A chart in a report. It uses the alt attribute as short text alternative to help users understand the a trend or essence of a relationship.


<img
alt="Pie chart: More widgets were sold this quarter compared to last quarter.">
src="images/chart.gif">

5. Symbols

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 include: logos, icons, and emblems.

Markup images of symbols to identify the essence of what they represent or their purpose.

Context: A logo used for branding.

<img src="http://www.company/images/logo.png"
alt="Company Name">

Symbol Using alt to Identify Purpose

Context: A warning icon on a weather page about hazardous conditions.


<img src="http://www.company/images/warningicon.png" 
alt="warning">

6. Functional Images

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 include: navigation links and buttons.

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. For a company logo, which links to a home page use the company's name as the alt text. Including the word "logo" is inappropriate. Including the words such as "go to" or "link" are redundant.


<a href="page1.html">
<img src="leftarrow.png" 
alt="Previous page">
</a>
If a redundant text link of a navigation image is provided, the value of the alt attribute of the image should be null ( alt="" ).

<a href="page1.html">
<img src="leftarrow.png 
alt="">
Previous page
</a>