Introduction

The Accessibility Checker is a powerful tool within Canvas’ Rich Content Editor that allows you to run a quick accessibility test on content you have created within the Editor, including text, images, and hyperlinks.  Anywhere the Rich Content Editor is found — when you are creating a Canvas content page, an Assignment prompt, a Discussion prompt, or the like — the Accessibility Checker will appear in the toolbar, normally at the far right.   With this tool, you can catch common errors that make Web content difficult to access for users with disabilities, and you can easily correct those errors as well before you save and publish your content. Once you have entered content into the Rich Content Editor, just click the Accessibility Checker icon to receive instant feedback.

 

Accessibility Checker icon

The Accessibility Checker icon, shown here within the context of creating a new Canvas content page

 

Example 1: Creating Accessible Text

Text that is too small, too light, or of a color that does not contrast well with its background may be difficult to read for users with visual impairments. The Accessibility Checker can detect these problems and give you a chance to correct them.

 

Example of difficult-to-read text

In this example, the user has chosen light red text against a yellow background. The low level of contrast makes reading difficult.

 

Dialog box with color picker

When the Accessibility Checker icon is clicked, a dialog box appears warning the user that the contrast between text and background is too low. A color picker is provided for the user to change the text color to something with better contrast.

 

Different text color chosen in color picker

The user can now select dark text in the color picker and click the Apply button to apply it to the text in the Rich Content Editor.

 

Dialog box showing solved accessibility issue

The Accessibility Checker now informs the user that the accessibility issue has been fixed.

 

Example 2: Creating an Accessible Table

To be accessible for users with screen-readers, all tables should have a caption that describes their contents, and a row or column that is designated as the table header for the screen-reader to identify. If you create a table using the Table tool in the Rich Content Editor that lacks these attributes and then click the Accessibility Checker icon, it will warn you.

Table without caption or header row

This table has no descriptive caption and no designated header row.

 

Dialog box for adding caption to table

When the Accessibility Checker encounters more than one issue, it will address them one at a time. Here, it begins by asking you to add a caption to the table.

 

Caption applied to table

When you enter the caption and click Apply, it is automatically added to the table.

 

Dialog box for adding table header

The next issue is the lack of a table header.

 

Header row chosen and applied to table

Here, we choose Header row from the drop-down menu and click Apply. This designates the top row (“Composer” and “Period”) as the header for the columns of the table.

 

Dialog box showing successful resolution of accessibility issues

All issues are now cleared.

 

Example #3: Accessible Images

Images uploaded using the Rich Content Editor should have alternative text (alt text) describing their content for use by screen readers, unless they are specifically designated as decorative. The Accessibility Checker will flag pictures that lack alt text, but in fact Canvas’ image uploader is designed to prevent you from uploading pictures that lack alt text in the first place, even without the use of the Checker.

Uploading new image in content page

In this example, a user attempts to upload a new image to embed in the content page.

 

Image of koala selected to upload

The user selects an image that has no alt text associated with it.

 

Upload button disabled due to lack of alt text

Before embedding the image, Canvas’ image uploader requires the user either to enter alt text or to mark the image as “decorative”. Until the user does so, the Upload button is disabled.

 

Alt text entered in dialog box

Once the user enters alt text or marks the image as “decorative,” the Upload button is enabled.

 

Picture of koala on branch embedded in content page

The image can now be embedded.