Introduction
The DesignPLUS Accessibility/Usability Checker from Cidi Labs helps you create accessible, inclusive content directly within Canvas. The Accessibility Checker scans your course materials for common accessibility issues and provides step-by-step guidance on how to fix them.
Whether you're working with text, images, links, tables, or equations, the checker walks you through what needs attention and how to address it. For example, if your text doesn’t meet contrast standards, it shows you how to adjust the colors. If your headings aren’t properly structured, it explains how to fix the hierarchy. You’ll also get prompts to add alt text to images, improve link descriptions, format math content accessibly, and ensure tables are readable by screen readers.
Instead of leaving you to interpret technical standards on your own, the Accessibility Checker simplifies the process with actionable instructions you can follow immediately. By using it, you’re not just meeting accessibility guidelines—you’re making your content more usable and inclusive for everyone.
1. Access your Canvas course.
Visit a Canvas course containing content items which you would like use with the DesignPLUS Accessibility/Usability Checker.
Choose a content item from your course to edit using DesignPlus.
Legacy Design Tools and DesignPlus can be used with the following content items:
- Pages
- Assignments
- Discussions
- Quizzes (Classic)
- Announcements
- Syllabi (Canvas native)
2. Select Edit.
Click the Edit [1] button in the top right corner of the content item.
3. Select rocket ship icon.
Click on the red rocket ship icon [1] on the upper right side. It may take a moment for the icon to load and appear.
There is a keyboard shortcut which can be used alternatively to open the sidebar.
- Alt-Shift-D (PC)
- Option-Shift-D (Mac)
4. Select person icon.
Click on the person icon [1] that includes an red exclamation point. If there is no exclamation point DesignPlus has not identified any accessibility/usability issues.
Once either of the icons have been clicked, a list of accessibility tools will become visible.
5. Select flagged tools
Tools that need accessibility updates are marked with a red notification badge.
Select any flagged tool to view step-by-step instructions for fixing the issues it identifies. For example, the Link Checker shows 6 items [1] to review. Selecting it opens guided steps for updating link text to meet accessibility requirements.
This same process applies to any tool with a red notification badge.
The sections below describe each DesignPLUS accessibility tool and the actions you can take to resolve the issues they identify.
Accessibility (Visual) Tools
Visual tools focus on accessibility requirements related to color, structure, and alternative text.
Contrast
Checks whether text and background colors meet WCAG contrast requirements (4.5:1 for normal text and 3:1 for large text).
To fix this: Use the color slider to adjust text color until the preview turns green, indicating sufficient contrast. Select Apply to save your changes.
Heading
Verifies proper heading structure (H1H6) and logical nesting.
To fix this: Use only one H1 per page and nest headings in order (for example, H2 under H1, H3 under H2). Use the sidebar arrows to adjust heading levels.
Image Alt
Checks that images include meaningful alternative text.
To fix this: Add alt text that describes the purpose of the image. If the image is decorative, mark it as decorative so its ignored by screen readers.
Link
Checks whether link text is descriptive and makes sense out of context.
To fix this: Replace vague link text (such as "Click here") with descriptive phrases (for example, "Visit the Canvas Help Center"). Verify that URLs are correct.
Math
Reviews math expressions to ensure they include accessible alternative text.
To fix this: Add or edit alt text for math elements. Ensure LaTeX or MathML expressions can be read by screen readers.
Table
Checks table structure and header usage.
To fix this: Add appropriate headers, specify header direction (row or column), and convert layout tables into columns if they are used only for visual design.
Usability Tools
Usability tools help improve layout, readability, and navigation so your content is easier to use and understand.
Heading Structure
Checks whether headings are used consistently to organize content.
To fix this: Use headings to break up long sections of text and guide users through the page in a logical order.
Content Length
Identifies pages with long or dense content that may overwhelm users.
To fix this: Break long pages into smaller sections or multiple pages. Use headings and spacing to improve readability.
Button Usage
Checks whether buttons are used consistently and for meaningful actions.
To fix this: Use buttons for key actions (for example, Start quiz) and label them clearly. Avoid using buttons for decorative purposes.
Spacing and Layout
Reviews spacing between elements to ensure visual clarity.
To fix this: Use padding and margins to separate content blocks. Avoid cluttered layouts that may confuse users.
Navigation Aids
Checks whether users can easily find and move between important content.
To fix this: Add anchor links, back-to-top buttons, or section menus for long pages. Use consistent navigation patterns across modules.
6. Complete Accessibility Checker
Once you have followed the instruction prompts within each tool, you will have completed the using the Accessibility Checker in DesignPLUS, and you should no longer see red notification flags on any of the tool icons.