Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 9 Next »

IDD KB How-to-Guide

Improving Content Accessibility with the DesignPLUS Tools

Accessibility is an important part of course design as it focuses on providing equity in access to materials and information, and especially to ensure that people using assistive technology can complete crucial tasks.

DesignPLUS offers several tools to help with making content more accessible for students. The tools include the Contrast Checker, Headings Checker, Image Alt Checker, Link Checker, Math Checker, and the Table Checker tool. Each of these checkers and tools have easy ways to quickly adjust your content to make it more accessible, creating a much more user-friendly learning experience for all your learner types.

This article provides step-by-step instructions on how to use the most frequently used accessibility tools in the DesignPLUS Sidebar (scroll down or click on the link to view a specific section):

View this tutorial video to explore the capabilities of the accessibility tools offered in DesignPLUS.

Tip!

You can click on the images in this article to see them larger and with more detail.


Accessing the Accessibility and Usability Tools

  1. To access the Accessibility tool in DesignPLUS




    1. Click the Accessibility icon at top of the sidebar

    2. If you have issues on your page you may see and error indicator in the icon

    3. Where errors occur, the tool to correct it will have an error indicator

    4. Click on the tool where errors occur


Back to List


Contrast Checker Tool

The Contrast Checker tool will check the color contrast of any text on the page. If the font color is too light it will present a problem for viewing with a screen reader due to the lack of contrast.

  1. If you see an error indicator for the Contrast Checker tool, click on the icon to open the tool.



  2. When the tool opens:



    1. At the top you will be provided some guidelines on the contrast rations that make content viewable

    2. The error that is present will be displayed under the tab marked with a red exclamation point.

    3. Here we see the color contrast is affecting both large and normal text sizes

    4. Looking at the page we see that the yellow font color selected for the list is not viewable for most people

  3. Adjust the color of the text using the slidebar under the ratio boxes,



    1. Slide the button to the left

    2. As you adjust the color, the ratio will change

    3. When a ratio is acceptable the text error box will change to green
  4. When the contrast ratio is acceptable for both Normal and Large text, the Apply button will appear.



  5. Click the Apply button (a check will appear) and the text in your page will be corrected.



Back to List

Heading Checker Tool

Headings are meant to be a hierarchical outline of the content on your page. For Screen reader users, ensuring that your headings help group content in this manner is critical. However, we often select a heading style for its appearance rather than its hierarchical position.

  1. If you see an  error indication for the Heading Checker tool, click on the icon to open the tool.



  2. When the tool opens,



    1. You will see a listing of the headings in the order they appear, and an indicator of what level they are.

    2. Headings that are not in the right order or position hierarchically will be identified in red.
  3. Click the appropriate arrow in front of the heading to move it higher or lower in order.



  4. The heading and the style applied to that level of heading will be corrected and be identified in the tool.



Back to List

Image Alt-Text Checker Tool

In pages where images are used, it is important to provide descriptive information about what the image presents for those who use screen readers. While you may not get any red flags on a page that uses images, it is still a good practice to use this tool to ensure that the page is accessible.

  1. Click on the Image Alt-Text Checker tool un the Accessibility tools, even if no error flag appears.



  2. When the tool opens,



    1. At the top you will be provided a short explanation of what Alt-Text is used for.

    2. The images that appear on your page will be displayed in a column under the guidance.

    3. For each image a warning message will appear if you have not either provided alt-text or marked the image as decorative.

    4. If you have entered a file name as the alt-text, the tool will remind you that this is not a good practice.

  3. Enter your selections:

    1. If the image is purely decorative, you can check the tick box on the upper right side

    2. If the image is something relevant to the content on the page, enter a description in the Alt-text box.

When you have made your entries, the error message will disappear, and the page will be ready for a screen reader to interpret the images for a student.

Tip!

Avoid using the phrase “An image of” in your alt-text description.

Do not use the file name in the alt-text.


Back to List



Summary of Steps
 Accessing the Accessibility and Usability Tools
  1. To access the Accessibility and Usability tool in DesignPLUS
    1. Click the Accessibility icon at top of the sidebar
    2. If you have issues on your page you may see and error indicator in the icon
    3. Where errors occur, the tool to correct it will have an error indicator
    4. Click on the tool where errors occur
 Contrast Checker Tool
  1. If you see an error indicator for the Contrast Checker tool, click on the icon to open the tool.
  2. When the tool opens:
    1. At the top you will be provided some guidelines on the contrast rations that make content viewable
    2. The error that is present will be displayed under the tab marked with a red exclamation point.
    3. Here we see the color contrast is affecting both large and normal text sizes
    4. Looking at the page we see that the yellow font color selected for the list is not viewable for most people
  3. Adjust the color of the text using the slidebar under the ratio boxes,
    1. Slide the button to the left
    2. As you adjust the color, the ratio will change
    3. When a ratio is acceptable the text error box will change to green
  4. When the contrast ratio is acceptable for both Normal and Large text, the Apply button will appear.
  5. Click the Apply button ( a check will appear) and the text in your page will be corrected.
 Heading Checker Tool
  1. If you see an error indication for the Heading Checker tool, click on the icon to open the tool.
  2. When the tool opens,
    1. You will see a listing of the headings in the order they appear, and an indicator of what level they are.
    2. Headings that are not in the right order or position hierarchically will be identified in red.
  3. Click the appropriate arrow in front of the heading to move it higher or lower in order.
  4. The heading and the style applied to that level of heading will be corrected and be identified in the tool.
 Image Alt-Text Checker
  1. Click on  the Image Alt-Text Checker tool un the Accessibility tools, even if no error flag appears.
  2. When the tool opens,
    1. At the top you will be provided a short explanation of what Alt-Text is used for.
    2. The images that appear on your page will be displayed in a column under the guidance.
    3. For each image a warning message will appear if you have not either provided alt-text or marked the image as decorative.
    4. If you have entered a file name as the alt-text, the tool will remind you that this is not a good practice.
  3. Enter your selections:
    1. If the image is purely decorative, you can check the tick box on the upper right side
    2. If the image is something relevant to the content on the page, enter a description in the Alt-text box.
  4. When you have made your entries, the error message will disappear, and the page will be ready for a screen reader to interpret the images for a student.



Visit the DesignPLUS Training Series Tutorials for more videos. For more step-by-step guides, visit the DesignPLUS User Guide. (These links will overwrite this page.)



  • No labels

Didn't find what you are looking for? Raise a request