Canvas (Accessibility) - Using the UDOIT Cloud Accessibility Tool

The UDOIT Cloud Course Accessibility checker is available to instructors in all Canvas courses in the University of Wisconsin System Digital Learning Environment (excluding UW-Madison). UDOIT is designed to assist faculty with improving the accessibility of their Canvas courses. It scans Canvas courses, provides easy-to interpret suggestions to improve the accessibility of the course, and can automatically repair many common accessibility issues.

For an overview of the tool, see the UDOIT Cloud Accessibility Tool website or watch this video from Cidi Labs: 


This guide has been updated for UDOIT 3.0. For an overview of the differences between UDOIT 3.0 and previous versions, see What's New in Version 3.0.

For more information about using UDOIT, see the UDOIT Cloud 3.0 User Guide from Cidi Labs. 

Contents

Should I Use UDOIT or the Canvas Accessibility Checker?
Finding Accessibility Issues
Resolving Accessibility Issues
Tips for Common Errors
Tips for Common Suggestions

Should I Use UDOIT or the Canvas Accessibility Checker?

The UDOIT Cloud Accessibility Tool is designed to compliment Canvas's native Accessibility Checker, and can be used in combination with it. Each tool has its own particular strengths.

Canvas Accessibility Checker

  • Scans content within the Rich Content Editor
  • Scans one page at a time
  • Looks for 11 accessibility issues

UDOIT

  • Scans published and unpublished html content
  • Scans published files
  • Scans entire course at one time
  • Looks for 21 accessibility issues 

Finding Accessibility Issues

As an instructor, you can follow these steps to find potential accessibility errors and suggestions in your Canvas courses:

1) Log in to Canvas at https://uws.instructure.com or from your institution's custom URL. 

2) Use Canvas's Dashboard or Courses page to navigate to any course where you have the Teacher role.

3) In the course navigation menu on the left, select Course accessibility checker (UDOIT). Only users with a Teacher or Administrator role will see this link in the course navigation.

Canvas course navigation menu with "Cloud accessibility checker (UDOIT)" highlighted.

4) You may get a prompt indicating "Cidi Labs UDOIT Cloud is requesting access to your account." Click Authorize.

5) UDOIT will automatically scan your course (which may take a minute or two) and list Errors, Suggestions. and Ways to Get Started.

UDOIT course accessibility checker in Canvas with Errors and Ways to Get Started.

6) Click any of the radio buttons under Ways to Get Started to see a subset of the Errors and Suggestions for the course:

  • Easiest to fix
  • Errors only
  • All open issues
  • By issue type
  • By content type

7) Otherwise, scroll down and click any of headings beneath Errors or Suggestions to start fixing issues.

19 Errors and 18 Suggestions

Errors are issues which MUST be fixed to ensure equal access. Suggestions are issues which SHOULD be fixed to ensure equal access.

Common issues are listed below in the Tips for Common Errors and Tips for Common Suggestions sections.

Resolving Accessibility Issues

UDOIT makes it easy to fix most Canvas course accessibility issues from a single page.

8) Clicking on an Error or Suggestion will bring up a page with a description of the issue, a preview of where it appears in the course, and a text entry box or menu to fix the issue. Follow the prompts on the screen to resolve the issue (usually by entering new text or selecting a choice from a menu).

In this example, the alternative text provided for an image repeats the filename of the image instead of giving a full description. UDOIT has provided a description of why this is an issue, and a preview of the image in question (in this case, it's a screen shot the instructor took of the Canvas course navigation). UDOIT provides a text entry box titled "New Alt Text" to allow the instructor to directly fix the issue. 

Popup window titled "Alternative Text should not be the Image Filename" with a Preview window for the Canvas course navigation and a "New Alt Text" text entry box.

UDOIT also provides a "Manual Resolution" checkbox to indicate when an issue has been resolved outside of UDOIT.

Manual Resolution check box

9) As you fix or manually resolve issues and review files in the course, the UDOIT Home page tracks your progress. It lists how many "Issue Fixed," "Manually Resolved," and "Files Reviewed" you have, and it updates the number of remaining Errors and Suggestions.

Screenshot of UDOIT Home page for a course listing 1 Issue Fixed, 1 Manually Resolved, 0 Files Reviewed, 18 Errors, and 17 Suggestions.

Continue fixing or manually resolving issues until your course has reached the desired level of accessibility.

Tips for Common Errors

Links should contain text

Because many users of screen readers use links to navigate the page, providing links with no text (or with images that have empty "alt" attributes and no other readable text) hinders these users. Please add descriptive text.

Base font tag should not be used.

The basefont tag is deprecated and should not be used. Investigate using stylesheets instead.

Blink tag should not be used.

The blink tag should not be used. Ever.

Insufficient text color contrast with the background. 

Text color should be easily viewable and should not be the only indicator of meaning or function. Color balance should have at least a 4.5:1 ratio for small text and 3:1 for large text. Warning: using UDOIT to fix one section of text may invalidate the contrast in nested sections of text that are not the same color.

Avoid using color alone for emphasis. 

When emphasizing text, you may use color with sufficient contrast as long as you also apply some other form of emphasis, such as bold or italics. This ensures that screen reader users are aware of the text's importance.

Document reading direction.

Changes in text direction in inline content should be indicated using any HTML element (for example, span) with a 'dir' attribute indicating left-to-right or right-to-left. For example, a Hebrew phrase within an English paragraph should have its own text direction indicated.

All ‘embed’ elements must have an associated ‘noembed’ element. 

Because some users cannot use the embed element, provide alternative content in a noembed element.

