- Demo of ALT Text
- Implementing the ALT Attribute
- Image Caption vs. ALT Text
- Improper Uses
- Empty ALT Text
Images as Links
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
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 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.
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.
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
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.
For logos, especially logos which are repeated, it is sufficient to identify which logo it is, not necessarily fully describe it
<img src="CampLogo.gif" alt="Camp 2011 logo"
Improper Uses of ALT Text
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.
Accessible Toolbar Image Code
<img src="examples/spectrumtooltip.gif" alt="" >
<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.
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.
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.
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.
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.
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.
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.
Links and Buttons
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.
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".
<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).
Both the ALT text and the TITLE attribute are "Favorites"
View the Code
<img src="heart.png" alt="Favorites" title="Favorites">
Combining Link with Text Together
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.
View the Code
<img src="heart.png" alt=" ">