Page Content

Terminology

There are several terms which are commonly used to describe ALT text. They may be used in different contexts, even within this Web site.

  • ALT text – the concept of adding a screen reader friendly text alternative description of an image. This can be implemented differently across document types.
  • ALT attribute (HTML) – In HTML, the ALT text is inserted into the ALT attribute within the IMG tag.
  • ALT "Tag" – Shorthand reference to the ALT attribute.

Demo of ALT Text

Purpose

The ALT text adds a text description to an image on a Web page, and should be used for all images, graphical bullets, and graphical horizontal rules.

ALT text is accessed by screen reader users to provide them with a text equivalent of images. In visual browsers such as Firefox, the ALT text is displayed when an image is broken, or when all images have been disabled.

WCAG Guideline

WCAG 2.0 Guideline 1.1.1.—"All non-text content that is presented to the user has a text alternative that serves the equivalent purpose."

Image Button Examples

Consider the images for sections a hypothetical education site below which all contain decorative text.
Note: Any text used in an image should follow legibility and contrast guidelines.

Fake Child Education Site Label

Math Problems Label
Science Labs Label
Word Games Label
History Facts Label

Screen Reader Output With ALT Tag

If images fail to load, ALT text will show what the images would have said in a browser such as Firefox.

Fake Child Education Site

Math Problems
Word Games
Science Labs
History Facts

View the Code

<img src="K12Title.gif" alt="Fake Child Education
Site Label"> </p>
<p> <img src="K12MathProblems.gif" alt="Math Problems" <br>
...

Screen Reader Output Without ALT Tag

Without the ALT text, no one can know what the content of the image would have been.

Note: Screen reader says "Image" five times.




 

Implementing the ALT Attribute

Below are some examples how how ALT text can be implemented depending on the context.

George Washington Painting

Geroge Washington and Lafayette on horseback talking to soldiers in snow at Valley Forge

View the Code

Implement the ALT text as an attribute in the IMG tag. See example below.

<img src="CampLogo.gif" alt="Camp 2011 logo">

Other attributes such as HEIGHT and WIDTH can still be included.

Note: A recommended ALT text length is about 125 characters. This accomodates the JAWS screen reader ALT text field. However this is not within the WCAG guidelines.

Image Captions vs. ALT Text

Any information about the image, such as copyright information, image source or extra information should be placed in the caption text below the image, not in the ALT text. See the example below.

Geroge Washington and Lafayette on horseback talking to soldiers in snow at Valley Forge
Caption: Painting "Washington and Lafayette at Valley Forge" by John Ward Dunsmore from 1907. Image courtesy of the Library of Congress.

Logos

For logos, especially logos which are repeated, it is sufficient to identify which logo it is, not necessarily fully describe it

Camp 2011 logo

<img src="CampLogo.gif" alt="Camp 2011 logo"

 

Improper Uses of ALT Text

The ALT text should be used ONLY to describe an image.

It should NOT be used to:

  • introduce tooltip text,
  • provide copyright or source information about an image or
  • convey supplementaty information about the graphic.
  • introduce search terms (this can be done via good use of headings).

Empty Alt Text for Decorative Images

Some images are used solely for layout purposes or to enhance the content for sighted users and provide no content.

The ALT tag for these images can be blank ( <alt= "" > or <alt=" ">) so that screen readers will ignore them altogether.

The example below will use a sample image of a rainbow toolbar, followed by some accessible and inaccessible code examples.

Rainbow Tool Bar

Suppose a Web side was designed with a rainbow toolbar used to separate pieces of text.

demo rainbow toolbar

Accessible Toolbar Image Code

<img src="examples/spectrumtooltip.gif" alt="" >
OR
<img src="examples/spectrumtooltip.gif" alt=" " >

Screen reader says nothing and goes on to the next section

Note: The ALT attribute with the space character is considered less correct, but may be the only option allowed in some content managment systems.

Less Usable Toolbar Image Code

<img src="examples/spectrumtooltip.gif" alt="A Rainbow line used as toolbar" >

Screen reader says "Rainbow line as a toolbar." If you have eighteen rainbow toolbars, the screen reader would repeat this eighteen times. This text is irrelevant to a screen reader user and increases reading time.

No ALT Tag

<img src="examples/spectrumtooltip.gif" >

With no ALT tag, screen reader says "Image," which leaves users wondering if they are missing anything important.

 

Concise Alt Text

If a text description is already provided for an image within the main text of the page, then the ALT tag can just provide a summary of the image, not a full description.

See Complex Images for examples of how this can be used in different situations.

Example Text with Image

Below is an image of a saturated fat molecule with 18 carbon molecules. Notice that the single bonds between elements make the carbon chain relatively straight.

Saturated Fat Molecule

Accessible Summary ALT Tag

<...alt="saturated fat molecule" >

Less Accessible, Verbose ALT Tag

<...alt="image of straight saturated fat with 18 carbons" >

NOTE: This kind of description would be useful if it was needed to understand the content, although a better strategy may be to include the description in the Web page itself, or to link to a longer description as discussed in the next section.

Links to Extended Descriptions

In some cases it may be necessary to add a link to an extended description of an image, especially in cases where images are used to convey significant content. There are several ways this can be accomplished—including a LONGDESC tag, a D-link or a more overt link to the longer description. See below for examples

Link to Caption Text

If the information is critical, then an overt caption link may be the best solution. This method provides the clearest indication that a longer description is available.

saturated fat moluecule
View Extended Text Description

D-links

Some experts advocate the use of a D-link to signal the presence of an extended text description. However, some users may not be aware of the convention. This method is best used to provide information that is purely supplemental.

Saturated Fat MolueculeD

LONGDESC Attribute

This is an attribute that is hidden in visual browsers, but recognized by some screen readers. LONGDESC is best for providing extra detail that enhances content, but is not critical. It should be noted that LONGDESC has incomplete support among both visual browsers and screen readers, and is deprecated in HTML5.

football player photo

View the LONGDESC Code

<img src="examples/runningfootbalplayer.jpg" alt="photo of football player" width="102" height="154" longdesc="dfootball.html" >

LONGDESC Text (in dfootball.html)

This is a publicity photo of a Penn State football player running with the football in a crowded football stadium on a sunny day.

For images used as navigational elements to trigger functions such as printing, uploading or saving, the ALT text should describe the destination or function, not the image.

Clickable vs. Non-Clickable Penn State Shield

When a Penn State shield is used on a Web page, the ALT text used depends on whether it is clickable (i.e. links to the Penn State home page) or not.

Penn State shield non clickable

If a Penn State shield image is being used to provide a clickable link to the home page, the ALT text should indicate the destination (i.e. ALT="Penn State Home Page") Note that the IMG tag is embedded within an A tag for the link.

ALT Text for Clickable Shield

<a href="http://www.psu.edu"> <img src="psulogo.gif" alt="Penn State Home Page"> </a>

The screen reader would say "Penn State homepage," which

Note: If the shield is NOT clickable, then the ALT text can be "Penn State" or "Penn State shield".

Non-Clickable Shield

<a href="http://www.psu.edu" > <img src="psulogo.gif" alt="Penn State Logo"> </a>

A screen reader would say "Penn State logo," but would not indicate that this link goes to the Penn State homepage.

 

TITLE Attribute for Tool Tips

The TITLE attribute of an IMG text can be used to generate a tooltip for sighted users. But please be aware that.

  • The TITLE attribute is NOT read aloud by default in most screen readers.
  • The ALT Text is not usually displayed as a tool tip in most browsers.

If a tool tip is needed for sighted users, then both a TITLE and ALT attribute with the same information can be used to ensure that the same information is delivered to both audiences.

See this example below

Favorites Heart Button with Tool Tip

Consider a version of the heart image below which may be used in an interface to select favorite items (e.g. favorite songs or e-books).

red heart icon

Both the ALT text and the TITLE attribute are "Favorites"

View the Code

<img src="heart.png" alt="Favorites" title="Favorites">

 

If a link includes both an image and text below, the two should be combined together if possible, and an empty ALT text can be used.

Again using the Favorites icon, the example and code would be as follows.

red heart icon
Favorites

View the Code

<a href="#">
<img src="heart.png" alt=" ">
Favorites
</a>

Top of Page