Images and Data Visualization

At a minimum, ensure that all images in your content include alt-text or a descriptive caption. The terms “image description” and “alt-text” are sometimes used interchangeably, but “alt-text” refers to a tag that screen reading software can interpret, and which users can select/view; “image description” refers to captions added below an image, or descriptions provided elsewhere in the written content. When generating alt text or image descriptions for course content, make sure you include any elements of the image which students need for understanding, evaluation, or interpretation.

Images that are “decorative,” like illustrations, can often be described briefly. Images that are repetitive and do not directly convey meaning, like chapter headings or clip art, can be omitted. Images that contain important content will need full descriptions to ensure students get the information that they need. A helpful resource is Accessible Publishing’s guide to image descriptions for academic work.


Writing/Generating Quality Alt-Text

Good quality alt-text should consider the following elements:

  • Context: the same image may have different alt-text depending on the topic of the surrounding content. For example, an image of a natural landscape may have different alt-text in a geography course than in a forestry course. Focus on the elements that would help people interpret and understand the image within the context of the other information present.
  • Length: Alt-text should be short, detailed and concise. While it is often included in accessibility checking tools, such as the Canvas accessibility checker, the 120 character cut off may not be true for all screen reading assistive technologies. However, if a lot of detail is required, this can be provided in a caption.
  • Specificity: While detail is important, not every component of an image may be relevant. Only describe the elements of the image that are important for understanding the meaning of the image.
  • Audience: Write appropriately for your audience – alt-text for content aimed at the general population may be different for an academic audience)
  • Type of image: You may want to include the image type (diagram, flow chart, painting). However, you do not need to include ‘image of’ or ‘picture of’ for every image (a screen reader will identify that the item is an image) unless it is unusual and/or important information to the context.
  • Remember that having a caption does not replace having alt-text. Include both if a caption is needed.

Generative AI tools can also be leveraged for generating alt-text, and may prove useful for remediating image-heavy courses. If you are considering using tools such as UBC-supported Microsoft Copilot (remember to sign in using your UBC credentials), it is important to remember that generated results can be inconsistent and include errors. Remember to review any generated alt-text for accuracy, and adjust the text based on the guidance above. BC Campus’ guide on AI Generated Image Descriptions has more useful information on this topic, with suggestions on prompting and how to use Microsoft Copilot to produce alt-text.

Tables and lists

Complex tables can be difficult for screen readers to parse – but many users find complex tables difficult to use, particularly if they span multiple pages or have multiple lines of text in each cell. Consider using simpler formatting, where feasible: lists with headings can be easier for all readers to use.  

When providing data that students need for assignments or evaluations, provide the full data file, where possible. 

Charts and graphs

Sometimes complex images are required to fully convey your content. The best way to make such images accessible can vary – ideally, try to provide the information in several different formats, where possible. For example, include a detailed caption which highlights important trends in the data your graph shows, while also ensuring your graph meets colour accessibility guidelines, omits any extraneous data, uses clear and legible labels/text, and that users can zoom in/enlarge the image.

Data visualizations

A great introductory explainer is available here through Material Design’s Top Tips for Data Accessibility.

If you’re looking for something more in-depth, the University of Wisconsin-Madison has a detailed guide on accessible data visualizations.