Using UDOIT 3.0 for Accessible Images in Canvas

Accessibility guidelines require alternative text to be included with digital images. This helps students with visual impairments or cognitive disabilities to understand the purpose of what is shown because screen readers will read the alternative text when an image is encountered. Alternative text is also important if an image is unable to load because it will display in place of the image, and it also helps search engines factor in the purpose of the page and its contents. As you add images to your course, keep the following image guidelines in mind:

• The "alt" attribute is required on images that are not decorative.
• Alternative text should be descriptive and succinct - no more than 125 characters in length.
• Do not include redundant phrases like "image of" or "graphic of" because screen readers already announce a graphic.
• Images should not contain a placeholder in place of alternative text (spaces, a file name, etc.).

Using UDOIT Course Scan to Fix Alt-Text Errors

To access UDOIT, click the menu option on the main Canvas navigation bar that is titled Course Accessibility Checker (UDOIT), which is an option that is available in every course. When you open UDOIT an accessibility scan automatically starts. The image below depicts what your screen might look like if UDOIT finds errors. As you can see in this example, UDOIT considers missing "alt" attributes on images one of the easiest to fix.  If you click anywhere on an error line, a list of relevant errors will open for you to work on them. 

The image below is a partial screenshot of alt-attribute errors. Click the Review button next to any error to see more information about it and to fix the error without leaving UDOIT.

The image below points out four areas that should be considered when fixing alt-text errors. Area 1 is where you will be fixing the error, and Area 2 will help you determine how to describe the image. Area 3 offers an option to mark an issue resolved without taking further action, and Area 4 provides options to move on to other issues or close the screen. 

In the example below, fixing the error would be as simple as looking at the image that is located in Area 2 of the screenshot, and then typing a description in the New Alt Text box in Area 1 before clicking the Save button right below it. Unfortunately, in this screenshot, you can't see the full image. However, if you could access the scroll function on the image, you would be able to see all of it. As a result, you would be able to see that an appropriate description would be "A close up of a long-stemmed pink rose in full bloom with the background blurred." When troubleshooting alt-text errors, it may be tempting to mark an image as decorative in an effort to save time and simply get rid of the error. However, you should not do so unless the image truly does not provide any meaning to your content. Otherwise, your content will not meet accessibility standards. 

Now, let's focus on Area 2 of the screenshot below. In this example, the image is clear. However, if the picture is too big or it does not display in a way that you can assess what a good description would be, you have two options to help you troubleshoot.  First, right below the image, you will see a link to the page where the image is located. If you click on that link, the page will open in a new tab so you can see how the image is placed in the contents.  If you are knowledgeable about HTML, the second option that you may find useful is the HTML link right below it. Clicking the HTML link replaces the image shown with the HTML behind it. You cannot change the HTML from this screen, but you may find it useful to see the file name or the file's location when trying to troubleshoot a problem. 

The most important thing that you should know about Area 3 in the screenshot below is that unless you are an expert in HTML and accessibility guidelines, you should not click the Mark as Resolved option. If you do so, there is a high chance that your content is not accessible to screen readers, and UDOIT will not flag the problem on subsequent scans. Once you have resolved an issue, you can use the options in Area 4 to move on to the next or previous issue, or you can simply choose to close the screen.

Fixing Errors While Editing

Perhaps, the easiest way of fixing errors is to fix them as you develop your content.  When working in the Canvas Rich Text Editor, the Canvas accessibility checker is constantly running in the background. Before saving your pages, look to see if there is a number next to the accessibility icon. If there is, the number indicates the number of errors you have on your page.

Click on the accessibility icon to fix your errors. As you work through them, the problematic areas of your content will become highlighted in blue. Simply follow the prompts and then click the Apply button.