Alternative Text

Alternative text (alt text) is an image description attached to a visual element. 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. Additionally, if for some reason an image cannot be viewed (slow connection, error with hosted image, or use of assistive technology) alt text can provide the meaning of the image.

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
• Writing Alt Text
• Common Platform Guides
• Decorative Images
• Further Reading

Use 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

Images that are included purely for aesthetic purposes, or have adjacent text conveying the information in the visual, can be marked as decorative.

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.

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).

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

Learn how to add alternative text to images in Office, Brightspace, H5P, Pressbooks, PDF, HTML, and other platforms.

Later chapters will cover these processes in greater detail.

Decorative Images

Useful alt text is important. Knowing when to mark an image as decorative is equally important. Consider images as active, informative, or decorative. An active image performs an action, such as opening a link or activating a button. Informative images contribute meaning or information, such as graphs, diagrams, or photos. Decorative images only have aesthetic value and do not contribute any meaningful information.

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:

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.