Foundations of Accessible Document Design: Alt Text

This article is the seventh in a nine-part series covering the basic principles of digital document design. Begin with our first article and follow along for more digital document design tips!

Halloween is my absolute favourite time of the year, and when I was younger, one of my many Halloween traditions was watching The Simpsons: Treehouse of Horror with my brother. I have a vivid memory of tuning into “The Island of Dr. Hibbert” and inadvertently activating described video. When Ned Flanders appeared on screen, we laughed harder at the “man enters with a cow body” description than at the actual jokes in the scene.

This memory is a great example of the power of visuals. While the episode's plot was funny on its own, the comedy was greatly enhanced by the animations. In fact, some of the jokes relied on “sight gags” for their humour. Although I didn’t need described video to enjoy the episode, those with visual disabilities would have missed crucial context. (And believe me - if you didn’t know Ned Flanders had a cow body in this scene, you would be very confused about what was going on.)

To create inclusive digital documents, all visual elements should include alternative text. This ensures that everyone, regardless of their ability to see the visuals, can fully understand and enjoy the content.

Select the graphic for a full-screen display of the Accessible Document Checklist.

Select to expand for full description of Accessibility Document Checklist graphic.

To create accessible digital documents, follow these nine rules:

1. Assign a clear title

2. Use headings for easier navigation

3. Keep it simple with plain language

4. Use lists to organize your content

5. Choose readable typography

6. Be mindful of how and and why colour is used

7. Include alt text for all visuals

8. Use tables for data, not layouts

9. Include descriptive link text

---

Rule No. 7: Include alt text for all essential visuals in your document

“Alt text” (the more commonly used term for alternative text) is descriptive text that explains the meaning and context of a visual item. Every visual element in your document that conveys important information should have a meaningful text alternative. This ensures that all readers have equal access to the information you’re sharing.

Like headings and lists, alt text is an invisible digital label attached to a visual element that assistive technologies read aloud. You can use built-in document authoring tools to add alt text to your document’s graphics. Depending on the program, this is often as straightforward as right-clicking the graphic and selecting “alt text” from the pop-up menu.

Select the graphic for a full-screen display of adding alt text to an image.

A word of advice: while many document authoring tools are improving their accessibility features, automatically generated descriptions still leave something to be desired. Get into the habit of writing your own alt text. Not only will it be more accurate, but thinking about the meaning of a document’s visual elements ensures you’re using graphics to enhance - not obscure - the message of your document.

Why is it important to include alt text?

Alt text is primarily important for readers with visual disabilities, like those who are blind. Assistive technologies like screen readers announce alt text for readers who cannot see the document, clearly communicating the intent, purpose, and meaning of a visual element. This substitution for visual components ensures that readers do not miss out on any critical information.

Alt text is also useful for people with cognitive disabilities who may need further explanation of the content or context of an image. In fact, alt text can benefit all readers! For example, if you’ve been following along in this series, you’ll notice that many of the images we use to explain accessibility principles are accompanied by full text descriptions (sometimes referred to as “long alt text”). Even if you can see and understand the context of the image, reading the full text description might give you additional insights into steps you can take to make your digital documents accessible.

Best practices for writing alt text

What you include when writing alt text will vary based on the type of visual element you’re describing. In general, though, alt text should be:

• Concise. Keep alt text brief and to the point. Aim for no more than 150 characters.

• Descriptive. Provide enough detail for readers to understand what is pictured and why it’s important.

• Relevant. Focus on the essential information and avoid including unnecessary details.

• Contextual. Consider the context in which the image appears and provide alt text that complements that context.

• Grammatically correct. Use proper grammar and end sentences with a period. This ensures the description is read naturally by a screen reader. 

It’s also important to note that you shouldn’t include phrases like “image of” or “picture showing” in your alt text. Screen readers will announce that there’s a graphic on the page before reading the alt text, so these phrases aren’t needed.

Select the graphic for a full-screen display of incorrect versus correct colour contrast.

Select to expand for full description of incorrect versus correct use of colours for meaning.

Alt text is provided to describe a graphic in two ways:

1. Incorrect alt text. 
   

   1. The graphic is described as, “Image of an illustrated person sitting at a desk and working on a laptop. The person has shoulder-length, dark hair and appears to be focused on their laptop screen. They are wearing a light green jacket. On their desk is an open laptop, a steaming cup, and a small stack of books. There are illustrated icons floating in the background, two resembling documents and the other resembling a cloud with an upload arrow.”
      

   2. This alt text is too lengthy, focuses on a visual description of the image rather than its meaning, and uses the redundant phrase “image of”.
      

2. Correct alt text.
   

   1. The image is described as, “Illustrated person creating digital documents to be shared to the cloud.”
      

   2. This alt text is concise and relevant.

---

Best practices for writing alt text based on graphic type

There are many different visual elements you might include in your document. Most will require alt text, some will require long alt text, and others will require no alt text at all. Use these basic principles to help you determine what you need to include.

1. Informative graphics require alt text. Informative graphics include pictures, photos, and illustrations. They are used to visually represent concepts and information. Because they add meaning to your document, they require alt text. When writing alt text for these graphics, clearly describe the image's meaning and purpose so that the reader understands its relevance. Focus on conveying the information or function the image provides rather than describing what it looks like. 

2. Complex graphics require alt text and long alt text. Complex graphics include bar graphs, pie charts, diagrams, and infographics (like the checklist at the beginning of this article). These graphics contain too much information to be fully described in alt text alone. For these images, provide alt text for an initial description and use “long alt text” to fully explain the information. Long alt text can be placed directly beneath the image, in an appendix you link to, or, in the case of data, in a table below the graphic.

3. Screenshots require basic alt text. Screenshots are useful for providing “how-to” instructions, especially for visual learners. However, they should not be the sole source of explanation or instructions. Ensure the surrounding text fully conveys each step or explanation shown in the screenshot. When writing alt text for a screenshot, keep it simple, as the document's text should provide the necessary context and details.

4. Decorative graphics should be labelled "decorative". Decorative graphics are for decoration only - they don’t add meaning to the document. Examples include visual elements like page borders and section dividers. Because these graphics do not contain any information, use the “mark as decorative” option in the alt text field. Labelling a graphic as “decorative” allows screen readers to skip over the graphic, helping users focus on the elements of the document that convey important information.

Incorporating visual elements into your digital document can significantly enhance your message. That’s why it’s crucial to include accurate alt text for all meaningful images. By doing so, you ensure that all readers, regardless of how they interact with your document, can access and understand your content.

Coming up next in our Foundations of Accessible Document Design series: why you should only use tables to present data in your documents.