Laptop displaying several data visulations in shades of beige and blue sits onthe modern leather sectional

Image by Lukas Blazek from Unsplash

Alt-text for teaching materials and communications 

Content reviewed May 2024

Your class is in part a visual presentation, typically an audio-visual presentation. Some barriers learners might be facing with the visual portion of your content include one or more of the following: 

  • Viewed in extreme levels of light – either an overly bright or extremely dark environment  
  • Low vision or legally blind  
  • Visual processing disorder or Irlen Syndrome (Scotopic Sensitivity Syndrome) 
  • Neurominority (dyscalculia, ADHD, dyslexia, or autism)  
  • Prefer to listen to sessions 
  • Have a photosensitive epilepsy 

To improve learning outcomes and knowledge transfer to students we have some practical steps for you to follow.

Writing alt-text

Alt-text and long descriptions are an important part of describing an image but are not the only part of describing an image or visual resource. The title or captions of the image along with the body of the presentation, document or LMS copy also contributes to all users’ understanding of an image, data visualization, illustration or a screenshot. 

Title of image or figure

A good title includes the point of the image to reduce the cognitive load of understanding the image. 

Alt-text

A shorter description of a specific image accessed via assistive technology. Alt-text is required for every image that is meaningful.  

Body

The main text of the document or LMS provides context for the image.  

Caption

A shorter text that is associated with a specific image, or a group of images presented together. Available via all reading technology.  

Long description

A longer text is associated with a specific image. It may contain structural elements or subsections (e.g., a table, paragraphs).  An example of content with long image descriptions is on MB Hubs Creative media consultations page.

How detailed to be with alt-text

The purpose of the image, along with details in the surrounding text, will give you the level of detail you need to include in the alt-text, captions and long description (if necessary).  

Consider context when writing the alt-text or the long description for a document or LMS. It should not repeat information that is contained in surrounding or body text, title or caption except when repetition is the best alt-text or long description. The alt-text may refer to terms, names, and knowledge previously established within the text.  

Consider the purpose of the alt-text while putting information that is relevant to the image’s purpose within the text up front. The alt-text should reinforce the argument or purpose in the same way that the image does.  

Order alt-text information from general to specific. Begin with overview statements that allow the learner to grasp the whole of the image, before going into specifics. The format allows the learners to decide whether they wish to continue to the more detailed information. 

The table “Detail levels of alt-text” list four options of detail level alt-text and is based on a YouTube presentation by Matthew Deeprose called What is alternative text? How do I write it for images, charts, and graphs?   

This table is modified from Matthew Deeprose’s presentation:

Table: Detail levels for alt-text

Level of detail Alt-text, caption and description requirements 
Serve only as a visual interest Mark as decorative in the document or learning management system (LMS) if it allows, or alt-text should say “decorative element.” 
Replicate text already on the webpage Use the caption to describe the essential content and context. Mark it as decorative in the document or LMS, if it allows, or alt-text should say “decorative element.” 
Support the text already on the webpage Write a brief alt-text describing the image. Use the caption and title. 
Go further than the text already on the webpage Write a brief alt-text describing the image. Use captions and titles. Provide a full long description in the document or LMS.
Provide relevant tabular data separately in the document or LMS. 
Detail levels for alt-text

Note: For examples of how to write alt-text and long descriptions for charts and graphs, view Matthew Deeprose’s presentation, What is alternative text? How do I write it for images, charts, and graphs? from the 17-minute mark to the end for three examples covering Venn diagrams, line charts and flowcharts (i.e, decision trees). 

Writing alt-text references

Sample Textual Descriptions for Illustrative Materials by the University of Michigan 

What is alternative text? How do I write it for images, charts, and graphs? by Matthew Deeprose

Accessagogy Podcast episode 2 by Ann Gagne

Alt-text for data visualizations (charts, graphs and Venn diagrams)

Amy Cesal, a data visualization designer, in her medium article Writing Alt Text for Data Visualization shared a simple and effective formula for writing alt-text for data visualization:   

  • Chart type
  • The type of data  
  • The reason for including the chart 

Important: Include the long description and the data or a link to the data source (CSV or other data form) somewhere in the document or LMS. 

