Whenever you use an image, be sure to include an ALT tag within the IMG tag to provide a clear text alternative. ALT text should be used for all images, graphical bullets, and graphical horizontal rules. If there is no ALT tag, then screen readers will hear [IMAGE] but no additional information. ALT text should let the user know what an image is and the purpose of that image.
SECTION 508 - A text equivalent for every non-text element shall be provided (e.g. via "alt", "longdesc", or in element content.
The text in the ALT text should be meaningful in the context of the Web page. Specifically:
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 more browsers. For example:
For images which are especially complex, such as a chart, equation or diagram, a link to an extended text caption should also be included.
Images which are used as buttons or labels should use fonts which are readable to a large segment of the audience (probably 14 pixels/points or larger).
STYLE TAG - In some cases you can replace custom tool lines and decorative graphics with styled HR or DIV tags in which you change background colors and specify background images. See CSS style sheet tutorials for more details.
The ALT tag adds a text description to a Web image. If viewers cannot see an image, then the description is displayed. This benefits users of screen readers, users of Palm Pilots viewing a Web site and users on a low-bandwidth connection where images are slow to download.
The ALT tag is included within the image tag. You can also include the TITLE and LONGSDESC attributes as well since this is also recognized by some devices.
NOTE: The ALT tag is limited to 50 characters. If more information is needed, then use one of the long description strategies.
<img src="imageXXX.gif" alt="Description" title="Description">
<img src="K12Title.gif" alt="Fake Child Education
Site Label"> </p>
<p> <img src="K12MathProblems.gif" alt="Math Problems" <br>
...
Screen reader says "Image" five times.
Some browsers, particular Internet Explorer for Windows, may display ALT text as a visible tooltip. Therefore, some Web sites use this feature to include supplemental information within 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 which can be accessed by a visual browser.
Use the TITLE Tag instead for tooltips since they are supported in all browsers. See example below.
HTML Code
<img src="bluemark.gif" alt="Penn State University" title="Penn State Logo from 1855" >
Example (Hold cursor over image to test tooltip)
For images used as navigational elements, the ALT Text can typically just state where the link is going. Stating a full description of the image is redundant in most cases.
This code is meant to implement the Penn State logo as a link to the homepage.
<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.
This code is a more accessible implementation of the Penn State logo as a link to the homepage.
<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 where the link is going.
If more information about the image or its design is desired, then a D link or LONGDESC tag can be provided.
Some images such as invisible pixels or custom tool lines are used solely for layout purposes and provide no content. The alt tag for these should be set to a blank space or nothing <alt= "" > . This causes the screen reader to ignore the image altogether.
For example we will use a sample image of a rainbow toolbar, followed by some accessible and inaccessible code examples
<img src="examples/spectrumtooltip.gif" alt="" >
Screen Reader Says nothing and goes on to the next section
<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 is irrelevant to a screen reader user and increases reading time.
<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 transparent image can be used to provide special information just to users on screen readers such as a way to skip navigation.
If an image is embedded within a Web page in which already includes an extended description of the image, then the ALT tag can just provide a summary of the image, not a full description.
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.
<...alt="saturated fat molecule" >
<...alt="image of straight saturated fat with 18 carbons" >
NOTE: This kind of description would be useful if the context is needed to understand the content, although a better strategy may be to include the text 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 for 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 just a caption which links to the long description. See below for examples
If the information is critical, then an overt caption link may be the best solution. This provides the clearest indication to the most users that a longer description is available.
View Extended Text Description
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 is best used to provide supplemental information.
This is a hidden attribute which is recognized by some, but not all, screen readers. This may be best for providing extra detail which enhances content, but is not critical to it.
<img src="examples/runningfootbalplayer.jpg" alt="photo
of football player" width="102" height="154" longdesc="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.
ASCII art, or the use of punctuation and letter symbols to draw out an image will be inaccessible for screen readers since they will read each symbol aloud. Images supplemented with ALT text would be more accessible.
If an ASCII art image is truly needed in a Web page, then creating it in Photoshop or other photo editor may be a better alternative.
NOTE: If you include complex ASCII art in an e-mail signature, then it should be placed at the bottom after your contact information.
This is a GIF file, but if it were true ASCII art, a screen reader would say:
left parenthesis quote acute accent dash quote backslash quote right parenthesis...
Site Menu:
Home Page/Main Menu
| Section 508 Guidelines
| Quick Checklist
| Details by Tag
| Links
| I.T.S. Seminar Page
| Sitemap
©1999-2006 Pennsylvania State University.
This Web page is hosted by (by Teaching and Learning with Technology, a unit of Information Technology Services. Please contact the Webmaster if you have any questions.
