Accessibility Checker in the RCE
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, tables, 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.
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 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.
Note: The Accessibility Checker is not fool-proof; it is still necessary to double check your content to make sure it is ADA compliant.
The Rich Content Editor includes an accessibility tool that checks common accessibility errors within the editor. You can use the Accessibility Checker to design course content while considering accessibility attributes. This tool only verifies content created within the Rich Content Editor. You may use other accessibility tools to verify additional content in Canvas.
All accessibility components retain the parameters set by your institution's Theme Editor template. The Accessibility Checker verifies the following accessibility rules:
- Adjacent links: Adjacent links with the same URL should be a single link. This rule verifies link errors where the link text may include spaces and break the link into multiple links.
- Heading paragraphs: Headings should not contain more than 120 characters.
- Image alt text: Images should include an alt attribute describing the image content.
- Image alt filename: Image filenames should not be used as the alt attribute describing the image content. Currently, files uploaded directly to Canvas create a redirect that does not properly verify image filenames.
- Image alt length: Alt attribute text should contain fewer than 120 characters.
- Large text contrast: Text larger than 18pt (or bold 14pt) should display a minimum contrast ratio of 3:1.
- Lists: Lists should be formatted as lists.
- Sequential headings: Heading levels should not be skipped (e.g. H2 to H4). However, the tool does not check if the first header starts with H2 or whether the headings are sequential with the rest of the content in the page. Tables do not begin with H1, which is designated for the page title.
- Small text contrast: Text smaller than 18pt (or bold 14pt) should display a minimum contrast ratio of 4.5:1.
- Table captions: Tables should include a caption describing the contents of the table.
- Table header scope: Table headers should specify scope and the appropriate structure.
- Table header: Tables should include at least one header.
Note: For text contrast, the Accessibility Checker verifies color using the same calculations as the WebAIM tool and verifies against Theme Editor templates without High Contrast Styles. However, High Contrast Styles must be enabled for verification if a link color is overwritten manually in the Rich Content Editor.
1. In the Rich Content Editor, click the Accessibility Checker icon.
2. When an issue is detected, the Rich Content Editor highlights the affected area [1]. The sidebar displays the accessibility attribute [2] and an explanation of the error [3]. To learn more about the accessibility attribute, click the Information icon [4].
If the Rich Content Editor contains more than one issue [1], you can view all issues by clicking the Previous or Next buttons [2].
3. To correct an issue, complete the task as noted in the sidebar [1]. For instance, if the issue requires that alt text be added to an image, the sidebar displays a text field for you to enter alt text.
When you are finished with your changes, click the Apply button [2].
The Accessibility Checker will apply the fix and display information for the next issue. Continue to review and fix any detected issues within the editor.
4. When all issues have been fixed, or if no issues are detected in the Rich Content Editor, the sidebar indicates that no issues exist and will close automatically.
