Tip of the Week: A Couple of Alt Text “Do’s”

Best Practices

Figuring out what alternate text to use for an image isn’t hard. Just think: “if I couldn’t see this image, what would I be missing?”

Then try to put that into 140 characters or less and there’s your alt text!

And if the answer to that question is “I would be missing nothing”, then leave the alternate text box in the Insert Image dialog blank. Don’t even put a space in there, and a screen reader will ignore it completely.

Experiencing Academic Distinction. Purdue Calumet Insight Online Winter 2012

Graphics with Text

If you are using an image with text, of course, you do want to include *all* of the copy, so that someone who can’t see the text doesn’t miss out.  For example, good alternate text for this image would be: “Experiencing Academic Distinction. Purdue Calumet Insight Online. Winter 2012″.

What About Linked Images?

Our Organizational Chart

And if your image is a link, your alternate text should be what your link text would be. For instance, for this button on the Office of Research and Graduate Studies site, good alternate text would be “Our Organizational Chart”. That way the screen reader user knows exactly where the link will take them, even though the graphic and the text are hidden from them.

An Alt Text “Don’t”

Don’t use “image of” or “photo of” or “graphic of” in your alternate text.  The screen reader will announce that it’s reading the alternate text for an image so you don’t have to tell them that. In addition to taking up a number of your 140 characters, these are extra words that your visitor doesn’t need to hear.

What Do You Want To Know?

These tips are designed to help us all better understand the requirements of our Web Accessibility Policy and to offer some shortcuts and hints that will help you as you create and update your Web sites.

Questions and suggestions for future hints are welcome! Just send an email or fill out our online form.