UDOIT Cloud is a course-wide accessibility checker integrated with Canvas from CIDI Labs. This exciting new tool scans your Canvas course, generates a report of accessibility issues that could impact students ability to learn, and provides resources and suggestions for addressing the issues. Use this article to guide you through accessing UDOIT Cloud, running a scan, and interpreting the results through the prompted errors and suggestions. For additional support, schedule a one-on-one with an OTL staff member. 

Accessing UDOIT Cloud

To access UDOIT, you will need to activate it in your course first. To activate;

  • · Click on Settings on the left side bar in the course you’d like to activate UDOIT
  • · Click on Navigation from the top menu
  • · Scroll down and find “UDOIT Cloud”
  • · Drag and Drop “UDOIT Cloud” towards your activated apps, and place it anywhere you’d like, students will not see UDOIT Cloud on their dashboard.
  • · Make sure to click Save after placing UDOIT Cloud in the desired spot.

Once the steps above have taken place, you will see UDOIT Cloud on your navigation bar.

UDOIT module circled in Canvas Navigation bar

Running a Scan

Click on UDOIT Cloud on the navigation bar

You will receive a popup saying “Cidi Labs UDOIT Cloud is requesting access to your account”. This is a one-time process, click on “Authorize”.

Once UDOIT is open:

  1. Select the content you want to scan.

        For large courses, it is recommended that only one checkbox be checked per scan.

  1. Click the Run scanner button located at the bottom of the page.
  2. Do not attempt to go to a different page from this web browser tab while the scan runs.

Note: UDOIT does not scan attached or embedded files and external websites (For the Files page/section, only HTML files are scanned). Each of these items will need to be checked and repaired manually.

Managing Results

Once the scan is complete, a list of pages/announcements/discussions/ etc. with accessibility concerns should appear below the Run scanner button. Clicking the plus sign to the left of the title of one of these pages will expand a list of results for that page. These results are organized into two categories:

  • Errors – items that must be addressed in order to be considered accessible.
  • Suggestions – items that generally require repair in order for the content to be considered accessible, but may be ignored under certain conditions.

For each result, there will be a View the source of this issue link. Clicking this link will toggle open a preview of the object that has the issue and a snippet of the HTML or source code that supports the item in question.

Note about HTML: While you will see HTML in UDOIT and in this user guide, you do not have to use it if you don’t want to. HTML allows for greater customization and easier repairs, but the Rich Content Editor is quite capable of making your content accessible as well.

 In addition to the View the source of this issue link, there will often be a green, U FIX IT! button. When clicked, this button provides you with means to correct the issue without leaving the UDOIT report. When a result does not have a U FIX IT! button, the issue will need to be repaired manually.

Errors and Suggestions

In addition to the View the source of this issue link, there will often be a green, U FIX IT! button. When clicked, this button provides you with means to correct the issue without leaving the UDOIT report. When a result does not have a U FIX IT! button, the issue will need to be repaired manually.

Error Report

Alternative Text should not be the image filename.

What is Alternative Text?

Alternative text or alt text is a brief, 100-125 characters long, description of an image. This description is extremely important when students come across an image that has become suddenly unavailable and when students who rely on a text-to-speech or screen reader program to navigate the web access your course content. In the former case, the alt text is visible to any sighted person. In the latter case, the alt text is read aloud or translated to braille.

Why is this important?

When an image has a filename for its Alternative text (text that is meant to provide a brief description of the image), students who cannot see the image but can access the alt text will often have difficulty understanding the purpose of the image as filenames are rarely adequate descriptions. For example, if your Clemson tiger paw has the filename orange-2.png, students who cannot see the image but can access the alt text are more likely to think that the image is a color swatch or a fruit.

Cause of Error

To get this UDOIT result, you have to have uploaded and embedded an image to your course content without editing the alt text. Most often, this is achieved through the Insert Content tabbed panel in the right sidebar, which does not yet provide a place where you can edit the alt text. However, it is also possible to do this from the Embed Image Button in the Rich Content Editor toolbar. When an image that has been uploaded to Canvas and embedded in the course content, Canvas automatically puts the filename as your alt text because filenames are better than no alt text at all.

