Table of Contents

Guide to Using Accessibility Checker Tools

Jason Carroll Updated by Jason Carroll

Overview

Ensuring your Canvas content is accessible is important for creating an inclusive learning environment. Sometimes It's best to use a mix of the Canvas built-in accessibility checker, Ally the LTI (Learning Tools Interoperability) tool, and other 3rd party tools like axe DevTools and WAVE for a complete accessibility check. The Canvas checker is great for basic issues but might miss the more complex ones. External tools like axe and WAVE provide a deeper analysis and can handle a broader range of issues, including the tricky parts of coding. Combining these tools means you're doing a more thorough check of your content. This guide will give you step-by-step instructions on how to get started with the Canvas checker, along with the mentioned plugins.

Keep in mind that these external tools are designed to evaluate the entire webpage for accessibility issues, not just the portion of the page content that you can edit. They might highlight accessibility concerns related to the Canvas UI that are outside of the page content. These issues can be overlooked for your purposes, as your control is limited to the page content itself. Therefore, focus your efforts on resolving any accessibility issues related to the content that you can directly modify in the page editor.

Using the Canvas built-in Accessibility checker

The Accessibility Checker in the Rich Content Editor helps spot typical accessibility issues. Some of the top features as part of the Canvas accessibility checker:

  • Image Alt Text: This feature makes sure every image has a description that's easy for screen readers to use. Very important for accessibility.
  • Text Contrast: Verifies that text meets minimum contrast ratios.
  • Sequential Headings: Checks that your headings follow in a logical order, which helps keep everything organized and easy to follow.

For a complete list of features built into the accessibility checker, visit “How do I use the Accessibility Checker in the Rich Content Editor as an instructor?”

The Canvas accessibility checker is great for crafting course material with accessibility in mind, but keep in mind, it only checks what's made in the Rich Content Editor. For other stuff in Canvas, you'll want to use different accessibility tools.

How to use the Canvas accessibility checker

  1. View accessibility checker notifications

If the Rich Content Editor spots any accessibility problems, you'll see an indicator pop up from the Accessibility Checker. Click on the Accessibility Checker icon to see what the issues are.

  1. View issues

If there's a problem, the Rich Content Editor will light up the area with the issue. Over in the sidebar, you'll see the accessibility attribute that's causing the problem and a breakdown of what's wrong. Want more details on the accessibility attribute? Just hit the Information icon.

When there's more than one issue in the Rich Content Editor, you can check out all the issues by clicking the Previous or Next buttons.
  1. Apply fix
  1. To fix an issue, just follow the instructions in the sidebar. Say the problem is a missing alt text for an image; the sidebar will show a text field for you to type it in.
  2. After you've made your changes, hit the Apply button.

The Accessibility Checker will take care of the fix and then show you what's next. Keep going through and sorting out any issues it finds in the editor.

  1. 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.
Once the Accessibility Checker in Canvas confirms that no issues exist and closes automatically, it's advisable to perform a manual review of your content. This step is crucial to identify any potential accessibility concerns that automated tools might miss, such as ensuring logical reading order, adequate color contrast in non-text elements, and the clarity of language. A thorough manual check helps ensure that your content is not only technically compliant but also practically accessible to all users.

Ally

Ally is a LTI web accessibility checker tool that can be accessed within the eCornell instance of Canvas LMS.

Learn how to use Ally at kb: Using the Ally Report in a Course

Using 3rd party tools for accessibility Testing

While this article focuses on axe DevTools and WAVE, there are many other online tools available that can also help make your content more accessible.

What is axe DevTools?

axe DevTools is a Google Chrome extension that assists in identifying and fixing common accessibility issues on web pages. It's an automated tool that can help you ensure your Canvas content is accessible to all users.

How to Get Started with axe DevTools
  1. Install the Extension:
    1. Visit the Chrome Web Store and search for 'axe DevTools'.
    2. Click 'Add to Chrome' to install the extension.
  2. Open Canvas in Chrome: Navigate to your Canvas course page in Chrome.
  3. Open the browser’s Developer Tools: To open the developer console in Google Chrome, open the Chrome Menu in the upper-right-hand corner of the browser window and select More Tools > Developer Tools OR right-click on the Canvas page and click Inspect.
    You can also use Option + ⌘ + J on the keyboard.
  4. Open the axe DevTools tab, then click the axeDeb tab to open the tool.
  1. Choose Scan ALL of my page.
  1. Review Results: Once the analysis is complete, axe DevTools will display a list of accessibility issues found.
  2. Make Necessary Changes: Use the suggestions provided by axe DevTools to correct any identified accessibility issues in your Canvas content.
  3. Re-analyze: After making changes, re-run the analysis to ensure all issues have been addressed.

For more information, please visit “Get started: axe DevTools® browser extension”

What is WAVE?

WAVE is a browser extension that evaluates the accessibility of web content. It provides visual feedback and detailed insights into potential accessibility issues.

How to get started with WAVE
  1. Install the Extension
    1. Download the Chrome Wave Evaluation Tool. Click 'Add to Chrome' to install the extension.
  2. Open Canvas in Chrome: Navigate to your Canvas course page in Chrome.
  3. Run WAVE
    1. Click on the WAVE extension icon in your browser’s toolbar, typically located in the upper right corner of the Chrome browser window. WAVE will automatically analyze the page's accessibility.
Don't see the Chrome extension in your browser toolbar? Try clicking the Extensions icon (it looks like a puzzle piece), then click the pin icon to add the WAVE extension to the browser tool bar.
  1. Review the Feedback
    1. WAVE displays various icons and indicators on the page to highlight accessibility issues.
    2. Click on the icons for detailed explanations and suggestions for improvement.
  2. Implement Changes: Make the necessary adjustments to your Canvas page based on WAVE's feedback.
  3. Recheck with WAVE: After updating your content, use WAVE again to ensure all accessibility issues have been resolved.

For more information, please visit the WAVE website.

Conclusion

Regular use of the Canvas accessibility checker, along with 3rd party tools like axe DevTools and WAVE can significantly enhance the accessibility of your Canvas courses. By following these steps, you can proactively ensure your content is accessible to all students, making your courses more inclusive and effective.

How did we do?

H5P Content Types and Accessibility

Contact