Canvas Accessibility Guides

Heading levels should be organized hierarchically, just as in a topic outline. The page title in Canvas is always automatically coded as Heading 1. Heading 2 is used for all subtopics on the page, Heading 3 for sub-subtopics, and so on.

To Add a Heading Level to Your Text

1. Click on the Edit button in the upper right-hand corner of your Canvas page to open the Rich Content Editor window.
2. Highlight the text you want to format as a heading (e.g., Overview, Instructions, Grading).
3. In the upper-left corner of the editor, select Paragraph to open a dropdown menu of heading styles.
4. Choose the heading that fits the topical organization of your content (starting with Heading 2).
5. If you want the headings to be a certain size or format, pick the appropriate heading level first, then adjust the formatting as desired. 

Additional Information

• For more information about formatting text in Canvas, see How do I add and modify text in the Rich Content Editor as an instructor? 
• To learn more about why logical structure is important to visually impaired users, visit WebAIM's Headings.
• For more information about the Accessibility Checker, see How do I use the Accessibility Checker in the Rich Content Editor? 

Lists should be formatted using the Canvas Rich Content Editor (RCE) so that it can be read as a list by a screen reader.

To Create Accessible Lists in Canvas

1. Open the Rich Content Editor.
2. Select the list icon* (looks like a bullet point list, three dots and three horizontal lines, stacked vertically).
3. Choose your preferred list convention from the menu.

Using hyphens, asterisks, or other non-semantic characters may create the appearance of a list, but lists created without formatting tools will not be recognized as a list by assistive technology. 

Keep in mind that depending on the content, some list styles are more appropriate than others. For instance, if you are providing instructions that must be followed in order, you should choose an ordered list style. If the list data isn’t sequential, you should use an unordered list style.

*You may not be able to see the list icon if your browser window is too small. You can expand the editor menu by clicking on the overflow menu (three vertical dots). 

When making links on Canvas, link text should be unique within a page. Canvas allows users to make two kinds of links: external links, which lead to web content outside of Canvas, and course links, which allow you to link to a variety of course content: pages, quizzes, assignments, and discussions.

Creating Accessible External Links

1. Open the Rich Content Editor.
2. Highlight the intended hyperlink text.
3. Locate and select the Link icon to bring up the Link Options window.
4. Select External Link.
5. Copy the desired URL to your clipboard.
6. Paste the URL into the Link field.
7. Click Done.
8. Select Save in the corner of the Rich Content Editor to save the changes to the page.
   

Creating Accessible Course Links

1. Open the Rich Content Editor.
2. Click the Link icon.
3. Select Course Link to bring up the Add window.
4. Use the Search bar to search for intended resource, or use the dropdown menus beneath the search bar to locate the resource manually.
5. Select the intended resource.
6. Select Save in the corner of the Rich Content Editor to save the changes to the page. 

Additional Information

• To learn more about why links should describe the link destination, see WebAIM’s Links and Hypertext.
• To edit/create hyperlinks in Canvas see How do I edit and remove hyperlinks in the Rich Content Editor?

General Guidelines

• To ensure proper reading order, organize information left to right and top to bottom.
• Avoid merging cells. Merged cells can disrupt logical reading order.
• Provide a text summary of the content if the table contains complex data.
• Don’t use tables for content layout. Only use tables for tabular data.
• Avoid using colors with insufficient contrast.

Captioning Tables

When writing captions for tables, avoid generic captions (e.g. “Data Table”). Instead, concisely summarize and contextualize the content. If the table is referred to in the text, assure that the table is consistently being referred to by its caption. You can provide an additional text summary of the table if needed.

1. Open the Rich Content Editor. 
2. Select the intended table. Selection is indicated with blue handles at each corner of the table. If you have not yet created the table, you can do so in the Table menu.
3. Click the More icon (a vertical set of three dots).
4. Click the Table icon in the toolbar.
5. Select Table properties.
6. Check the Show caption box. 
7. Save the changes in the Table Properties menu. 
8. Now the caption field will be available. Enter the caption into this field.
9. Save changes to the Canvas page.

Provide Headers and Set Their Scope