Tips 

  • Even if a colour key is provided, do not mention the colours for the data visualizations as this information is not important.  
  • Provide data in ascending or descending order to increase understanding 

Alt-text for data visualizations references

An intro to designing accessible data visualizations by Sarah L. Fossheim

Writing image descriptions for graphs by 247 Accessible Documents

Writing Alt Text for Data Visualizations by Amy Cesal

Alt-text for maps

  • Put the detail in body text and captions so it is available for all learners. For simple maps with this information available, the alt-text can be brief.
  • A short alt-text can indicate the type of map it is and then reference more detailed descriptions.
  • Organize the map’s elements (caption, title, body text and map) by arranging all the elements in a logical order.
    • Connect the elements by placing them in order, referencing them or adding links.
    • Don’t repeat. Each element should add unique information and work with the rest.
    • A good order for comprehension is body text first, then the map title, then the map with the caption and finally a table of map details (if needed).
  • Keep maps consistent and simple in their styling.
  • If a map includes colour-coded regions, make sure that there is sufficient contrast between the text and the background, and that colour-coding is accessible for users with colour-deficient vision.
  • If the map is used to provide directions to a location, make sure to also provide text-based directions or a link to text-based directions adjacent to the map.
  • Avoid using cardinal and ordinal directions when describing a map unless the top of the map is north.  
  • If you are using a map to display multiple locations, provide a text list of locations. 
  • Detailed maps or large complex maps that learners need to use to answer questions will typically require more information than you can provide with the alt-text alone. 
  • For large complex maps, breaking the map up into mini maps and creating text describing each section can help both the design and understanding of the map. 
  • For large complex maps, determine how you can organize the information structure (sequencing, grouping, labelling) to explain the map. 

Alt-text for maps references

Writing text alternatives for maps by 4syllables

Providing text alternatives for the area elements of image map by WC3

Maps by Carnegie Museums of Pittsburgh

Accessible Maps by W3C wiki

Accessibility Guide for Static Digital Maps (PDF) by Minnesota Government

Alt-text for flowcharts

Modified from Creating Accessible Flowcharts by Boise State 

1. Outline first

If you outline all your steps and requirements first, the design stage becomes more intentional and you will have a text description ready for when you publish. 

Follow these tips to create your outline. 

  • Use headings, ordered lists and unordered lists to organize decisions and steps.
  • Headings are a great way to indicate the start of your process or highlight key steps in the process. These headings provide a navigation point for visual and non-visual users to follow in your text description. 
  • Ordered, or numbered lists are a great way to outline the entire process in a linear manner. The steps in your ordered list represent the main steps a user needs to take in the process. Using numbers allows you to easily reference a particular step as users move through the process. 
  • Unordered, or bullet lists can indicate specific decisions at a point in the process to direct users to the next step. 

2. Design for readability

Once you have your outline you can design a flowchart image that represents your process. Here are some tips to keep in mind as you design. 

  • Since you have all your directions provided in the outline, keep the visual as simple as you can without sacrificing meaning.  
  • Leave the detailed directions off the chart as they can be difficult to interpret in an image.  
  • Use shorter phrases to convey the different steps to help users read through the process more easily. 

3. Save as a single image

  • After you have designed your flowchart, save the entire project as a single image. This will make it easier to provide a single alternative text description and caption on your webpage. 

4. Publish with text description

  • Add your flowchart image to your document or LMS along with the outline, which is the text description. For your alt-text, caption or image title, provide clear information to explain to users the purpose and function of your image and direct learners to the text description. 

Important: If your readers would benefit from or want a printable version of your flowchart, you can include an accessible PDF that’s clearly labelled as such. 

5. Plan for updates

  • Plan to review your flowcharts on a regular basis such as once a year or semester, as needed. 
  • Flowcharts reflect a particular process and therefore if that process changes over time, the flowchart should be updated. 
  • You may also need to update your flowcharts based on user feedback. If you receive several questions about a particular step in the process, perhaps more guidance is needed to help users through the steps. 
  • If you currently have a flowchart published in course materials that isn’t accessible, review it to ensure the image itself follows the principles of accessible design (i.e., simple, easy-to-follow, accessible fonts and colours). 
  • If the image does not require any editing, then provide a text description of the process following the principles provided in the outline first, then the design section of this post. 
  • If the image does require editing, follow steps 1 to 5 in the “Special considerations for flowcharts or decision trees” section. 

