Quicktips for Alternative Text
General Guidelines
Limit the length of your alt-text. For any alt-text over a hundred characters, use a D-link or longdesc attribute in the ‘a' tag.
Never use “Click Here” or other vague terms. Alt-text should describe the link destination or file.
Never use the same alt-text on links that have different targets. Do not repeat image alt-text that is exactly the same.
Alt-text for Image Links
For a corporate logo that serves as part of the branding on a page, use the official name instead of a description, for instance, alt="Eastern Kentucky University." Do not add “Logo of...”
For images, use alt="rooster" NOT alt="Image of rooster." Screen readers declare images before reading alt-text so the screen reader would say “Image: rooster” in the correct example.
If the image is used for navigation, the alt-text lets the user know the name or content of the linked page.
Describe the function of the image instead of describing the image itself (for instance, “Next Page” instead of “Arrow pointing to the right”).
Decorative, Spacer, and Bullet Images
For any decorative image without a function or content, use alt="" NOT alt=" " (with a space). Providing a null alt tells screen readers to ignore the image. A missing alt attribute might cause the screen reader to read the file name.
Do not use alt=“spacer.” The screen reader will read “image: spacer, image: spacer…” Use a null alt-tag so screen readers will ignore the image.
For an image used as a bullet, use alt="bullet" or “*”. Alternatively, use a CSS document to create bullet images and remove the need for an alternative description.
Charts or Illustrations
Alt-text is meant to be short and to the point. When a longer description is necessary, provide a detailed summary in another document and provide a link to it. The link is typically just the letter “D” (known as a D-link). Instead of a summary, chart data can be contained in an HTML table coded correctly for accessibility. For large tables, a summary is more easily understood.
Multimedia
Captioning or text documents should be provided as an alternate format for video and audio. The text can be a separate document, or be used to caption the original multimedia file. Descriptions of sounds are also included in the alternative document, for instance, clapping, animal sounds, laughter, etc.
What needs alt-text?
Provide a text equivalent for every non-text element, including:
photos/clip art
scripts
frames
ascii art
sounds
images used as list bullets (or use CSS)
spacer images for layout (alt=“”)
image buttons
Mp3 or other audio files for podcasts or music animations (GIFs or Flash)
image map regions
audio tracks of video
applets and programmatic objects
graphical representations of text (including symbols)
Provide alt-text for images in MS Word
Click on image to select it
Right-click, open “Format Picture”
Click on the “Web” tab
Fill out the Alternative Text box
Provide alt-text for images in Dreamweaver
Open properties control (Window—Properties)
Select image by clicking on it
Fill out input box labeled “Alt” in the Properties control
For more information, contact:
Parker Owens, Web Accessibility Coordinator, EKU, 254 Case Annex, Richmond, KY
(859) 622-2743, parker.owens@eku.edu