Remembering that screen readers will read left to right and top to bottom, choose whether you will have headers across the top or left side of your table (or both). Be sure to set the scope of the header to properly associate the cells with their header(s).

1. Open the Rich Content Editor. 
2. Select the intended row or column.
3. Click the More icon (a vertical set of three dots).
4. Click the Table icon in the toolbar.
5. For a row, select Row properties. For a column, select Column properties.
6. Change the type of row or column from Body to Header and Save. 
7. Keeping the same area selected, return to the Table icon and select Cell > Cell properties.
8. Under Cell type, select Header cell. Under Scope, select the proper scope. Note: The scope is which set of information the header refers to, so if you are setting a header across the top row, the scope will be column and vice versa.
9. Save changes to the Canvas page. 

Use the Accessibility Checker to Find Errors

Before leaving the page, click on the Accessibility Checker icon below the text editor. This will walk you through any issues and how to resolve them. 

Additional Information

• For more information about tables, see Table Accessibility in Canvas.
• For more information about the Accessibility Checker, see How do I use the Accessibility Checker in the Rich Content Editor?

Using color can help convey information, but many users cannot benefit from the use of color due to visual impairment or color blindness. All users benefit from color contrast that makes information easy to read.

General Guidelines

• Ensure that the contrast between text and background is high enough to be easily readable.
• Don’t rely on color alone to convey information. Combine with visual cues other than color.
• Avoid combinations known to be problematic for colorblind users (e.g. red/green).

Changing Text Color

1. Open the Rich Content Editor.
2. Highlight the target text.
3. Use the Text color and Background color tools to pick a color.
4. Save changes to the Canvas page. 
5. Before leaving the page, click on the Accessibility Checker icon below the text editor. This will walk you through any issues and how to resolve them. 

Additional Information

• For more information, see WebAIM’s Contrast and Color Accessibility.

General Guidelines

• Be specific and concise. Consider the purpose of using the image and the context it is being presented in. Note: Alt text exceeding 120 characters will be flagged by the Accessibility Checker, but there is no hard limit.
• Don’t start your description with “An image of…”. The screen reader will tell the user that an image is being described.
• For complex images, provide a brief summary in the alt text field and describe the image contents more fully on the page.
• For icons, describe the purpose of the icon rather than its shape (e.g. Describe the magnifying glass icon for searching as “Search” rather than “magnifying glass”).

Adding Alternative Text to Canvas

1. Open the Rich Content Editor. 
2. Select the intended image.
3. Click Image Options.
4. Enter your description in the Alt Text field. If your image is decorative, select Decorative Image instead.
5. Save your changes to the Canvas page. 
   
6. Before leaving the page, click on the Accessibility Checker icon below the text editor. This will walk you through any issues and how to resolve them. 

Additional Information

• To learn more about why accessible images are important to visually impaired users, visit WebAIM's Accessible Images.
• For more about how alt text improves accessibility, see WebAIM’s Alternative Text.
• See Microsoft: Everything You Need to Know to Write Effective Alt Text for ideas to improve your written descriptions.

Non-English words will be read with the default English pronunciation if they are not marked with the language attribute. For many languages, the result is incomprehensible and inaccessible for students using assistive technology. To see and hear what this looks like, watch the following video demo of a screen reader reading various Asian languages in which the characters are not read correctly without the proper language attribute.

Video Demo: Screen Reader with Asian Languages

Language issues can be remedied by accessing the HTML layer of the page and updating the language attribute on any non-English text.

To Change the Language Attribute

1. Open the Rich Content Editor on the page you’d like to update.
2. Select the HTML Editor icon (</>).
3. Locate the non-English text you’d like to tag.
4. Type  <span lang =”xx”>.
5. Replace the x’s with the country code that corresponds to the language you are using. A link to the country codes has been provided at the bottom of this page.
6. Add the </span> tag to the end of the non-English language section, before the closing </p> tag.
7. Save changes to the Canvas page.

Additional Information

• For more information see Canvas: Using the Rich Content Editor to Apply Language Attribution Tags.
• For country codes see W3 Schools: HTML ISO Country Codes Reference.
• To change the language for an entire page of content, see Language on Websites.