Accessible Guides Project

Alt (alternative) text describes images for people who use screen readers, usually because of blindness or low vision.

If you fail to add alt text, it's blazingly obvious.

When the screen reader comes to an image it says "Graphic." Then it reads the alt text. If there's no alt text, the screen reader will read the file name in the hope of providing some scrap of info. Did you save the image as image.jpg? Horrors!

How to add alt text:

Alt text is added inside the image tag. That sounds like coding, but the Guides WYSIWYG makes it super easy. Instructions are below.

Support efficient reading

• Do describe the image briefly. Just what you see. a maximum of 150 characters is recommended.
• If you want to cite the image source and give the date, do that in a caption. If the info is important, show it to everyone.
  Alt text is the alternative for visible information.
• Don't provide the same information in both caption and image. It takes long enough to listen to a screen reader. No one wants to hear the same thing twice.
• Don't write "image" or "graphic." The screen reader already said that.

Leave the alt text empty if and only if...

• The caption truly describes what you see. 
• The image is purely decorative - a scroll or curlicue

What to do when 150 characters are not enough:

For example: The image shows a graph, a floor plan of the Van Pelt-Dietrich Library, a Civil War battle field showing medical stations.

Email the Web Unit. We'll help you set up a long description.

1. Log into the guide. At the bottom right, click “Login to LibApps.”
2. In the guide editor, each box has its own edit-content icon under the content
   (bottom right; don't be fooled by the title edit icon in the title bar!).
   Click it.
3. In the content edit box (it calls itself “rich text editor”), right click the image.
   From the dropdown, select “Image Properties.”
   
4. A dialogue box will open with a field for the alt text.
   
   If there’s already alt text, close the box and go on to the next image.
   If there’s no alt text, add some!

1. Are there images on the page? If yes, go on to step 2.
2. Do the images have captions that describe what you see? If no, go on to step 3.
3. Check for alt text!

4. Open a tab with the underlying HTML:

   Open a search box.

   Paste in

   alt=""

   • MacOS – Command + U
   • Windows – Control + U
   • MacOS – Command + Option + F
   • Windows – Control + Shift + F.

Hints

• You are searching for alt=""; that's an empty alt attributes. If the search has no results, you're the cat's pajamas! Go on to the next tab or page.
• In the underlying HTML, the actual page content starts near the bottom. About 7/8 of the code is taken up by the header and scripts.