How do I use the Accessibility Checker in the Rich Content Editor?

Document created by Canvas Doc Team Employee on Oct 28, 2017Last modified by Canvas Doc Team Employee on Nov 18, 2017
Version 2Show Document
  • View in full screen mode

The Rich Content Editor includes an accessibility tool that checks common accessibility errors within the editor. This tool can help you design course content while considering accessibility attributes and is located in the Rich Content Editor menu bar.

This tool only verifies content created within the Rich Content Editor. You may also use other accessibility tools to verify additional content in Canvas.

All components are designed according to the template set in the institutions Theme Editor and verifies the following accessibility rules:

  • Table captions: Tables should include a caption describing the contents of the table.
  • Table header scope: Tables headers should specify scope and the appropriate structure.
  • Table header: Tables should include at least one header.
  • 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.
  • 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 not contain more than 120 characters.
  • 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.
  • Large text contrast: Text larger than 18pt (or bold 14pt) should display a minimum contrast ratio of 3:1.
  • Small text contrast: Text smaller than 18pt (or bold 14pt) should display a minimum contrast ratio of 4.5:1.

Note: For text contrast, the Accessibility Checker verifies color using the same calculations as the WebAIM tool. However, currently the checker only verifies against Theme Editor templates with High Contrast Styles. To verify color contrast, enable High Contrast Styles in user settings before enabling this feature.

Open Rich Content Editor

Open Rich Content Editor

Open the Rich Content Editor using one of the Canvas features which support the Editor.

Open Accessibility Checker

Open Accessibility Checker

Click the Accessibility Checker icon.

Note: Depending on the width of your browser window, you may have to scroll the menu bar horizontally to view the icon.

View Issues

  View Issues 

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 Learn more link [4].

View Additional Issues

View Additional Issues

If the Rich Content Editor contains more than one issue, you can view all issues by clicking the Previous or Next buttons.

Apply Fix

Apply Fix

To correct an issue, complete the task as noted in the sidebar [1]. For instance, if the issue requires a caption be added to a table, the sidebar displays a text field for you to enter a caption.

When you are finished with your changes, click the Apply Fix 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.

Confirm Fix

Confirm Fix

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.

You are here
Table of Contents > Rich Content Editor > How do I use the Accessibility Checker in the Rich Content Editor?
1 person found this helpful

Attachments

    Outcomes