Font tag should not be used. 

The font tag is deprecated and should not be used. Investigate using stylesheets instead.

Headings should contain text.  

Sighted and screen reader users depend on headings to organize the content on the page. Headings should not be empty and should represent an accurate outline of the content.

No alternative text found

Alternative text (alt text) is an alternative (non-visual) way to describe the meaning of an image. Please provide a brief description of the image for a screen reader user. Note: alt text should be more than image file name.

Learn more at WebAIM.org: Alt Text Accessibility 

Alternative Text should not be the image filename 

Alternative text (alt text) is an alternative (non-visual) way to describe the meaning of an image. Simply repeating the image file name is not descriptive enough. Please provide a description.

Learn more at WebAIM.org: Alt Text Accessibility 

Alternative Text is more than the maximum allowed characters

Alternative text (alt text) is an alternative (non-visual) way to describe the meaning of an image. Although alt text should be descriptive, it should also be short, typically no longer than 80-125 characters.

Learn more at WebAIM.org: Alt Text Accessibility 

Alt text for images within links should not be empty.

Alternative Text (Alt Text) is an alternative (non-visual) way to describe the meaning of an image. Please provide a brief description of the image for a screen reader user. Note: It should not be the image file name. 

Learn more at WebAIM.org: Alt Text Accessibility 

Images should not have a placeholder as alternative text.

Any image that is not used decoratively or which is purely for layout purposes cannot have an 'alt' attribute that consists solely of placeholders. Placeholders include: nbsp ,   , spacer , image , img , and photo.

Learn more at WebAIM.org: Alt Text Accessibility 

Image elements should have an “alt” attribute.

Alternative Text (Alt Text) is an alternative (non-visual) way to describe the meaning of an image. Please provide a brief description of the image for a screen reader user.

Learn more at WebAIM.org: Alt Text Accessibility 

Decorative images should have empty alternative text. 

This image was marked as decorative in the Rich Content Editor, but the ALT attribute contains text. Please remove the alternative text or the decorative marking.

Learn more at WebAIM.org: Alt Text Accessibility 

Image description is too long.

Any image that has an 'alt' attribute that does not fully convey the meaning of the image should have a 'longdesc' attribute.

Marquee tag should not be used.

The marquee element is difficult for users to read and is not a standard HTML element. Try to find another way to convey the importance of this text

No table headers found. 

Table headers provide a description of the table structure for sighted and screen reader users.

No row or column scopes declarations found in table headers.

Scope declarations in headers organize and define table data by row/column for sighted and screen reader users.

Closed captions do not match course language.

While this video has captions, there are no captions available for your course language. While not imperative to fix, you have options:
  • If the video is in Kaltura, you can add and edit captions.
  • Contact the creator of the video and request captions in your course language be added.
  • Create captions yourself using a service like Amara (http://amara.org/).
  • Find a different video that has closed captioning for your course language.

Closed captions cannot be checked 

Videos used on online courses are required to have closed captioning. Unfortunately, some video services do not provide an API for checking captions and will need to be manually verified.

Multimedia objects should have a text equivalent

Videos used on online courses are required to have closed captioning. Unfortunately, automatic captioning (such as on YouTube or Kaltura videos) is not accurate enough for educational use. You have options:
  • If the video is in Kaltura, add captions and edit them to improve accuracy
  • Contact the creator of the video and request captions in your course language be added.
  • Create captions yourself using a service like Amara (http://amara.org/).
  • Find a different video that has closed captioning.

No closed captions found.

Captions should be included in the video to provide dialogue to users who are hearing impaired. Please note that videos that have been removed, deleted, or are Unlisted will also cause this error, and will need to be manually verified.

Closed captions were auto-generated.

Captions that are machine-generated by a service like YouTube or Kaltura are rarely if ever fully accurate and should not be relied upon for educational use. If the captions were created through Kaltura, the video owner can edit them to improve accuracy.

Tips for Common Suggestions

Links to multimedia require transcripts. 

Multimedia objects should be accompanied by a link to a transcript of the content.

Links to sound files need transcripts. 

Links to a sound file should be followed by a link to a transcript of the file.

Link has nondescript text. 

Links should be descriptive of the content they're linking to, such as 'Class Schedule' rather than 'schedule.html' or 'click here'.

Content length should not exceed 3000 words. 

For content longer than 3000 words, consider splitting it up into multiple documents. This makes it easier for students to process and retain the information. 

Input images should have an “alt” attribute 

Every form image button which has text within the image (say, a picture of the word 'Search' in a special font), should have the same text within the 'alt' attribute.

Headings should be used in content 

If appropriate, add headings to the page to organize the content for sighted and screen reader users. The headings should represent an accurate outline of the content.

Object interface must be accessible 

Object content should be assessed for accessibility. This object cannot be checked using automated tools, so it should be reviewed manually.

Object should have long description 

Objects might require a long description, especially if their content is complicated.

Object tag detected 

Multimedia embedded using the 'Object' tag may require the user to install a plugin for their web browser. This can create support and access issues for some users. Additionally, users on mobile devices may not be able to view the multimedia content at all. Consider using an alternative format that the user's browser can display natively.

Avoid using styles for document structure. 

Bold and Italics are used to emphasize text, whereas headings are used to define the structure of the document. Headings like h1-h6 are extremely useful for non-sighted users to navigate the structure of the page and formatting a paragraph to just be big or bold, while it might visually look like a heading, does not make it one.

“Pre” elements should not be used for tabular data 

If a preformatted text element is used for tabular data, change the data to use a well-formed table.