Understanding general accessibility design guidelines for Canvas

This document outlines some general best practices when designing a course for accessibility concerns. UM System also has a tool in Canvas called Universal Design Online (Content) Inspection Tool, or UDOIT (“You Do It”). UDOIT runs a report to flag issues for you that might create barriers for students with disabilities. It also provides guidance on how to fix those issues. You can learn more about accessibility on our page and if you have questions you can contact the instructional design team.

• Layout and Design
  • Headings
  • Images
    • Example Image
  • Links
    • Example Links
  • Content Formatting
    • Example Canvas Color Ratios
  • Tables
    • Example Table HTML Code:
  • Videos
• Content File Formats
  • Microsoft Word
  • PowerPoint
    • Portable Document Format (PDF)
• Additional Resources

Layout and Design

Generally, the layout of a page should be simple, clean and uncluttered. Navigation should be clear and consistent from page to page.

When adding content, keep content organized and chunked together in short paragraphs so users can scan your content easily.

Headings

Headings should always include descriptive section headings. Section headings allow for a quick scan of the content for sighted and non-sighted users. In Canvas, page titles are automatically generated at H1.

Images

Alternative (alt) text is required to provide a textual alternative to non-text content in web pages. This text will be read aloud to a person using a screen reader.

• Writing Great Alt Text, Whitney Quesenbery

By default, Canvas includes the image name as the alt text, which should be changed to something more descriptive when embedding images. Alt text is not the same as the image title, which generates text when users hover over the image. Learn how to embed images in the Rich Content Editor.

Links

When adding a link, instead of pasting in the URL directly, attach the link to words that describe the link destination. This behavior will help everyone (whether they are screen reader users or not) understand where the link will take them.

Example Links

• Bad Example: [Listen to bad example audio from screen reader]
  "Donald Tapscott, in his paper ''Growing Up Digital," http://www.ncsu.edu/meridian/jan98/feat_6/digital.html says these students..."
• Good Example: [Listen to good example audio from screen reader]
  "Donald Tapscott, in his paper ''Growing Up Digital," says these students..."

Content Formatting

Users can view text contrast well when formatting with bold and italics, which help distinguish between important content items.

Example Canvas Color Ratios

If you choose to use color, utilize the WebAIM Color Contrast Checker to ensure adequate color contrast and accessibility friendly colors. The following are examples of Rich Content Editor Colors Contrast Ratios within Canvas:

Fail: (under 4.5)

• Yellow Text: 1.07:1
• Pale Green: Text  1.12:1
• Orange Text: 2.14:1
• Pink Text: 3.14:1
• Red Text: 4:1

Good: (4.5 to 7)

• Blue Text: 4.68:1
• Dark Green: 5.14:1
• Purple Text: 6.95:1

Best: (Over 7)

• Burnt Orange: 7.43:1
• Very Dark Gray: 12.63:1
• Black text: 21:1

Tables

Tables should be used for data display, not layout. Headings should always be included for columns and rows.

In Canvas, headings for table columns and rows can be changed in the Rich Content Editor. 

Example Table HTML Code:

• Column
  <th scope="col">Questions</th>
   <th scope="col">Percentage of Total</th>
• Row
  <th scope="row">Website</th>
   <th scope="row">Website URL</th>

Videos

Videos should always have the option to view captions.

• For external videos, check with the video provider for caption availability. Learn how to Caption YouTube Videos owned by you.
• For videos created or uploaded into Canvas, Canvas uses a tool called Amara to sync your script with a video. Learn how to create captions for new or uploaded Canvas videos.

Content File Formats

There may be times an instructor wants to deliver content in other file formats not native to Canvas. Here are tips to ensure accessibility of some of the most popular file formats.

Microsoft Word

General accessibility guidelines apply to designing a Word document.

• Additional guidelines and links:
  • Apply Table Row and Column headings in Word
  • Tips for creating accessible word documents

PowerPoint

General accessibility guidelines apply when designing a PowerPoint document. Use the built-in accessibility checker: [File > info > check for issues > check for accessibility].

Additional guidelines and links:

• Use slide layout templates whenever possible.
• When you can’t use a template, use one with the slide title only.
• Write presenter’s notes in the provided area.
• Apply ALT text to images.
• Add captions to the slide or presenter’s notes for complicated images (e.g., diagrams or maps).
• If embedding video, caption the video and ensure the player controls are accessible.
• If embedding audio, include a transcript.

Portable Document Format (PDF)

Portable Document Format (PDFs) should be created as accessible documents. Most commonly, PDFs are created from Word documents. If you do not have the original source file for a PDF document, you can tag the PDF to help with accessibility.

Additional guidelines and links:

• WebAIM PDF Accessibility tutorial
• How to tag an existing PDF
• Fixing Inaccessible PDFs using Adobe Acrobat Pro

Additional Resources

• How to enable keyboard Navigation in Mac OS X Web Browsers
• Keyboard shortcuts for keyboard users

Canvas campus and vendor resources