Page Content
Synopsis
Note: The term "ALT tag" is a common shorthand term used to refer to the ALT attribute within in the IMG tag.
- Any time you use an image, be sure to include an ALT tag or ALT text within the IMG tag. Doing so will provide a clear text alternative of the image for screen reader users.
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." - The description in the ALT tag should be meaningful in the context of the Web page, specifically:
- Images used as links should have alternative (or "alt") text describing the destination of the link, not the image itself.
- Alt text with acronyms should be written with spaces in between letters.
For instance, <alt="I T S at P S U" > (read by a screen reader as "ITS at PSU") is preferable to <alt="ITS at PSU" > (read as "It’s at Sue"). - Images used as spacers or in toolbars should have an empty ALT tag (i.e. <alt="" >). Screen readers will simply skip over images with empty ALT tags.
- Images that already include a text description within the main text of the page can have a summary ALT tag.
- If you want to provide a tooltip for visual browsers, use the TITLE tag in addition to the ALT tag, since it is supported in most browsers. For example:
- While there is no official length restriction on the length of alt text, many experts recommend 125 characters or fewer because of restrictions within the JAWS screen reader. Many versions of JAWS break up longer text tracts into blocks of 125 characters, which can be confusing to users.
- For an especially complex image, such as a chart, equation or diagram, a link to an extended text description should also be included.
- Images that are used as buttons or labels should use fonts that are readable to a large segment of the audience (probably 12 pixels/point or larger).
- In some cases you can replace decorative or layout-related images with styled HTML elements, such as HRs or DIVs, for which you change background colors and specify background images. See CSS tutorials for more details.
Implementing Alt Text
The ALT tag adds a text description to an image on a Web page, and should be used for all images, graphical bullets, and graphical horizontal rules. The alt text within the ALT tag should let the user know what an image’s content and purpose are.
Alt text is accessed by screen reader users to provide them with a text equivalent of images. In visual browsers, the alt text is displayed when an image is broken, or when all images have been disabled. Using ALT tags is also beneficial to users on Palm Pilots or low-bandwidth connections, where images are slow to download.
The ALT tag is included within the IMG tag. You can also include the TITLE and LONGDESC attributes within the IMG tag, as well, since these tags are also recognized by some devices.
NOTE: Because of JAWS restrictions, it’s recommended that ALT tags be limited to about 150 characters. If more information is needed, then use one of the long description strategies.
Sample ALT Text Code
<img src="CampLogo.gif" alt="Camp 2011 logo">
Demo Web Site With Image Links
Screen Reader Output With ALT Tag
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
Screen reader says "Image" five times.
Use TITLE for Tooltips
Some browsers, particularly Internet Explorer for Windows, may display alt text as a visible tooltip. Therefore, some Web sites use this feature to include supplemental information for those using visual browsers.
However, this technique should be avoided since other browsers do not show ALT text as tooltips. In addition, this interferes with the basic function of the ALT tag, which is to provide a short text equivalent of an image. All navigational elements should be indicated by textual elements that can
be accessed by a visual browser.
Use the TITLE tag instead to create tooltips, since it is supported in all browsers. See the example below.
TITLE Tooltip Example
HTML Code
<img src="bluemark.gif" alt="Penn State University" title="Founded in 1855" >
Example: (Hold cursor over image to test tooltip)
Alt Text for Navigational Elements
For images used as navigational elements, the alt text can typically just state the link’s target page. Providing a full description of the image is redundant in most cases.
Inaccessible ALT Tag for Graphic Link
This code is meant to implement the Penn State logo as a link to the homepage, but isn’t fully accessible.
View the Code
<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.
Accessible ALT Tag for Graphic Link
This code is a more accessible implementation of the Penn State logo as a link to the homepage.
View the Code
<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 indicates the link’s destination
If more information about the image or its design is desired, then a D-link or LONGDESC tag can be provided.
Alt Text for Filler or Decorative Images
Some images, such as invisible pixels or images used in toolbars, are used solely for layout purposes and provide no content. The ALT tag for these images should be blank ( <alt= "" >) so that screen readers will ignore them altogether. It is possible, however, that some older screen readers will say "Empty ALT tag" and read the file name.
The example below will use a sample image of a rainbow toolbar, followed by some accessible and inaccessible code examples.
Accessible Toolbar Image Code
<img src="examples/spectrumtooltip.gif" alt=" " >
Screen reader says nothing and goes on to the next section
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.
Inaccessible Toolbar Image Code—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.
NOTE: Alt text combined with a transparent image can be used to provide special information just to screen reader users, such as a way to skip navigation.
Summary 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.
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.
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.
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.
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.
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.