What is the Accessibility Checker and How Do I Use It?
What is the Accessibility Checker?
The Accessibility Checker is a tool found within the Rich Content Editor. It detects common accessibility issues within the editor. While designing your course content, the checker will identify and display how many errors were found and where precisely in the Rich Content Editor. This tool is used to ensure that your instructional content is accessible to students using a screen reader or those with low vision (needing high contrast for text, images, graphs, etc.).
In the image below, you will see the Rich Content Editor. Towards the bottom right of the Rich Content Editor, you will see:
- The Accessibility Checker button.
- The number of issues that were detected. (In this example, the Accessibility Checker identified 3 accessibility issues.)
After you click on the Accessibility Checker button, the sidebar menu will display. See the image below. You will notice the following:
- Which issue the Accessibility Checker has currently highlighted.
- The explanation of the issue.
- The area where you can resolve the issue.
- The Information Icon where you can learn more about that specific accessibility attribute.
Accessibility Checker Video Demonstration
You can ignore the part of the presentation below where David Lyons shows you how to turn on Accessibility Checker Notifications. That feature is a default setting in CSUF's implementation of Canvas, so you will not see that control in Course Settings.
The Accessibility Checker can only be utilized where you can use the Rich Content Editor. These are the following areas that use the Rich Content Editor:
- Pages
- Announcements
- Assignments
- Discussions
- Syllabus
- Classic Quizzes
12 Common Issues Detected by the Accessibility Checker
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 is recommended to 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.
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.
The Accessibility Checker does not have a feature to check the entire course. You can only check one textbox at a time.
Related Guides
- How do I use the Accessibility Checker in the Rich Content Editor as an instructor? (by Instructure)
- Canvas Release Screencast for the Accessibility Checker (by Instructure)
- How do I Adjust Color Contrast with the Accessibility Checker?
- How do I Fix the Adjacent Links Accessibility Issue in a Page?
- How do I add ALT text for an image in Canvas
- How do I create an accessible table in a Page?
- How do I make an accessible Heading and check it with the Accessibility Checker?
- How do I add useful Alt text to the hyperlinked image?
Article Summary
You have now learned a little about the Accessibility Checker, its location, how to utilize it, and what common accessibility issues this tool can detect within the Rich Content Editor.