Design PLUS: How to use the built-in Accessibility checking options

Shanay Murdock

Sep 24, 2024

420

Start by navigating to the page that you want to check

Select Pages on your course navigation menu.
Click on the name of the page you want to check.
Press the Edit button on the top right of your screen.

Open the DesignPLUS Accessibility Checker

You should now be on the page editing interface (this is where you go to change the text of your page), also known as a Rich Content Editor (RCE). Click on the rocket ship icon at the top right of your screen to open the Cidi Labs DesignPLUS Sidebar.
Quick tip: If you prefer using keyboard shortcuts, you can use ALT + SHIFT + D to launch the Sidebar.
On the DesignPLUS Sidebar, click on the Accessibility tab along the top.

DesignPLUS Accessibility and Usability Tool

Use the DesignPLUS Accessibility Checker

If there are any concerns in any of the six sections (Contrast Checker, Heading Checker, Image Alt Checker, Link Checker, Math Checker, or Table Checker), you will see a red warning icon with a number representing the need to check these sections for recommended accessibility improvements.

Contrast Checker

The first option is to check your contrast in the Contrast Checker. This will check that text and background colors have at least a 4.5:1 ratio for normal text and a 3:1 contrast ratio for larger text such as headers. This tool lets you use a slider to adjust the text color until it passes and provides a preview of the changes.

Contrast Checker

After making adjustments using the Sidebar, the ratio will change, and previews for Normal and Large text will change from red to green if the adjusted contrast passes the appropriate ratio threshold.

Click the Apply button after making your changes, and the changes will automatically apply to any relevant text sections.

Heading Checker

The second option is to check your headings using the Heading Checker. This will show all of your headings, their corresponding heading formats (e.g. H1, H2, H3, H4, H5, and H6), and the alignment of nested headings. If a heading is highlighted in yellow, the Sidebar detects there are misalignments in your heading structure.

Headings should only be used to indicate structural separations of text by content and context. Use paragraph text when writing our blocks of text, and use the built-in formatting tools when you need to make text stand out. It's a universal best practice to use only one (1) H1 heading per page.

Use the left and right arrows to properly nest headings (e.g. H2 should be nested only under an H1 if being used and H3 headings should be nested under H2 headings). You should not skip levels of headings (e.g. do not place an H3 heading directly below an H1 heading; rather, use an H2 heading directly below an H1 heading).

Hover your mouse over the yellow and black question more or red and white exclamation point warning to receive information about what problem was detected.

Image Alt Checker

The third option is to check your images through the Image Alt Checker. This will show all of your images on the page. Under each image is an Alt Text box, you must use this box to describe what the image represents or contains so that screen reader technologies can describe the image to a user. If this is simply a decorative image, select the Decorative check box which indicates to screen readers that the content is not imperative for a user to view to understand the material.

Link Checker

The fourth option is to check your links using the Link Checker. This will show all of the links included in your page. Your links should make sense when presented out of context. You can use the Link Checker to look at your links out of context and update the link text to be descriptive of what the link leads to.

Next to the editable text cursor icon, add a description of where the link goes. The text field with the cursor icon is the text or description of where the link leads (e.g. Google), and the text field with the chain link icon is the URL you are directing your users to visit (e.g. https://google.com).

Math Checker

The fifth option is to check any mathematical text or formulas using the Math Checker. This allows a user to review, add, or update alt text for math elements on a page and make such elements accessible to students using assistive technologies.

Best Practices: Be default, expressions written in LaTeX in the Rich Content Editor will use LaTeX for their alt text but it is not necessarily clear when read by screen readers and other assistive technologies. Be sure to review your alt text for readability.

Table Checker

The sixth option is to check any tables on your page using the Table Checker if you are including any text or data tables. This tool assists with checking for table headers, adjusting table header directions, and converting tables to columns where appropriate.

Best Practice: Tables are meant to be used for tabular data rather than page layout. Consider using columns if you are using tables simply to structure content.