In our most recent tip sheet from AccessATE and DeafTEC, we go over various tips for improving workplace communication for blind and low vision employees. The tip sheet mentions adding descriptive or alternative text for photos, charts, and graphs, which we’ve also touched on in a previous tip sheet and blog post. Here, we’ll dive into more detail about best practices for crafting and adding alternative (alt) text, both for electronic documents and online.
Alt text, sometimes called alternate text, descriptive text, or alternative text, is text that supplements an element, such as an image, or substitutes for it if it cannot be rendered. It’s what screen readers will use to convey information about an image to a blind/low vision user. The webpage version of this is the HTML “alt” attribute, which you have likely encountered before without realizing it, as the use of alt attribute has become increasingly common in coding. One does not always need to know how to code to use it, as many programs and webpages have interfaces that allow you to set alt attribute values by simply filling out a text field. It’s important to remember that while the HTML alt attribute is for the web, the use of alt text is not exclusive to webpages. Alt text should be set for images, charts, graphs, etc., in Word and PDF documents, PowerPoints, Excel documents – wherever you might be using a visual element to convey information.
Alt text does not need to be added for every image; “decorative images”, or those that do not add information or context, do not require alt text. In fact, it can be more confusing to have alt text for decorative images that not – imagine you’re reading a soup recipe on a blog, when suddenly there’s a sentence describing a sunny kitchen! It’s related to the topic, sure, but it doesn’t add any information about the recipe. If your image, chart, graph, etc., does indeed add information, then you need to set alt text.
First, let’s start with how one writes good alt text. Alt text should be as brief as possible (think less than 250 words) while still being informative and coherent, and written like a normal sentence, i.e., capitalize the first letter of sentences and proper names, include standard punctuation, etc. Prioritize information by putting the most essential info at the beginning of the text. Superfluous information, including words like “image of”, “picture of”, “icon”, etc., should be left out entirely. Many images serve a particular purpose, often as buttons, links, and other interactive elements that initiate action – this purpose, as opposed to the appearance, should be conveyed in the alt text. For example, many search buttons have a small icon of a magnifying glass. In this case, the appropriate alt text would be “search”, not “magnifying glass”. Note that the appropriate alt text for a given image may change depending on the context, as discussed in the example on Harvard University’s page on writing good alt text.
While setting alt text for an icon or simple image can be fairly easy, doing so for complex images can seem daunting, but it’s equally straightforward. For complex images, including charts, graphs, diagrams, maps, or any other kind of image that contains substantial information, brief alt text alone is insufficient, so two parts are often required. First, a short, standard alt text that identifies the image and notes that there is a longer description elsewhere (be sure to specify where it can be found). Second, a longer description that explains the information in the image. This rarely needs to include information describing the chart, graph, etc, itself, e.g., “a bar graph”, as this is usually as superfluous as terms like “picture of”. Instead, explain what the image or data therein is trying to say, such as, “The following graph show that conference attendance has risen over the last three quarters.” If the exact numbers or other details are important, one can then go on to describe those and their significance.
Setting alt text on web pages is increasingly common and expected, in light of the recent increase in conscientiousness around accessible technology. It’s also becoming common practice when distributing documents, slides, and more. Alt text is a simple and fast way to ensure that blind/low vision users are getting the fullest experience out of your materials, as well as ensuring that they’re getting as much information as sighted users. It’s also helpful for all users in the event the user isn’t clear about an image’s meaning or an image can’t be rendered, making a better experience for everyone.
- W3 has a number of Tips and Tricks for alt text, plus more information on text alternatives for non-text. They also developed a handy Alt Decision Tree.
- Accessibility: Image Alt text Best Practices also goes into more detail about writing good alt text, and is rich with examples for various images.
- WebAIM, a very handy resource for all things web accessibility, has a thorough article on Alternative Text. The article discusses alt text, with examples, and the various types of images you will use it for.