Canvas

The following guidelines will assist you in creating accessible web pages in Canvas.

Canvas User Guidelines

Basic Principles of Accessibility

By following these general rules, you accomplish about 80% of creating an accessible course!

  • Use header styles (paragraph, header 2, header 3, header 4) when creating subsections on a page.
  • Provide alternative text (ALT text) for images and charts.
  • Avoid communicating information with color alone.
  • Use formatted lists (bulleted or numbered).
  • Use descriptive web links—avoid using the entire URL or “click here.”

When Do I Need to Remediate?

When you have a student with a requested accommodation through the Miller Center for Student Disability Services (MCSDS), you need to provide ADA accommodations as directed in the letter from MCSDS and work with the Accommodations Coordinator for assistance.  For questions about student accommodations, contact the center at SDS@MiamiOH.edu or call (513) 529-1541.

Otherwise, you can continue to use your existing materials without remediation. However, you should develop a plan to remediate over time, building new courses or adding new materials with accessibility in mind.

Accessibility Checker in Canvas: UDOIT

Miami University’s Canvas website has integrated an accessibility checker tool called UDOIT into all courses. The University of Central Florida, sponsored by a Canvas project fund, developed UDOIT.

Note: UDOIT in Canvas is meant to be used as a guide, not a certification. It only checks for common accessibility issues, and is not comprehensive; a clean report in UDOIT does not necessarily mean that your course is fully accessible. Likewise, the tool may indicate a possible accessibility issue where one does not exist.

Errors and Suggestions

After the UDOIT application runs you will receive a report with a list of errors and suggestions. Whenever possible it is important to correct both errors and suggestions.

  • Errors are blatant areas that will most likely cause issues for a user and would need to be changed/fixed.
  • Suggestions are simply that, suggested changes to make it a better learning environment.  Suggestions are not required for use.

UDOIT will identify “errors” and provide “suggestions” in the following areas of your course:

  • Announcements
  • Assignments
  • Discussions
  • Files (i.e., .html files)
  • Pages
  • Syllabus
  • Module URLs (ONLY links to Vimeo and YouTube will be checked)

UDOIT will check for the appropriate use of the following:

  • Use of headings in the page structure
  • Alternative text for images
  • Table Headers
  • Color contrast
  • Video captions

BEFORE You Begin

Don't panic if you get a large number of errors - many errors repeat and are easy to fix! We recommend that you scan the content categories, then begin to make edits to your course material for each error or suggestion. This will help make the list of edits more manageable.

Follow these steps to use UDOIT:

  1. Open your Canvas course, then click UDOIT in the left course navigation menu.
  2. Click the green Run scanner button. (This process may take a few minutes to complete - just stay on that page until the scan is complete.)
  3. Click on the "view source" option to open the content item error. View source will show the text, HTML Code, or video that is reported as an error or suggestion.
  4. Use the UFIXIT to immediately fix the issue, however, this feature is not available for all errors.

How to Create Accessible Content in Canvas

Creating Accessible Content in Canvas

Miami University ADA Compliance and Accessibility Best Practices Canvas Course Pages

Maintain a simple, consistent page layout throughout your web pages.

Miami Oxford Canvas Template provides a consistent page layout by using the heading graphics.

Make sure that there is enough contrast between the text and the background of the page.

Online WebAIM color contrast checker.

Use Standard HTML code.

The Rich Content Editor in Canvas will help you format your content. It also allows you to switch to default HTML code.

Caption video, and transcribe other audio.

See Canvas Learning U—Create Accessible Video Content.

Provide alternative text for every image. Users who are unable to see images depend on authors to supplement images with alternative text that clearly describes the image.

While inserting an image in Canvas, you can type in the Alt Text in the pop-up window.

Provide alternative text for infographics as well.

Depending on the course context, a surrounding paragraph on the same page may provide a better explanation than brief alt text alone.

Make links descriptive instead of the URL.

Use the link tools in the rich content editor to enter or break a web link.

Avoid PDFs by putting the content directly into the web page.

Copy and paste the PDF content on your web page.


Alternative Text in Canvas

  1. Use the embed image button on the second row of the Rich Content Editor toolbar.
  2. Describe the image in the Alt text field. Note: Alt text should not exceed 100 characters.
  3. If the image does not include instructional content, click the Decorative Image button.
  4. Click Update.
  5. You can also use the "U Fix It" tool while using UDOIT in Canvas to add alternate text when it is missing.