UDOIT can tell that an alt text has a filename because of the .png, .jpg, .gif, etc. that appears at the end of the alt text.

Incorrect Example

incorrect udoit logo

Correct Example

correct udoit logo

How to Fix It

Within UDOIT, if you click the U FIX IT! button, you will be provided with a New alt text field where you can enter an up to 100-characters long description. Once your description is written, click the Submit button and UDOIT will apply the changes.

Related Standards

Error Report

Alternative Text is more than 100 characters.

What Is Alternative Text?

Alternative text or alt text is a brief, 100-125 characters long, description of an image. This description is extremely important when students come across an image that has become suddenly unavailable and when students who rely on a text-to-speech or screen reader program to navigate the web access your course content. In the former case, the alt text is visible to any sighted person. In the latter case, the alt text is read aloud or translated to braille.

Why Is This Important?

If the alt text or brief description of an image is too long, it may not appear correctly in the placeholder for the disabled image. More importantly, if a student uses an older text-to-speech or screen reader program to access the image, the screen reader may only read the first 100-125 characters of an alt text description.

Cause Of Error

To get this UDOIT result, you must have one or more images with alt text that is longer than 100 characters (numbers, letters, and spaces) long. Most commonly, this is caused when an image is added with the Embed Image Button in the Rich Content Editor toolbar and a lengthy description is placed in the Alt text field.

Examples

Incorrect Example

displays long alternate text example

Correct Example

correct udoit logo

How to Fix It

Within UDOIT, if you click the U FIX IT! button, you will be provided with a New alt text field where you can enter an up to 100-characters long description. Once your description is written, click the Submit button and UDOIT will apply the changes.

If your image requires a longer description in addition to the alt text you provide, please read the last paragraph of the HTML directions or seek HTML assistance.

Related Standards

Error Report

Alt text for all img elements used as source anchors should not be empty.

What Is Alt Text?

Alternative text or alt text is a brief, 100-125 characters long, description of an image. This description is extremely important when students come across an image that has become suddenly unavailable and when students who rely on a text-to-speech or screen reader program to navigate the web access your course content. In the former case, the alt text is visible to any sighted person. In the latter case, the alt text is read aloud or translated to braille.

Why Is This Important?

The problem with this is a combination of the problems presented on Alternative Text not found and Link text should be descriptive. Students need image descriptions so they can understand the content and/or purpose of the image when it is not visually available, and links need descriptions so that the students know where the link will take them.

Cause Of Error

To get this UDOIT result, you will need to have one or more linked images which have no alt text (i.e. brief description of the image). Most commonly, this is caused when an image is added to course content through the Embed Image Button nothing is entered in the Alt text field, and the image is then linked (or is made clickable).

UDOIT recognizes these issues by finding a link or anchor tag <a which contains an image <img that has null alt text alt=””.

Examples

Incorrect

incorrect alt text for img element

Correct

correct alt text for img element

How to Fix It

There is no U FIX IT! button for this result. However, this result will be accompanied by the Image elements should have an “alt” attribute result (in the suggestion section), which will have a U FIX IT! button. Use this button.

This result will also be accompanied by the Links should contain text result, which will also have a U FIX IT! button, but unless you want linked text appearing just to the left of the image, Do not use this button.

You may need to run a second UDOIT scan after fixing this issue or examine the View the source of this issue links to determine which “Links should contain text” results are not related to your linked images.

Related Standards

Error Report

Headings should contain text.

What Is A Heading?

A heading is a title for a section of text that, when correctly formatted, can be used to create electronically generated outlines (via tools like HTML5 Outliner and HeadingsMap) and be used to more easily navigate the webpage (via keyboard commands in a text-to-speech or screen reader program commonly used by visually impaired persons). For more on correctly formatting headings, see Avoid using styles for document structure.

Why Is This Important?

