Tip of the Week: Simple Images

Dialog Box for image of Professor Lisa Hopp with Alternate Text highlightedWe keep returning to this subject in our tips because alternate text is a key component for Web accessibility. It’s also one of the most problematic issues we run into.

We have talked about why it’s so important: the alternate text that you provide may be the only information that someone receives from your image. An online visitor may not be able to see your image, may not be able to read the copy on it. They may have turned off images to save bandwidth or they use a text to speech device like the JAWS screen reader to read the content to them. Whatever the reason, images mean nothing to them. Your alternate text is all they have.

We suggested in a previous tip, that you think to yourself “If I couldn’t see this image, what would I be missing?” and then use that to write your alternate text. We’re going to expand on this by focusing on different types of images and the context in which they appear. Let’s start this week with a simple image.

Drawing or Photo

If your image is a photograph or a drawing, the alternate text should describe the image in a short phrase.

In the case of this Purdue Calumet News story about Professor Lisa Hopp’s induction into the American Academy of Nursing, all that’s required to identify her photo, is her name.

Screen shot of story and image of Professor Lisa Hopp

We recorded the JAWS screen reader voicing a portion of the story about Professor Hopp including the alternative text for her photo:

“Heading level 2 Leadership Role. Graphic Professor Lisa Hopp”

(Listen to the JAWS recording: )

As you heard, you don’t need to include the words “image of” or “graphic of” since the screen reader will tell the listener that this is a graphic.

And, since there is a caption that repeats the alternate text, the argument can be made that you don’t need alternate text either, just use one or the other, since it becomes repetitious and verbal clutter for the listener.

Put Yourself in Your Visitor’s Place

We know that it can be more comforting to have clearly defined rules to follow, but Web accessibility is not always clear cut. We have a baseline guideline which is, as stated in our Web Accessibility Policy:

A text equivalent for every non-text element shall be provided…

But what that text equivalent should say is completely up to you as the Web content author. You decide what’s important about that image and you decide what to tell your visitor about it. And you need to do that in 140 characters or less.

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.