Launch Cidi Labs Design Tools

How to use Design Tools' built-in Accessibility Checking options

Cidi Labs Design Tools gives instructors the ability to easily check the accessibility of their content pages.

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 theEditbutton on the top right of your screen.

Open the Design Tools Accessibility Checker

You should now be on the page editing interface (this is where you go to change the text of your page). Press therocket ship icon at the top right of your screen to open the Cidi Labs Design Tools panel on the right side of your screen.
Quick Tip: If you prefer to using keystrokes, you can use the keyboard shortcut Alt-Shift-D to access Design Tools.
On the Design Tools menu press theCheck Accessibility tab.

Using the Design Tools Accessibility Checker

If there are any accessibility concerns in any of the three sections (Heading outline, image check, and link check) you will see aneye icon which represents the need to check this section.

Heading Outline

The first option is to check your headings throughHeading Outline. This will show all of your headings and in what heading format (e.g., H2) they are currently in. If there is a green check mark next to your heading then it is set up properly! If there is a red X simply press either the left or right arrow keys until this icon changes to the green check mark.

Tip: Your headings should be in numerical order as you look down the page (e.g., H2, H3, H4 OR H2, H2, H2, H3). It does not matter how many headings of each type you have but, if you are adding a new size then levels should not be skipped (e.g., do not use H2, H2, H4, H2. Instead, use H2, H2, H3, H2).

Image Check

The second option is to check your images throughImage Check.This will show all of your images in the page. Under each image is a text box. You must use this text box to describe what the image is so a screen reader will be able to describe the image to a user. If this is simply a decorative image select thedecorative image box.

Link Check

The last option is to check the links on your page throughLink Check.This will show all of the links included in your page. Your links should make sense when presented out of context. You can use this link checker to look at your links out of context and update any text needed by pressing thepencil iconnext to each link.

When you have finished making your page more accessible, make sure to press the garnetSave button at the bottom of the page to save your changes!

How to use Design Tools to check your color contrast

If you do not already have the Design Tools menu open on your content page, navigate to the content page, click theEditbutton, and then Press therocket ship icon at the top right of your screen to open the Cidi Labs Design Tools panel on the right side of your screen.
Quick Tip: If you prefer to using keystrokes, you can use the keyboard shortcutAlt-Shift-D to access Design Tools.

In the rich content editor, highlight the text that you want to check.
In the Design Tools menu, selectCustomize the Style.
Select Current Element Style >Colors.
If the color contrast for the content that you have selected is not accessible, then you will see a red "Fail" warning. In this case, you will need to adjust the text or the background color to have greater contrast.

If the color contrast for the content that you have selected is accessible, then you will see a green "AA" or "AAA" result. You do not need to change anything.
When you have finished making your page more accessible, make sure to press the garnetSave button at the bottom of the page to save your changes!