If a heading has no text, there are three problems that can arise. All of these problems stem from the fact that you cannot see the empty heading. If the heading has text you may be able to better determine if the heading belongs in the webpage or should be deleted.

Cause Of Error

To get this error, you usually have created a heading via the Paragraph drop menu but either:

  • Forgot to add text.
  • Deleted the text, but not the line.
  • Moved an entire section, including the title, and the heading format was left behind.
  • Placed the cursor at the start of the heading and created a new line.

UDOIT recognizes this issue because the heading is coded in a way that is similar to one of the following formats:

<h4>[no text here]</h4>
<h2><strong>[no text here]</strong></h2>
<h3><span style="font-size: x-large; color: #ee0000;">[no text here]</span></h3>
<h4 style="font-weight: bold;">[no text here]</h4>
<h2><img src="https://source/8399" alt="[no text here]" width="240" height="230"></h2>

How to Fix It

Within UDOIT, if you click the U FIX IT! button, you will be provided with

  • A New heading text field.
  • A Delete this Header completely instead checkbox.

If you’re confident that this empty heading should be deleted, check the checkbox and then click the Submit button.

If you’re not really sure if it should be deleted, put “xxx” in the New heading text field and click the Submit button. Then click the page title above this result to open the page where the issue was located. Once there, look for the xxx heading and determine if you still need it. If you don’t, delete the xxx and the line they were on then save the page. If you do need the xxx heading, replace the xxx with the appropriate text and then save the page.

Related Standards

Error Report

Synchronized captions should be provided for prerecorded web-based video.

This result may also appear as a suggestion, as discussed in the Cause of Error section.

Why Is This Important?

If videos do not have captions (and audio-only content do not have transcripts), students may be unable to consume the media you’ve included in your course. With captions (and transcripts) students will be able to consume your media even if the students:

  • Have a language barrier to overcome
  • Have environmental constraints to overcome
    • Loud airport
    • Nursery with sleeping baby
  • Have poor recording quality to overcome
  • Have mechanical or biological hearing impairments to overcome

Cause Of Error

This result can appear as an error or a suggestion.

  • Error – To get the error, you will need to have added a YouTube video or a link to a YouTube video to your course content that has automatically generated captions.
  • Suggestion – To get the suggestion, you will need to add a non-YouTube video or link to a non-YouTube video to your course. The reason that this generates a suggestion instead of an error is that UDOIT can’t detect if a non-YouTube video has captions or not.

Not all videos will be checked by UDOIT. The following will need to be checked manually:

  • Recordings added with the Record/Upload Media button in the Rich Content Editor toolbar.
  • YouTube videos that have no captions whatsoever–not even automatically generated captions.
  • Most video/audio hosted on websites other than YouTube and Vimeo.

Examples

Everyone knows what an uncaptioned video and a captioned video look like, but not everyone understands how automatically generated captions (autocaptions) are insufficient substitutes for man-made captions in most cases. Please feel free to check out this video, a humorous example of autocaption’s poor quality.

False Results

There are four ways to get false positives:

  • (Most Common) A captioned Vimeo video is linked or embedded in your course.
  • An open-captioned video or video with captions burned into the visuals of the video is linked or embedded in your course (similar to the video above).
  • A YouTube video using an edited autocaption file instead of a separate, man-made caption file is linked or embedded in your course.
  • A link containing the word Vimeo in the URL is inserted in your course.

In all of the above cases, the UDOIT error or suggestion may be ignored.

It is also possible to get false negatives for this result. UDOIT primarily examines YouTube and Vimeo videos. The list of videos that need manual auditing and repair can be found in the Cause of Error section.

How To Fix It

There is no U Fix It!, Rich Content Editor, or HTML solution for this issue. There are multiple captioning services available (3Play, Automatic Sync Technologies, Cielo24, Rev, etc.); but if your institution does not use such a service or provide its own service and you are not in a position to fund the captioning yourself, please use the links below to learn how to create your own captions.

Error Report

Links should contain text.

Why Is This Important?

