Accessible Canvas Content

Owned by Maria Shimel, created
Jan 06, 2023
5 min read

Summary

Original Article: University of Oregon: Accessible Canvas Content

This article explains how to format your content to be as accessible as possible, and details how to use the built-in accessibility checker in Canvas.

Best Practices for creating accessible content in Canvas

Describing Images 

Images are inherently inaccessible to people who are unable to see them. Canvas provides two ways to provide descriptions for an image:

  1. Add Alt (alternate) Text to the image using the Embed Image tool within the rich text editor.

  2. Provide a visible text description beneath the image, such as a caption on a figure.

rich content editor menu with image symbol highlighted

Within the rich text editor, select the Embed Image icon, which pulls up a dialog box where you can enter alt text.

screenshot of Alt Text text box with description. Man playing fetch with dog.

 

Guidelines for Alt Text

  • Alt text is not visible on the page, but gets read by screen readers. It should describe the content contained within the image in a brief sentence or two, and in fewer than 125 characters.  

    • Don’t include “Photo of...”, “Image of...” etc., in the image, as screen readers will announce the media as an image before reading the alt text. 

  • Canvas has the option to flag images as decorative. If the image is purely for visual effect and does not contain meaningful content, mark it as decorative.This tells screen readers to skip over this content.   

  • If the image is not marked as decorative, and does not have alt text, some screen readers will read the file name of the image (e.g. stylized_horiz_graphic.jpg) which is a poor user experience.  

  • Complex images, such as graphs and infographics, cannot be sufficiently described within the parameters of alt text. Provide a brief explanation of the complex image in alt text, then provide a more thorough description of the graphic as plain text on the document. This is more accessible to everyone, including people with full sensory perception who might have difficulty understanding the graphic. 

  • If you add a visible text description to the image in lieu of alt text, flag the image as decorative so screen readers do not read the file name.

Color Contrast 

While complete colorblindness, seeing exclusively in greyscale, is a relatively rare condition, about 1 in 12 men and 1 in 200 women experience some degree of colorblindness. It is important that colors sufficiently contrast against each other so all content on your media is readable. This applies to text against solid backgrounds, and to text in front of images. 

  • As examples, yellow text on a white background, or dark grey text on a black background is hard to read, vision-impaired or otherwise.  

  • Color contrast is a calculated ratio between the perceived luminance of two colors. The color contrast between two elements needs to be at least 4.5:1 for regular sized text, or 3:1 for large (18pt or 14pt bold font) text. More contrast is always better. 

  • Use a color contrast checker to see if there is sufficient color contrast between the text and background.

  • Avoid putting text over top of images and patterns when possible. If necessary, add a tinted color overlay behind the text so it stands out more against a background. 

  • The default UO green and yellow provide insufficient contrast for web accessibility requirements when placed on top of each other. If you want to use UO-yellow text on UO-green background (or vice versa), University Communications provides web-specific UO colors to ensure sufficient contrast. 

  • Logos are exempt from color contrast requirements. Flag logos as decorative images.

To ensure the links in your Canvas course are accessible, they should have meaningful link text, and be visually identifiable by some means beyond color alone. 

  • The default link styling in Canvas is accessible. Don't change link styles.

  • Link text should be meaningful, it should clearly tell the user where it goes. Text like “Read More” is ambiguous and should be avoided. 

  • Avoid using the same link text when linking to different destinations.

  • Avoid using different link text when linking to the same destination. 

Use Structured Data Whenever Possible 

Canvas, like MS Word and most other content editing interfaces, has preformatted options for presenting content. 

Headers

Adding a Header in Canvas will make the text larger, it might change the color, add line spacing, amongst other stylistic changes. Using these types of structured data to convey content organization and hierarchy is always recommended. Using structured data also adds meta data to the content, information that is not visible on screen, but allows assistive technologies to understand the layout and structure of the document content.

  • For Headers, use the Paragraph dropdown within the rich text editor. This applies headers that have both visual and structural meaning that gets interpreted by assistive technologies. 

 

  • Header 2 should be used for the title of the page.

  • Header 3 should be used for the sub title of the page, and for major themes of the content.

  • Header 4 should be used for secondary themes of the page content.

  • Use only as many levels of Header as you need.

  • Do not skip Header levels. Don't jump from Header 2 to Header 4.

Lists

Use the predefined numbered list and bullet list options. This provides structure to the lists, and allows screen readers to understand that this is content presented in list format. If you try and “fake” a list by manually adding hyphens to regular paragraph text, it visually looks like a list, but lacks the underlying structure.

 

How to Test

Canvas provides a built-in accessibility checker. After you add content to your page, using this tool will help you identify common accessibility violations. Use this any time you create or edit a page, and address any identified errors.

All automated accessibility testing tools are imperfect. For example, they are able to detect some errors, like missing alt text, but are generally not sophisticated enough to verify that the alt text is appropriate. Automated tools are a great way to do a first-pass test, but this should not replace a manual review of any content using the guidelines above.