General Accessibility Design Guidelines

erinhmcmillan
Instructure Alumni
Instructure Alumni
‎04-07-2015 03:51 PM
15
342019

Various state and federal laws have requirements aimed at making education accessible to as many people as possible. For instance, making sure that classrooms are wheelchair accessible would be an effort to comply with these laws and policies. Online classes need to be accessible as well. This document outlines some general best practices when designing a course for accessibility concerns. Additional help can be found at Creating Accessible Electronic Content.

 

Specific Canvas-related accessibility help can found in the Accessibility within Canvas document. If you have additional suggestions, please contact accessibility@instructure.com.

 

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.png

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.

 

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.

 

Example Image

Default Alt Text (name of image): kids-tech-revised.jpg

 

Modified Alt Text: one boy and two girls sitting on a couch with a smartphone, tablet, and laptop.

 

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

 

"Donald Tapscott, in his paper ''Growing Up Digital," http://www.ncsu.edu/meridian/jan98/feat_6/digital.html says these students..."

 

Listen to bad example audio from screen reader

 

Good Example

 

"Donald Tapscott, in his paper ''Growing Up Digital," says these students..."

 

Listen to good example audio from screen reader

 

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. View the Creating Accessible Tables 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 more about captions in the Canvas Instructor Guide - Rich Content Editor.

 

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.

PowerPoint

General accessibility guidelines apply to 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 Resources

Significant contributions to this guide were made by:

 

  • John Raible: Instructional Designer for the Center for Distributed Learning at the University of Central Florida
  • Nancy Swenson: Instructional Designer for the Center for Distributed Learning at the University of Central Florida
15 Comments
diane_wells
Community Explorer
‎04-26-2017 01:32 PM

The default color for links within Canvas did not pass accessibility color checks with the white background, so I'm having to go through and change link color to the darker and accessible color called indigo.  Is this a possible correction that could be made for the default settings for all Canvas users?  Same goes for the default sizing of the font, it is too small so we are always having to enlarge the font on everything entered into Canvas.

debra_carney
Community Member
‎09-04-2019 10:00 AM

Hello,

This link to show you how to create closed captions for your Canvas created video is broken:

"Learn how to create captions for new or uploaded Canvas videos."

Thanks,

Debbie Carney

erinhmcmillan
Instructure Alumni
Instructure Alumni
Author
‎09-04-2019 02:19 PM

Thanks, Debbie! We no longer have just one lesson about captioning so I replaced that link with the link to the Rich Content Editor chapter in the Canvas Instructor Guide.

Erin

oneill_edward
Community Participant
‎02-16-2021 05:39 PM

This is so well done. You condensed the most relevant information while making it readable--AND you conveyed the ideas visually. Thank you for your hard work and keen insight.

GayWhite
Community Member
‎07-13-2021 09:30 AM

This is easier to understand than the canvas foundations course.  Thank you.

CarmenRosales
Community Member
‎09-02-2021 10:17 PM

This is very new to me and I hope to learn as much as I can re-reading these examples.

0 Likes
ElizabethWI
Community Contributor
‎04-29-2022 05:39 AM

Hi all,

I am trying to learn about accessibilty with the goal of improving my Canvas courses, but my biggest problem is that I have no idea how to code an accessible page so it looks nice AND is accessible. I have been using invisible tables to format my page (which works great if you don't care about accessibility). I have quite a few courses that will need to be reformatted and what would help me the most would be if Canvas had a page builder function that worked more like, say, wordpress (haha, I am assuming my wordpress blog is accessible, which it may well not be), but I think you get my meaning. I design compliance courses that are very important for safety of my audience, but alas, I do not have access to the resources that the academic course designers have access to. In fact, I do not even have access to all Canvas features/integrations that are available to designers of academic courses. Any ideas? 

mtuten
Community Contributor
‎04-29-2022 08:04 AM

@ElizabethWI I can't help with the capabilities of the Canvas editor, but if you're looking for code, Bootstrap Grid works for building columns and such. Here is some sample code to play with.  I put background colors on each column to maybe make it easier. The trick with using this code to ensure accessibility is that you have to put the content you want read first near the top and work your way down.

 

<div class="grid-row">
<div class="col-xs-12 col-sm-4 col-md-4" style="background-color: #feecdf;">
<p><strong>Instructor:</strong></p>
<p style="padding-left: 30px;">Kelley L. Meeusen,</p>
<p style="padding-left: 30px;">elearning Coordinator</p>
<p><strong>Class Location:</strong></p>
<p style="padding-left: 30px;">Building 15, Room 107</p>
<p><strong>Class Meeting Times:</strong></p>
<p style="padding-left: 30px;">0800 - 0910</p>
</div>
<div class="col-xs-12 col-sm-4 col-md-4" style="background-color: #f2dffe;">
<p><strong>Contact Information:</strong></p>
<p style="padding-left: 30px;">kelley.meeusen@cptc.edu</p>
<p><strong>Office Location:</strong></p>
<p style="padding-left: 30px;">Building 15, Room 108</p>
<p><strong>Office Hours:</strong></p>
<p style="padding-left: 30px;">1400 - 1600, Mon., Wed., Fri.</p>
</div>
<div class="col-xs-12 col-sm-4 col-md-4"  style="background-color: #eefedf;"><img src="/courses/34696/files/12401/preview" alt="simpsons451[1].gif" width="196" height="177" data-api-endpoint="https://resources.instructure.com/api/v1/courses/34696/files/12401/download" data-api-returntype="File" /></div>
</div>
<p>This line of text is outside of the column area.</p>

 

0 Likes
ElizabethWI
Community Contributor
‎04-29-2022 11:32 AM

Thanks mtuten!

That will work well! I made a practice page in on of my courses and our accessibility checker only flagged that the .gif file did not have alternative text - it will flag anything that is named with a file extension. Good news is that is the easiest thing to fix, by either adding a description or marking it as decorative.

I am gradually getting better at this, with help from you and others along the way!

 

Cheers,

Elizabeth

0 Likes
szw151
Community Participant
‎05-02-2022 06:43 AM

Elizabeth,

Many of us here at Penn State have identified this same issue, so we created the Canvas Styles resource with information about creating call-out boxes; decorative borders; placing, styling, and captioning images; accessible show hides; and more. It is publicly available and all the code has been vetted for accessibility. Check it out. You can also give us feedback using the form linked on the home page.

mtuten
Community Contributor
‎05-03-2022 09:59 AM

@szwez This resource is amazing! I've been wanting to create something like this for our institution for a while. Thanks for sharing!

0 Likes
szw151
Community Participant
‎05-04-2022 06:39 AM

Thank you! We have been working on it for two years and there is more content coming!

0 Likes
lettgo583
Community Participant
‎07-06-2022 09:13 AM

@szw151  I have to agree with @mtuten ... your resource is amazing! Thank you for sharing this. 

0 Likes
chenshall
Community Participant
‎08-17-2022 05:41 AM

Really useful, thank you for sharing!

0 Likes
ragulamr
Community Participant
‎02-19-2024 11:47 AM

Thank you for sharing all the categories of accessibility checking in Canvas. 

0 Likes