Accessibility Basics on Canvas Pages - Headers, Colors, and Tables

Headings

Headings add hierarchical structure and organization to your document. Headings (rather than simply bolding or enlarging text) make it easier for individuals using a screen reader to navigate a document and are an essential element in creating accessible online materials.

There are three different heading styles you can use for formatting in Canvas – Heading 2, 3 and 4. Canvas also allows you to designate text as Paragraph, and Preformatted text as well. When creating pages, it is important to designate heading and paragraph styles first. Then you are free to apply additional formatting such as bold, underline, colors, and text sizes. The additional formatting you do will not replace the heading designation, just change the appearance of it. Change style designations in the drop-down menu next to the text size in the rich content editor.

 


Image showing the styles menu and how to designate text as headings.  

Here's an example from the first page of this module labeling the styles used in the page design.


Screenshot showing how we have used heading designations in the design of our pages. Shows the use of H2, H3, and paragraph text.  

Colors and Contrasts

When using colors in Canvas, it's easy to go a little crazy. However, generally a good design is simple and clean. When creating a page in Canvas with accessibility in mind it's important to remember one of the key rules.

Color should not be used as the sole method of conveying content or distinguishing visual elements. 

Learners who are color blind or visually impaired could have difficulty distinguishing important content due to the colors or color contrast used. Color contrast is basically the differences between two colors. Your color design will have enough difference to easily distinguish the text from the background.

If you look at the example you can understand how contrast is important even for fully sighted students. In example 1 the colors are too similar and they fail to meet accessibility standards. In example 2 there is enough difference between the colors to pass.  You are always safe using the default dark gray on white text that is the Canvas default, but if you are choosing different text or background colors you should consider running them through the contrast checking tool linked below.


Contrast Checker Example 1:Image shows how similar colors look when failing to meet accessibility standards in the contrast checker tool.
 
Contrast Checker Example 2:
Image showing what colors passing the accessibility standards in the contrast checker might look like,

 

Use this Color Contrast Checker Links to an external site. to play with some different colors and see how they contrast. 

 

Tables

If you are using tables in Canvas to display data, there are a few ways that you can make those tables more accessible. One of those ways is to give your table a caption, so learners using a screen reader can quickly identify the context of the table. To give the table a caption go to:

Table --> Table Properties --> Check the box marked "Caption" 

Picture showing the box to check to turn on the table caption option.

 

Another way to help make your table more accessible is to designate headers. You can designate header cells for both rows and columns so that a screen reader can distinguish between header cells and data content. 

Table --> Cell --> Cell Properties

screenshot showing where to set the cells as headers, and whether it's a row or column header.

The "cell type" allows you to designate the cell as a header, and the "scope" lets you specify if it a row header or column header. Save clicks by selecting all your column or row headers at once when applying this setting. 

 

 Click next to ask your questions about accessibility in Canvas, then proceed to your assignment.