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

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

Open the Design Tools Accessibility Checker

1. You should now be on the page editing interface (this is where you go to change the text of your page). Press the rocket 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.
2. On the Design Tools menu press the Check 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 an eye icon which represents the need to check this section.

 Heading Outline

The first option is to check your headings through Heading 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 through Image 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 the decorative image box.

Link Check

The last option is to check the links on your page through Link 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 the pencil icon next to each link. 

When you have finished making your page more accessible, make sure to press the garnet Save 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 the Edit button, and then Press the rocket 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.

1. In the rich content editor, highlight the text that you want to check.
   
2. In the Design Tools menu, select Customize the Style.
   
3. Select Current Element Style > Colors.
   
4. 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.
   
5. When you have finished making your page more accessible, make sure to press the garnet Save button at the bottom of the page to save your changes!