Canvas: accessible practice

Accessibility in Canvas

There are several ways to make your subject site in Canvas accessible for everyone. This will benefit all of your students, but will be critical for those with access requirements.

Content structure

One of the easiest things, with the biggest impact, you can do is break your content into sections using subheadings. This will make it easy to skim read, and people reading your document can keep track of what they are reading.

You can learn more about effective content structure in our Content structure: accessible practice resource.

In-built styles

After structuring your content with subheadings, use the heading styles (levels 1-6) to demonstrate the hierarchy of your content. Using the correct heading styles for subheadings is important for people who use screen readers, as a screen reader will rely on this information to navigate written content and allow the user to skim top level information.

To add heading level styles in Canvas:

• Highlight the text you would like to make into a heading.
• Select the styles menu in the Rich Content Editor.
• Select the Heading level (remember not to skip a heading level as this would confuse screen reader users).

Paragraph styles

For text that is not a heading, select Paragraph from the style menu. It’s a good habit to do this when copying and pasting content from other sources to clear old formatting.

Important!

Avoid changing the font, size and colour in the Rich Content Editor to ensure your text is consistent, legible and not distracting for student.

It’s also important to add content as text rather than images of text as students who use screen readers won’t be able to access the information.

Lists

• Use the numbered and bulleted lists in the Rich Content Editor for lists.
• Don’t use punctuation (e.g. dashes, asterisks) or other markers to create the illusion of a list. A screen reader will not interpret these marks as being in a list format.

Language

• Use clear and concise language
• Explain new discipline-specific terms
• Provide instructions to students in plain English

Learn more in our Language: accessible practice resource.

Alternative text

Any image you add to Canvas should have alternative text (alt text) or be marked as decorative. Alternative text provides a text description of what is in the image for users who cannot see it. 

To add alternative text in Canvas (from Canvas community guide): 

1. Open the Rich Content Editor.
2. Click the image, then click the Image Options.
3. You can manage display options for embedded images in the Image Options menu.
4. If an image is added to the Rich Content Editor via URL, the Image Options menu includes the File URL field. The URL can be updated to change the image displayed in the editor.
5. Enter an alternative text description or text tags in the Alt Text field. By default, the Alt Text field displays the image file name. 
6. If the image is decorative and does not require alt text, select Decorative Image. 
7. By default, the Embed Image display option is selected for embedded images. To display the image file link, select the Display Text Link display. The file link will replace the image in the Rich Content Editor.
8. You can also manually adjust the image size in the Rich Content Editor. When you click the image, adjustment handles appear in each corner. Click and drag the handles to adjust the image size.
9. Click Done to save changes. 

Useful tip

Our Alternative text: accessible practice resource (LX resource) provides guidance on how to make alternative text meaningful.

Captions and transcripts

Captions and/or transcripts benefit all students including non-expert users of English and are critical for students who experience hearing loss.

To enable captions in your subject:

• Upload your media files to Canvas with Kaltura My Media (LX resource)
• Add your media to a Canvas page with Kaltura Browse and Embed (LX resource)
• Review captions in Kaltura (LX resource)

Learn more in our Captions and transcripts: accessible practice resource.

Links

Add descriptive link text in the Text field, so that links make sense out of context. This is critical for screen reader users and it can also make it easier to read for all students.

Find out more in How do I create hyperlinks to external URLs in the Rich Content Editor as an instructor? (Canvas Community guide).

Useful tip

Our Links: accessible practice resource (LX resource) provides guidance around how to write descriptive link text.

Colour

• For all text, use foreground/background colours that have high contrast. If you’re not sure about the contrast levels of different colours, play it safe by sticking with the default style colours or use the accessibility checker to determine if the text and background colour has high enough contrast.
• Don’t use colour or shape as the only way to identify something in your document. Use text labels or descriptions instead.

Find out more in Colour: accessible practice (LX resource).

Tables

Don’t use tables to make cosmetic changes to the layout of a page. You should only use tables to present data.

Bad example: Table used for layout

Good example: Table used for data

Creating accessible data tables

• Add the table using the Canvas Rich Content Editor.
• Run the Canvas Accessibility Checker to help you select header rows/columns and add a caption.

Important!

Never use a screenshot or an image of a table, as this will not be accessible by a screen reader.

In our case, we have used screenshots of tables for the purpose of providing examples of tables in Canvas, not to present the data to users.

Accessibility checker

The Canvas Accessibility Checker scans your document, identifies issues and provides prompts on how to fix them. However, it does not understand your content or  context, which is why you still need to be mindful of accessible content practices when adding your content. 

In the Canvas Rich Content Editor, click the Accessibility checker icon.

Learn more about the Canvas Accessibility Checker

• Canvas accessibility checker: accessible practice 
• How do I use the accessibility checker in the Rich Content Editor?
• Academics demonstrate: the Canvas accessibility checker