If there is no text or image in the link, students will have:

  • Nothing to click on (if the link was to another place in Canvas)
  • An unexplained icon to click on (if the link is to an external website)
  • A link without any information about the destination (if the link is accessed by a student using a text-to-speech or screen reader program).

Cause Of Error

To get this UDOIT result, you will need to have one or more links that do not contain text or do not contain images with alt text. The most common ways to reach this error are to:

  • rearrange lists of links.
  • delete linked text or images without also deleting the link.

UDOIT can tell when there is an empty link because the code will look like one of the following (the […] will vary):

 

Examples

Arrangement Example

In this example, the second item in the list contains a link without linked text. To get this link, the author placed their cursor in front of “Top of Page” link, pressed the enter key to create a new list item, and then pasted the link to Google on this new list item line.

Unlike the other examples on this page, you cannot see evidence of the empty link because URL for the link is to a page (or part of a page) in Canvas. Were this link to a source outside of Canvas, you would see a symbol.

Deletion Example

For this example, the author created a link to the UCF’s UDOIT page but decided it was not needed and deleted the text. What they didn’t realize is that the link remained even without the text in it.

Semi-False Positive

If you receive this result because a linked image does not have alt text, this result is legitimate; however, do not use the U Fix It! button for “Links should contain text” to fix these. Using the button for this result will add linked text to the left of the image. Instead, you’ll want to check the Suggestions section for Image elements should have an “alt” attribute and use the U Fix It! buttons there.

How to Fix It

Within UDOIT, if you click the U FIX IT! button, you will be provided with

  • A text field where you can enter in New link text (the text that students will see).
  • A Delete this Link completely instead checkbox.

To determine the correct route, click the View the source of this issue, copy the URL that appears between href=” and “, open a new tab, paste the URL in the address bar, and then view the website. If you also need to verify that the link is available elsewhere on the page where the issue was found, you can click on the page title located in the light gray box at the top of this section of results to open the page in a new tab.

After you’ve determined the correct course and have either filled the field or checked the checkbox, click the Submit button and UDOIT will apply the change.

Related Standards

Error Report

No table headers found.

Why is this important?

Tables without properly identified header cells can be hard to interpret and navigate for students who rely on text-to-speech or screen reader (Links to an external site.) programs to convey visual information. When students using these programs come across tables that identify header cells and use the scope attribute (scope will be discussed on the next page) correctly, it is easier to track which row and column a given cell is describing.

Cause of Error

To get this UDOIT result, you will need to have one or more tables in the course that did not have at least one row or column where the Cell Type under Cell Properties was changed to Header cell.

UDOIT identifies such tables because all of the cells of the first row or column do not have

tags in the HTML.

False Positives

If your table is meant to create a visual layout instead of organizing and conveying data, then you should ignore this result. The Header cell Cell Type should only be put on data tables.

If you know or can find someone who knows HTML, it is strongly recommended that layout tables be replaced with divs as soon as possible. Divs can be given display attributes (Links to an external site.) to achieve the same or similar yet improved layouts and won’t be confused for data tables or flagged by UDOIT.

How to Fix It

Within UDOIT, if you click the U FIX IT! button, you will be provided with a drop menu where you are supposed to select whether The first row, The first column, or Both the first row and column should be turned into header cells. Use the View the source of this issue link in the UDOIT report to better determine the appropriate choice. Once you’ve made your choice, click the Submit button and UDOIT will apply the changes.

While we discourage the use of complex tables which have split and merged cells, if you must use them and need to identify additional header cells, please follow the directions for using the Rich Content Editor to make those adjustments.


Error Report

No row or column scopes declarations found in headers of the table.

Why Is This Important?

Tables without properly identified scopes can be hard to interpret and navigate for students who rely on text-to-speech or screen reader programs to convey visual information. When students using these programs come across tables that identify header cells (discussed on the previous page) and use the scope attribute correctly, it is easier to track which row and column a given cell is describing.

Cause of Error

To get this UDOIT result, you will need to have one or more tables in the course that have at least one header cell where the Scope under Cell Properties was not changed to either Row or Column.

