Images

Important point: A screen reader can’t read an image. Period. However, you can add hidden text that a screen reader will speak when it encounters that image.

Also, avoid flashing, blinking and pulsing.

Tips for alternative text

You have probably seen alternative text, sometimes called “alt text” or an “alt tag.” When you’re waiting for images to appear on a slow-loading page, the alt text appears in place of the images before they show up, giving you a sense of what will be on the page once everything loads. Some browsers display alt text in a pop-up tool tip when you move your pointer over an image.

If there is no alt text, a screen reader may speak an image file’s name, usually a cryptic offering. So always add alternative text for images. If an image conveys more information than you can describe in a few words or, at most, a couple of sentences, then you may also provide an in-depth description on a separate page and link to it with a “D” link. That is, type a “D” next to the image and link that letter to the description page.

Don’t waste the listener’s time with verbose alt text. Keep it short and think of how it will help someone listening to a screen reader.

For example, if you use an image to make a link to Wright State’s home page, “Wright State” will suffice for the alt text. Don’t write out “Link to Wright State’s home page.” The most popular screen reader announces it’s about to read a link by speaking the word “link.” So if you start your alt tag with “link,” the first thing the listener will hear is “link, link,” which is a no no.

For another example, suppose you used images for bullets on a list. Use something short and meaningful like “item” or “bullet” for the alt text. Don’t make the listener hear “small red apple with green leaf and worm” at the beginning of each line in the list.

If you have an image that serves a purely visual function, an image that would have no meaning to someone listening to the page, you can use an empty alt tag—the image tag will have a alt attribute with nothing between the quote marks (alt=""). Then the image will be silent.

Alternative text for WebCT tool icons

In WebCT, when you add a tool to an organizer page, the title you give the tool when you add it will automatically become the alternative text for that tool’s icon.

Flashing images: distracting and dangerous

Images, such as animated gif's, that flash, pulse or blink may make it hard for your readers to focus on the text. In addition to being distracting, though, blinking colors may trigger epileptic seizures.

Wright State Standard

How to...