Color Contrast in Canvas

  1. Use the text color and background color buttons in the first row of the Rich Content Editor toolbar.
  2. Text color should be easily viewable and should not be the only indicator of meaning or function.
  3. Color balance should have at least a 4.5:1 ratio for small text and a 3:1 ratio for large text.
  4. Reference the Webaim Color Contrast Checker when needed.

Headings in Canvas

  1. Format headings using the Paragraph down arrow button on the second row of the Rich Content Editor (last button).
  2. Avoid using styles (Bold and Italics) for document structure.
  3. Avoid using color alone for emphasis.

Links/Hyperlinks in Canvas

  1. Type the word(s) that describes the link or instructs students to do something with the link.
  2. Select the words you typed.
  3. Click the chain link button on the second row of the Content Editor toolbar and paste the URL.
  4. Click Insert Link to complete the process.

Tables in Canvas

  1. Use the table button on the second row of the Rich Content Editor toolbar.
  2. Build tables by selecting the boxes that represent rows and columns.
  3. Enter the text.
  4. Format the header row using the table properties under the table button down arrow. The <th> codes below identify the header row.  The number of columns is determined by the number of <th></th> lines.
  5. Avoid the use of tables with merged cells.

Create Accessible Files & Documents in Canvas

Best practices:

  • If you have the document in Microsoft Word or Google Docs and it is formatted with styles, use it.
  • Students cannot change your original files in Word, as those files will be download.
  • When sharing Google Docs with students provide View Only access.
  • Files and documents need to be manually scanned for accessibility even if they pass the UDOIT automated checker.
  • Contact your subject matter librarian in King Library for electronic accessible articles and resources.

Additional Resources

Please visit the following resources to learn more about document accessibility:

Create Accessible Video Content in Canvas

There are multiple ways to create and/or caption video content in Canvas to make it more accessible.

Create Videos with ScreenCast-O-Matic (Free tool)

  1. Go to ScreenCast-O-Matic
  2. Click Start Recording to start the application.
  3. Choose to record the computer screen, the webcam or both.
  4. Change the size of the video.
  5. Click REC button to start recording. Click Pause to temporarily stop recording.
  6. Click Done.
  7. Click Save As Video File. Save the video as .MP4 format.

Caption Your Video on YouTube

  1. Go to YouTube and login to your Miami or Google account.
  2. Click Upload on the top-right corner.
  3. Before uploading, change the video privacy setting to Unlisted or Private.
  4. Click the Upload in the middle to browse for the .MP4 video file.
  5. Wait for the video to be uploaded and processed (10-20 minutes automatic captioning).
  6. Click My Channel on the left side and click Video Manager in the middle.
  7. Click the little triangle to the right of the Edit button, and choose Subtitles and CC. Use automatic captioning and edit, or create a new captioning.
  8. Click English (Automatic) and then click Edit to edit automatic captioning. Play the video and edit the captions line by line.
  9. Click Publish edits.
  10. Two versions of captioning will be listed, click the one without Automatic.
  11. In the Actions tab, choose .SRT and Save it.

Add a Caption File to Your Video on Kaltura (MyMedia) in Canvas

  1. In Canvas go to Settings on the left (if you already have My Media and Media Gallery on the left navigation, skip to step 4).
  2. Click the Navigation tab.
  3. Drag and drop My Media and Media Gallery to the upper section then Save.
  4. Click on my media in left navigation My Media.
  5. Click Add New then click Media Upload.
  6. Click Choose a file to upload.
  7. Wait for the video to be uploaded then type a tag (i.e. Course Number) then Save. The video may take 2-10 minutes to process before you can use it.
  8. To add the caption file go to My Media click Edit.
  9. Click Captions tab below the video and then click Upload caption file.
  10. Select the .SRT caption file created through the YouTube captioning process.
  11. Click Save.

Add Videos to Your Canvas Course Using MyMedia

  1. On any content page click Edit. Click the blue V-shaped icon on the second row of the toolbar in the Rich Text Editor. Select Embed Kaltura Media. In My Media locate the video then click Embed. Save the page.
  2. Click the CC button at the bottom of the video to turn captions on/off.