Content on Canvas Pages

Page Banner: Web Accessibility for Designers - Great web accessibility starts in the design.

 

Below we've included guidelines from the well thought out designer's cheat sheet Links to an external site. to help you create content in Canvas that is most accessible for all your students. This cheat sheet is developed by the organization Web Accessibility in Mind (WebAIM). Tip: during this week's workshop we'll be testing Canvas pages against these guidelines.

 

Consider Reading Order 

Don't use multi-column HTML tables (what are tables? Links to an external site.) to organize content on a Canvas page. Screen-readers used by visually impaired students may not read your content in the correct order.

image of Canvas rich content editor warning against using multi column tables

image of Canvas rich content editor showing paragraphs instead of tables

 

 

Plan Heading Structure Early (and use the correct heading tags)

Ensure all content and design fits into a logical heading structure Links to an external site. so students can scan your page for main ideas, and so screen-readers can supply visually-impaired students the same learning experience. Tip: when editing a Canvas page, click on a heading. You'll see HTML tags appear directly below the Rich Content Editor (i.e.: "p >> span", "h3", etc.). If a large heading appears as "p >> span" you should select that text and then use the header styling shown in this image:

Canvas rich content editor showing how to use header styling

 

 

Provide Good Contrast

Be especially careful with light shades of gray, orange, and yellow. Check your contrast levels with the color contrast checker Links to an external site..

example of bad contrast between text and background
* Image accessed at prototypr Links to an external site.

 

 

Use Adequate Font Size

Font size can vary based on the font chosen, but 10 point is usually a minimum. Tip: the default font size in Canvas is 12 point.

 

 

Make Sure Links are Recognizable

Ensure hyperlinks Links to an external site. don't look like other text on the page. Use bold or italics to add emphasis - don't underline! Tip: luckily, Canvas automatically underlines links for you.

 

 

Ensure Link Text Makes Sense on Its Own

Avoid "Click Here" in link text. Other ambiguous links, such as "More" or "Continue", can also be confusing. Visually impaired students often use screen-readers to navigate from link to link. The text of a hyperlink Links to an external site. should describe the hyperlink to provide context when screen-reader users, and all other students, scan your page for links.

image shows bad and good examples of hyperlinks on a page
* Image accessed at UMinn Accessible U Links to an external site.

 

 

Use Alt Text to Describe Images

Make sure images embedded into Canvas pages Links to an external site. include descriptions - otherwise students using screen-readers won't know what message the image should convey.

image showing steps for updating alt tag on an image