True Positive

If you built the table in the HTML Editor or if you edited the HTML of a table and set the scope of one or more header cells to scope=”column” you will receive this error in UDOIT because you need to have a scope=”col” instead of scope=”column”.

It’s a very easy mistake to make, so don’t feel bad if you make it.

False Positive

While we would encourage that you do not use a table that has merged or split cells, if you must have them and they are header cells you will need to use the scopes Row group or Column group. However, neither scope will be recognized as acceptable scopes in UDOIT. As such, if these scopes are used correctly, you may ignore this result.

How to Fix It

Within UDOIT, if you click the U FIX IT! button, you will be provided with a drop menu where you are supposed to select whether the identified header cell is a header for the column (col) or row. Use the View the source of this issue link in the UDOIT report to better determine the appropriate choice. Once you’ve made your choice, click the Submit button and UDOIT will apply the changes.

While we discourage the use of complex tables which have split and merged cells, if you have a table that must use them, you will need to follow the Rich Content Editor directions to apply the Column group and/or Row group scopes.

Error Report

No table headers found.

Why Is This Important?

When text does not have a strong enough contrast with its background, it is unreadable. Additionally, when a student with color-deficient vision due to a mechanical failure or a biological condition perceives, for example, red text (#FF0000) on a white background (#FFFFFF) as yellow text on a white background, the text is also unreadable. Because of this, there are certain color contrast ratios that must be met. We will cover these later on.

To see how red and other colors may be perceived by color blind persons, do a Google Image Search for “color blind simulation.”

Cause Of Error

To get this UDOIT result, you will need to have one or more portions of colored text that has less than a 4.5:1 contrast ratio with white (#FFFFFF;), the assumed background color.

Examples

The following color combinations may appear readable to many, but some may see the colors as shades of yellow. To correct the issue, only a slight change in color or in the text’s font size and weight had to be made.

Incorrect

incorrect color contrast

Correct

correct color contrast

False Positives and Negatives

Unfortunately, UDOIT is not programmed to detect font size or background color (it’s assumed to be white) which can lead to both false positives and false negatives.

To get a false positive (UDOIT results which can be ignored), the following must be true:

  • For large text (size \ge14pt bold or \ge18pt), have a contrast ratio of 3:1 or greater between the background color and font color.
  • For regular text, have a contrast ratio of 4.5:1 or greater between the background color and font color.

To get a false negative, you need to have text on a colored background which has a 4.5:1 contrast with white but does not have the appropriate contrast ratios listed above for the colored background.

For information about how to identify false results, read More on Color Contrast.

Within UDOIT, if you click the U FIX IT! button, you will be provided with:

  • a sample of the current color combination
  • a checkbox that allows you to bold the font
  • a checkbox that allows you to italicize the text
  • a selection of colors.

The checkboxes are provided so that when you change the color, you can also address the Avoid using color alone for emphasis suggestion. It’s strongly recommended that when you do use the checkboxes use the one for bold instead of italics as italics are generally harder to read.

Below the checkboxes are a collection of color swatches. You may choose any that do not generate an x when hovered on. Below, I’ve replicated your choices. The ones with X or / on them cannot be selected in UDOIT, but the ones with a / can be used on large text if you want to copy the color code and apply that color via the HTML directions. Additionally, please avoid using blue shades for non-linked text.

UDOITcolorpicker

Click on a more accessible color then click the Submit button and UDOIT will apply the change.

Related Standards

When the UDOIT report generates both Errors and Suggestions for a page, the second set of issues you will see are the Suggestions. Here is the list of Suggestions that will be explored in this guide:

Each of the Suggestions that end in an asterisk (*) have the possibility of being a false positive–a result that can be ignored as the accessibility issue has been handled in a way that UDOIT is not programmed to detect. These false results will be discussed in more detail on those pages and are listed with a brief description on Common False Results.

exclamation point inside yellow triangle

If UDOIT generates any additional Suggestions see Nearly Obsolete or Retired Results, and use the links provided to seek assistance.