Reviewing existing flowcharts in my course 

  • If you currently have a flowchart published in course materials that isn’t accessible, review it to ensure the image itself follows the principles of accessible design (i.e., simple, easy-to-follow, accessible fonts and colours). 
  • If the image does not require any editing, then provide a text description of the process following the principles provided in the outline first, then the design section of this post. 
  • If the image does require editing, follow steps 1 to 5 in the “Special considerations for flowcharts or decision trees” section. 

Alt-text for flowcharts references

Creating Accessible Flowcharts by Boise State 

Key Considerations for Flowchart Accessibility by Minnesota IT Services

Flowcharts & Concept Maps by PennState

Alt-text for organizational charts

Modified from Organizing your Org Charts by Boise State University.

1. Define your purpose

Before you share an organizational chart (org chart), take a moment to define your purpose. This will help you better understand what content needs to go into your chart and how complex or simple your diagram needs to be. 

  • If your main purpose is to show relationships in an organization, think about how many layers, or levels of information, to include on the org chart.  
  • If your main purpose is to provide information for your learners to know who to contact, then an org chart may not be the best tool. A contact section by topic may be more appropriate for your purpose. 

2. Start with an outline to plan out your content

  • You can think of an organizational chart as containing many levels of information. As you outline your levels, you will create a text version of your relationships that can be used as a textual description or alt-text for your final organizational chart image. 

3. Develop your org-chart image

After you have an outline, you can easily apply your content to your image.

Regardless of the tool you use, be sure to ensure accessible colours, fonts and logos are used to style your org-chart (For more in-depth details on accessible colours, go to Designing data visualization for e-learning to access a free course and review section 3 on accessible colours). 

There are lots of tools available to help you create an organizational chart. You can use a diagramming tool like Visio or PowerPoint or even Google Drawings. 

4. Publish your image and long text description in your document or LMS

Publish your final image and the text description outline together on a single page with the following settings: 

  • Add a brief alternative text description to let users know what the image is and where to find the text description. Example: “Department Organizational Chart, read text description on the page.” 
  • To help users who want to view a larger version of your organizational chart you can add a link to the media file in the image detail settings.
  • If you do add a link to the media, be sure to include a caption to let users know the purpose of the link. Example: “Select to view the full image.” 
  • Add your long text description to the page after your visual.
  • Tag your different levels with the appropriate headings. Example: Level 1 of your organizational chart should use the Heading 2 style, Level 2 should use Heading 3, etc. 

5. Provide an optional PDF download

  • If you think your users want or need a downloadable version of your organizational chart, you can include a PDF if you also have the text description on the same page.
  • Before publishing your PDF document, perform an accessibility check and resolve as many errors as possible.
  • Lastly, clearly label your link as a downloadable PDF. 

Alt-text for organizational charts references

Organizing your Org Charts by Boise State

Alt-text for quizzes and exam questions

The US’s National Center for Accessible Media created a resource for alt-text and image description for summative assessment questions. Thought this tailored to K-12 audience the information within is applicable to post-secondary assessment as well. Review the NWEA Image Description Guidelines for Assessments revised version in 2021 which includes the topics of:

  • General guidelines
  • Math examples
  • Reading and language usage examples
  • Science examples

Further learning

Poet Training Tool is a web-based image description resource. Developed to help people learn when and how to describe various types of images frequently found in educational resources. This tool helps educators develop the skills for writing effective image descriptions for critical visual content. It provides both:

  • best practice guidelines
  • hands-on exercises

Writing alt text for images and alt text decision tree is a webpage that helps to simplify the many decisions when writing alternative text.

Alt-text help for your online course

If you are looking for help with alt-text or long description content? We have staff you can consult with for your online, blended or distributed courses.  

Book a one-on-one “Instructional Design Consultation” with our Instructional designer to build more accessible content today! 

Book your Instructional Design Consultation
Black line isometric computer monitor with curser on screen
Icon by smashingstocks from Freepik

You may also be interested in