Implementing Accessible Workplace Tech: Making Sure Alternative Text isn’t an Afterthought

What is a screen reader?

A screen reader is a software program used to read the content on a webpage aloud. This is all very well when it comes to text, but what do screen readers do when they encounter an image? They read the text written in the ALT attribute–and that has to be written by the web site developer or content author.

Screen readers are mostly used by people with vision impairments who can’t see the page. Sometimes people with reading disabilities also use screen readers because hearing the text read aloud can make it easier for them to understand.

What makes a good ALT attribute?

Images are an important part of web design, and you need to make sure that they are accessible to people who can’t see them–and that means using well-written ALT attributes.

There is one basic rule when it comes to ALT attributes: describe the function of the image. This does not always mean that you describe the actual image–and it definitely shouldn’t mean one-thousand-word ALT attributes. Instead, you need to thoughtfully consider how and why you are using each image.

For example, at first glance it looks like we could call the image to the right “Globe showing Australia.”

But what if it were on an international travel web site and were preceded by the heading “Travel deals?” Then the ALT attribute should be “Flights to Australia.” What if it was a picture on a site selling globes? In that case, a better ALT attribute would be “Old-style globe, reminiscent of the style of old maps.” And what if it was a picture on a site about snake anti-venom and linked to contact details about dealing with specific snake bites in Australia? Then the ALT attribute should be “Contact details for snake bites in Australia.” (By the way, Australia has nine out of ten of the world’s deadliest animals, so that might be a useful site to visit!)

In short, a good ALT attribute must be tailored specifically to the website and the context it is used in.

Exceptions to the rule

There are always exceptions, and with ALT attributes it is no different. Here are some things to keep in mind:

• Any legible text on the image must appear in the ALT attribute
• If the image links through to another page, you must include the link in the ALT attribute (but you don’t need to use words like “link”)
• If the image is in an image gallery, you should describe what the image looks like
• If an image conveys no information (for example, an underline or a spacer, or if the image is just a representation of any text that follows) then the ALT attribute should be empty
• Don’t use words like “image”, “graphic”, “click”, “link” or filenames for the ALT attribute
• Remember that the ALT attribute is only read by screen readers, so you can’t put any extra information in there about things like copyright
• The ALT attribute must be different than any caption for the image
• ALT attributes shouldn’t be longer than 100 characters
• ALT attributes should not include HTML

What else do I need to know?

The main thing is to remember that you can’t use a one-size-fits-all approach with alternative text. There are many types of images used on a website, and each requires a different approach for accessibility. They include:

• Simple content-related images–images containing content-related information that adds value to the page content
• Complex content-related images–elaborate images such as maps, charts, and graphs containing information that adds value to the page content
• Presentational images–images that lack any valuable information, such as those used to layout page content (like a spacer), or that are purely decorative
• Logos
• Images used in an image gallery

But don’t be daunted, because PEAT provides a detailed factsheet on accessible images that covers the different methods to use for each image type.

We hope you can also join us on Thursday, December 8, from 2-3pm ET for our webinar Implementing Accessible Workplace Tech: Website Images. I’ll be providing a detailed demonstration and leading discussion and Q&A about how to ensure your images are both accessible and usable. If you have any specific questions that you’d like me to address during the webinar, please add them in the comments here!