Alternative Text

Alternative text (alt text) is a description of visual content. Descriptions can be provided by adjacent text, an image caption, or the alt text field. Alt text is code that is read by screen reader software to blind and low vision readers. Alt text allows all users to understand the context, purpose and meaning of visual content by relaying critical visual information in text format.

Alt text is essential to digital accessibility. According to WCAG 2.0 Guideline 1.1.1 : “All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.”

On this page:

• Where to Include Alt Text
• Decorative Images
• Writing Alt Text
• Common Platform Guides
• View Content Without Images
• Further Reading

Provide alt text because it is

Images and diagrams are excellent compliments to text and vice-versa. Including visuals can break up large block of texts and increase understanding. However, do not overly rely on any single format alone.

Where to Include Alt Text

Add alt text to visual elements that contain information. This is essential to provide a text equivalent of visuals, including:

• Images and graphics
• Diagrams and charts
• Images of text
• Important logos
• Linked images
• Buttons styled with a graphic

Use this tool to determine when to use alt text (including some tips for writing alt text based on image type) or when to mark an image as decorative.

Decorative Images

Useful alt text is important. Knowing when to mark a graphic as decorative is equally important. Visual elements that are included purely for aesthetic purposes and do not contribute any meaningful information should be marked as decorative. Additionally, a graphic should be marked as decorative if the information in the visual element is available in another format such as a figure caption or adjacent text. Use images and text to support and reinforce each other to make content more accessible and easier for all to understand.

Mark decorative images with built-in tools (often a checkbox labelled “mark image as decorative” or similar) or with alt=“” in HTML markup.

Image Attribution

When adding an image attribution (copyright license etc.) to a decorative image, ensure the caption is also marked as decorative. If it is not, assistive technology would not announce the image, but would read the succeeding attribution text. This would lead the reader to believe they may have missed an important image.

Writing Alt Text

Before writing alt text, consider the context (information around image in content), purpose (what the image contributes), and meaning (the message the image conveys).

Understand that graphics can be informative, functional, or decorative. An informative graphic includes information and must be accompanied by a text description. A functional image performs an action like a link or button; the alt text must indicate what the action will be when the graphic is activated. A decorative image is purely for aesthetic purposes such as a border or background. Note, when accompanied by alt text or a figure caption, informative images can be marked as decorative.

To begin writing alt text, consider how you would describe the image to someone over the phone.

Caroline Desrosiers offers a formula to write alt text:

1. Identify the image type (if not a photo)
   1. Indicate if an image is a diagram, map, symbol, gif, drawing, cartoon, etc. The added context will orient users and aid their understanding.
2. Describe the focus of the image
   1. What is the most important information in the image.
3. Add relevant details
   1. Add details that contribute information or meaning but are not the focus.

Let’s consider this example:

Type = graphic

Focus = north pole centered globe

Details = surrounded by olive branches. This is the United Nations logo.

So, that provides us with alt text that would read “Graphic of north pole centered globe surrounded by olive branches. This is the United Nations logo.”

Alt text should be succinct and accurate, including punctuation and grammar. There is no limit to the length of alternative text but aim for a sentence or two at most to provide a pleasant reading experience.

Other types of images might be suited to a different formula. Object – Action – Context^[1] is a method similar to type, focus, detail mentioned above.

Object = Line graph

Action = graph shows the amount of alt text written and the difficulty encountered in writing alt text over time.

Context = The difficulty in writing alt text rises briefly before quickly declining over time as the amount of alt text written increases consistently after an initial dip.

This method provides us with the alt text “A line graph that shows the amount of alt text written and the difficulty in writing alt text over time. The difficulty in writing alt text rises briefly before quickly declining over time as the amount of alt text written increases consistently after an initial dip.”

Use Relational Terms

Describe the relative size and scale of elements in the graphic. Describe elements relative to the subject, one another, or to a common object.

Describe the directional and positional information of objects in the graphic relative to the frame, such as “on the right” or “near the top left corner.”

Depending on context, terms like “partial view,” “bird’s-eye view,” or “close-up” can be crucial.

Materials, mediums, and textures can be identified by name where possible.

For an image of a recognizable person or place, name them directly but also describe any relevant details.

What to Avoid

If a photo, do not include “photo of…” or “image of…”

• However, “Screenshot of…”, “diagram…”, “map of…”, “cartoon drawing…” are useful information to orient users.

Do not include:

• Copyright information or attribution.
  • Copyright information should be included in a caption below the image or in a list of references.
• Emoticons.
• Hashtags.
• SEO keywords.
• Promotional material.
• Links.

Do not repeat information contained in adjacent text or included in a visible caption.

• If the relevant information of an image is include in a caption or adjacent text, you can mark the image as decorative.
• If graphic element has a descriptive caption and is labelled with “Figure 1” for example, alt text could read “Figure 1, image caption contains description.”
• Image captions are useful for copyright, attribution, more information, or links.

Do not editorialize or include your own feelings or bias. Only include the important information to provide an accurate description.

Do not make any assumptions about gender or ethnicity. Prefer “they,” “them,” or “person” unless details are verifiable.

AI has improved the accuracy of machine-generated alternative text. Keep in mind that even an accurate description will provide no context or purpose. AI generated alt text may be useful as a starting point to be edited by a human.

Common Platform Guides

The following interactive demonstrates how to populate the alt text field in Office, Brightspace, H5P, Pressbooks, PDF, HTML, and other platforms.

Later platform-specific chapters will cover how to provide equivalent text, add captions, and populate the alt text field in greater detail.

View Content Without Images

If you are not sure about an image, try viewing your content without the image. If no information is lost, you can mark the image as decorative.

To do so: