Text How to Repair Issues in UDOIT

Be sure you have enabled UDOIT Cloud in your Canvas course Navigation Menu. To enable the UDOIT Cloud tool in your Canvas course, please follow the instructions below.

Log in to Canvas
Open the course you wish to add UDOIT to.
Select Settings in the Course Navigation menu.
Select Navigation from the options at the top of the page.
In the bottom block of content, locate UDOIT Cloud.
Locate the three vertical dots next to UDOIT Cloud's name and select the dots.
Select Enable.
Select Save. at the bottom of the page.
UDOIT Cloud should now appear in your Course Navigation menu.
Select the UDOIT Cloud button in your Course Navigation menu to begin your first UDOIT course scan.

When UDOIT is first opened in Canvas, it will automatically run a scan of your course. Once the scan is complete you can select the Home page button within the UDOIT window to begin exploring the tools review and repair functionality.

Toggle the Ways to Get Started options
Work through the Most Common Errors
Review and repair the Most Common Suggestions and more!

Accessibility Guidelines

Review the tabs below to learn about the Accessibility Guidelines and best practices for making content accessible. In addition, each tab will contain instructions on how to address the issue in UDOIT.

Recommendation

It is recommended that you have two Internet windows open before you begin course repair in UDOIT. Have one window open to the course you want to repair and the other window open to this module and related pages.

Alternative Text

Alternative Text

When an image is vital to the understanding and learning of content, adding a non-text alternative, called the alt text HTML tag, helps contextualize an image to a user with assistive technology. The screen reader can explain the image to the user so the information can be perceived. If an image does not add to the necessary learning or understanding of content, this image may qualify as a decorative image. If that is the case, this can be indicated in the alt text tool of multiple programs.

Proper Alt-Text

campus birds eye view.JPEG

Text in the alt text Image Options field (hidden) is "Bird’s eye view of a parking lot full of vehicles at Coconino Community College."

Improper Alt-Text

No alt text or the file name is "campus birds eye view." These examples do not help a screen reader provide context for the user. What campus or part of campus is this a birds eye view of? Some file names default to a format like IMG_1234. This will impede understanding of a user with a screen reader unless alt text is added.

Students Served by Alt-Text

Those with visual impairments and disabilities
Students with screen readers
Users that have text-based web browsers
People who are impacted by low-bandwidth

How to use UDOIT for Alt-Text Repair

In the UFIXIT window select the item to review by selecting Review.
In the repair modal pop-up, review the image to determine if it required alt-text or can be designated as a decorative image.

Alt-text is necessary any time the image is necessary for the learner to comprehend and further understand the content. A decorative image is for images that are not required to support the learner’s understanding of the content.

Edit by giving New Alt Text or identify the image as Decorative Text in the repair modal as needed. Then, select Save.

Create New Alt Text by entering the description in the alt text field. Avoid phrases like, “a picture of” or “image of” when creating alt text. Then, select Save.
Identify the image as Decorative by checking the Mark image as decorative box. Then, select Save.

Additional Ways to Create Alt Text

How to Create Alt-Text in Canvas

How to Create Alt-Text in Word

How to Create Alt-Text in Google Docs and Slides

Headings and Structure

Headings and Structure

Accessible headings create clear delineations and navigation markers for users to determine critical topics and associated content. This supports sighted users as well as users with a screen reader to gain a general overview of the content, its purpose, and flow.

Use the heading tool in your software program to create heading styles. Headings are to be used in a hierarchical manner. They begin with Heading 1 (H1), Heading 2 (H2), Heading 3 (H3), etc. Software programs provide a template or button for headings that move through the hierarchy. This creates a logical content structure so users can easily identify associated content as the author intended. Typically, the title on the page starts at Heading 1, so you will use the next level Heading 2 at the start of most of your pages.

Sample Heading Hierarchy

Heading 1 (h1)

Heading 2 (h2)

Heading 3 (h3)

Heading 4 (h4)

Normal Text (p)

Students Served by Proper Heading Structure

Students with learning difficulties or cognitive disabilities are given document organization
Those with screen readers
People that use keyboard controls for webpage navigation
Anyone that must skim to locate information

How to Repair Headings in UDOIT

In UFIXIT, locate issues called Avoid Using Styles for Document Structure
Select the item to review.
Review the identified issue in the Preview box in the repair modal.
Select the changes that need to be made to use the correct heading hierarchy. Then, select Save.

Additional Ways to Repair Headings

How to Create Headings in Canvas (refer to the “Change Text Style” section)

How to Create Headings in Word

How to Create Headings in Google Docs and Slides

Color Contrast and Use of Color

Color Contrast and Use of Color

Background and text color used for stylistic or aesthetic purposes may interfere with a user's ability to perceive the text or images. When designing a resource or page, maintain high contrast between the text and background (e.g., black on white, dark gray on light gray, dark blue on yellow). Avoid using various colors and highlighting alone to enhance text because some users may not perceive all colors. This means the user will not identify color to indicate something of greater importance. Instead, consider using other cues to indicate important or emphasized information.

Other cues to convey importance include using an asterisk with a legend that indicates the asterisk is for “Required completion.” Use buttons with clear text to indicate its purpose (e.g., avoid using a vague label such as Submit or OK , consider using more specific and descriptive labels such as Register , Save Changes , or Confirm Purchase ), or use patterns for graphs with color for each value you are trying to display.

Remember that 1 in 12 people are affected by color blindness or color vision deficiency so use your accessibility checker to ensure the design of the page is accessible to all users.

Proper Use of Color Contrast

Text color maintains appropriate contrast with background color
Required: Please complete all readings before our next class on Month, Day, Year

Improper Use of Color Contrast

Text color does not maintain appropriate contrast with background color
Please complete all readings before our next class on Monday, Day, Year

Students Served by Proper Color Contrast

Students with vision impairments such as color vision deficiency
Those who may deal with loss of sharpness in vision
Users that have permanent or temporary vision impairment due to medical procedures, medication, or age-related vision loss

How to Repair Color Contrast in UDOIT

In UDOIT, locate Insufficient Text Color Contrast with Background issues.
Select an issue to review.
Review the specific issue in the Preview box. UDOIT identifies the background and text color then provides a valid or invalid notification. Notice how the Contrast Ratio box notes the ratio is invalid.
To get a valid ratio, use the up or down arrows in the Text Color (or Background Color) fields to adjust the color until it reaches a valid ratio (i.e., 4.5:1). You may also Show/Hide Color Picker. When the text has a valid contrast ratio, select Save.

Additional Ways to Repair Color Contrast

How to Use Proper Color Contrast in Canvas

How to Use Color Contrast for Accessibility in Word

How to Use Color Contrast in Google

Formatted Lists

Formatted Lists

Lists can be very beneficial to convey information in a succinct and organized manner. Bullet points and numbered lists are examples of formatted lists. The way in which a list is built can impact how learners perceive the information. Construction of lists must take learners that use screen readers into account so they can have the same access to the information and use it as intended.

Why Use Formatted Lists

When making lists, be sure to use the embedded tools that create lists. These tools format bullets and numbers automatically and provide the background code to inform a learner with assistive technology what the information is. In addition, this also allows a screen reader with keyboard controls the ability to navigate to parts of the list effectively. Using dashes or hyphens on the keyboard to create a list might give the visual impression of a list similar to one made with bullet points. However, it's important to recognize that relying solely on the visual representation eliminates the ability of a learner with a screen reader to navigate using their assistive technology.

Students Served by Formatted Lists

Students with screen readers
Document organization supports those with ADD/ADHD or cognitive processing needs

When to Use Formatted Lists

Numbered Lists

Numbered lists are very useful when presenting a step-by-step process, chronology, aligning the number of listed items with an aforementioned quantity, or listing prioritized information that expresses rankings or some other hierarchy of information. Using the numbered list function for questions or prompts is also very important to help learners with assistive technology navigate appropriate back and forth between questions.

Proper Use of Numbered Lists

Locate the Distance Learning webpage by opening up the Coconino Community College home page.
In the search bar, type Distance Learning.
Select the search button which is indicated by a magnifying glass.
Open the item titled Distance Learning.

Improper Use of Numbered Lists

1) Locate the Distance Learning webpage by opening up the Coconino Community College home page.

2) In the search bar, type Distance Learning.

3) Select the search button which is indicated by a magnifying glass.

4) Open the item titled Distance Learning.

Yes, this list looks like a numbered list, but the necessary background code is absent and inhibits navigation of the list when a learner is using assistive technology.

Bullet Points

Bullet points or bulleted lists work best for lists of information where an order of importance is not present. Using the bulleted list function for information is important to help learners with assistive technology navigate appropriately back and forth between list items.

Notice that the list on the right uses dashes that are not part of the bulleted list tool.

Proper Use of Bullet Points

Take out all the necessary materials to make a peanut butter and jelly sandwich.

Bread
Peanut butter (can substitute with any nut butter you prefer)
Jelly (flavor of your choice)
Knife or another instrument to spread your ingredients
Serving dish

Improper Use of Bullet Points

Take out all the necessary materials to make a peanut butter and jelly sandwich.

-Bread

-Peanut butter (can substitute with any nut butter you prefer)

-Jelly (flavor of your choice)

-Knife or another instrument to spread your ingredients

-Serving dish

How to Repair Formatted Lists in UDOIT

UDOIT does not recognize incorrect list formatting so please be diligent in your self-check to ensure lists are formatted correctly.

Additional Way to Repair Formatted Lists

How to Make Formatted Lists in Canvas

How to Make Formatted Lists in Word

How to Make Formatted Lists in Google

Body Text Resizing

Body Text Resizing

Authoring tools and content editors often have a default text size that allows a user to resize their webpage and the text within it. It is best to avoid adjusting body text size away from the tool’s respective default size so end users can use the web page size adjustment option to meet their needs.

To preserve the functionality of end users, be sure to use the default Paragraph text style in your authoring tool. For example, in Microsoft Word, the default font size is often 11pt font. When dealing with issues of font style, use the clear formatting tool in your authoring tool. This will take the selected text and revert it back to the default paragraph style and default font size. In the event that you are copying and pasting from multiple sources, the clear formatting tool will ensure all the text is the same and at the default paragraph text.

Meaningful Links

Meaningful Links

Have you ever seen a long URL in the middle of a paragraph and it just feels like it disrupts your reading experience? The same thing happens to users of assistive technology. However, they cannot skip over the text that is read aloud which includes every character of a URL. The lengthy reading of an entire URL is disruptive and can inhibit understanding of the information and the intended purpose of the linked content. Using a descriptive link helps improve the experience of all users.

A descriptive link is when the name of the page, article, or item is clearly named in the text and the URL is then attached to the text behind the scenes in the code to help learners with a screen reader. This is known as hyperlinking. In addition, learners that do not use assistive technology will have more understanding of what the link is and where it should go when the link is descriptive.

Proper Use of Descriptive Links

Coconino Community College home page
Refer to the CCC Foundation Scholarships page to learn more about available scholarships.

Improper Use of Descriptive Links

https://www.coconino.edu/
Refer to the CCC Foundation Scholarships page https://www.coconino.edu/foundation-scholarships to learn more about available scholarships.
Refer to the CCC Foundation Scholarships page to learn more about available scholarships. https://www.coconino.edu/foundation-scholarships
Click here

Students Served by Meaningful Links

Students with screen readers
People that are supported by document organization and context for information such as those with ADD/ADHD
Anyone skimming a webpage

How to Repair Links in UDOIT

In UDOIT, locate the Link Has Nondescript Text issue list and select the item you wish to repair.
In the repair modal, review the issue in the Preview box. Notice how the New Link Text box has the URL instead of more descriptive or meaningful information?
In the New Link Text box, enter the appropriate text to provide context to learners such as the name of the page or a description of the information the link will direct them to. Then, select Save.

Additional Ways to Repair Links

How to Make Meaningful Links in Canvas

How to Make Meaningful Links in Word

How to Make Meaningful Links in Google

Tables and Table Captions

Tables and Table Captions

Organization and structure are necessary when trying to communicate more complex information that has definitive categories that are related to each other. The rows and columns of a table can create a visually appealing way to bring all the information together. As is the case with many accessibility issues, looks aren’t everything.

In order to make this experience the same for someone who uses a screen ready, table captions, header rows, and/or columns are necessary.

Proper Use of a Table

A properly formatted table has a caption, which serves as a title in a sense helping the user understand the purpose or context of the table. Header columns (or header rows) are used to identify the information for a screen reader, which allows the user to understand the table organization. The text is not merely bold but is created with the table properties tools.

Survey Respondents Over Time
Year	Number of Survey Respondents	Number of Survey Non-respondents
1980	8,000	19,114
1985	9,271	20,791

Improper Use of a Table

Year	Number of Survey Respondents	Number of Survey Non-respondents
1980	8,000	19,114
1985	9,271	20,791

Students Served by Proper Table Structure

Those with screen readers
Students with different devices (e.g., phones and tablets with smaller screens) that require compatibility for proper image display

How to Repair Tables in UDOIT

In UDOIT, locate the issue called No Table Headers Found and select the item to review.
In the Preview box, review the content. Determine what is needed to make the table accessible.

Toggle Column Header or Row Header or Both based upon the information in the table. Then, select Save.
Note that UDOIT will not provide the option to add a caption to a Canvas table. Please use the Canvas Accessibility tool to add this accessible feature.

Additional Ways to Repair Tables

How to Make Tables Accessible in Canvas

How to Make Tables Accessible in Word

How to Make Tables Accessible in Google - Google Docs do not format tables in an accessible manner so it is not recommended to use tables in Google Docs

Accessible Files

Accessible Files

Tags provide a structured hierarchy to the content in a file, like an Adobe PDF file. For example, in a PDF, tags identify the headings, paragraphs, lists, tables, and other elements in the page. This structure allows screen readers and other assistive technologies to navigate and present the content in a logical order. It will also enable screen readers to accurately interpret and vocalize the content to the users, so the document makes sense. Tags also indicate whether a form field is required, provide hints or instructions for completing a form, or specify the language of the text.

How to Repair File Tags in UDOIT

1. In UDOIT, locate the Untagged Files issues.
2. Select Review next to the item you want to repair.
3. View the file to verify its contents and purpose in your course.
4. You have multiple options to address an untagged file.
  1. File Actions

1. 1. 1. In this section, you can select ways to replace or delete the file.
      1. Replace file with an auto tagged PDF will change the PDF so it has accessible tags.
      2. Replace file with a page will convert the PDF to a Canvas Page

1. 1. 1. 1. Note that if this option is not available, it is because the file was not detected in a published module or it was already replaced with a Request Auto Tagged PDF action.
        
        It also seems this is available for scanned files only.
  2. Select an Alternate Format

1. 1. 1. Request an auto tagged PDF will create a file that has tags.
    2. Request a Canvas Page will take the PDF content and create a Canvas Page. You can then add this page to a module.

Convert a File to a Canvas Page in UDOIT

As you review files in your course, consider their readability and use by a student. You might find that a Canvas page would improve the readability. Are you worried you have type out all the text because it is not a file where the text can be selected or easily formatted by copy and paste? UDOIT can convert files to Canvas pages for you. Here's how!

in UDOIT, select Review Files from the top menu options.
Select the file you wish to convert.
Under Alternate Formats, select Request next to Canvas Page (includes HTML file). This process will take some time.
When the process for requesting a Canvas Page is complete, look under File Actions.
Select Replace file with a page. This will create a Canvas page and replace the file that is in a module with the page.

You can then edit the page in Canvas to include other elements or content. Note that formatting may be impacted by conversion. The source file will not be deleted and can be found in your Canvas Course Files

Additional Ways to Repair Files

How to Create Tagged Files in Word

Word does not create tagged files. However, when exported to PDF, tags are created in alignment with how the Word document was built. Be sure to use proper heading styles, formatted lists, and tables so the content transfers to PDF appropriately.

How to Create Tagged Files in PDF

Captions and Transcripts

Captions and Transcripts

Captions and transcripts are the most time-intensive and complicated process to both create and repair. This is certainly a case of pay now or pay later. There will be a time in which captions or transcripts will be necessary to serve students. It is best to invest this time early to be prepared for the time when it will be mandated by a letter of accommodation or other policies rather than have a much tighter time constraint to repair videos and audio without captions and transcripts. But please remember, captions help all learners. Sometimes learners can be tired and the text helps them process the information more effectively. Or, a student is learning the language of the speaker, therefore, captions and transcripts support their learning in multiple ways.

Use Zoom Settings to Create Editable Transcripts for YouTube Upload

Auto-caption via YouTube Video Upload

Edit Auto-Generated YouTube Subtitles

Edit Time Stamped YouTube Captions

How to Review Video Captions in UDOIT

Note that UDOIT does not have a repair option regarding closed captioning. Creation and repair of captions will need to be made in the video hosting site employees use.

In UDOIT, locate the Closed-Captions Were Auto-Generated or External Content May be Inaccessible issues. Auto-generated will likely review YouTube videos while some other video-hosting sites may not be readable by UDOIT hence the External Content issue is identified.
Select the item you wish to review.
In the Preview box, view the video and determine if the captions are accurate. You may also select Scan Video for Caption Updates.
If you select Scan Video for Caption Updates, it will post a pop-up that indicates the issue has or has not been fixed. If you review the content and it is accurate, you may Mark as Resolved.
When External Content is Inaccessible, the repair modal will require you to fix the issue in the video-hosting site. If the captions are accurate in the video-hosting site, you can Mark as Resolved in UDOIT.

Images of Text

Images of Text

A screenshot of text can appear useful to learners. However, to those that use assistive technology like a screen reader, the technology will only see background code that indicates a picture. And if that screenshot does not have all of the alternative text to support the learner, they might miss out on some very crucial information.

A best practice would be to use text as intended in whatever authoring tool you are using rather than an image of the text. If you do choose to use alt text, please remember, it should be less than 125 characters long.