Accessible Canvas Pages

A Guide for Creating Accessible Canvas Pages

Accessible Canvas Web Pages

Page Template:

Select an Evergreen Canvas site template. (In-house templates are generally developed by Academic Technologies and available to apply when self-initiating.)

1. Faculty can self-initiate Canvas for their offerings, see Selecting Academic Technologies for directions.
2. Questions? Contact Academic Technologies through help.evergreen.edu

Headings:

Properly format headings.

1. Use headings in the correct (hierarchical) order.
2. When in edit mode, highlight text and select a Heading from the Paragraph drop-down menu in the Rich Content Editor.
3. A Canvas page title uses Heading 1. There should be only one h1 per page but there can be multiple h2, h3, h4. DO NOT skip main heading levels and apply consistently throughout page. Examples: Heading 2 is great for headlines, Heading 3 is good for separating sections of content, and Heading 4 can be used for sub-sections or general sections of content.

Images:

Add alternative (Alt) text to images.

1. Click Edit to open the Rich Content Editor
2. In the editing field, click once on the image to highlight it.
3. In the Rich Content Editor, click on the Embed Image icon (resembles a mountain).
4. From the Insert / Edit Image window, under Attributes, enter a description of the image in the Alt text field
5. Click the blue Update button to save.

Lists:

Format a list as a list using Ordered or Unordered lists.

1. In the editing field of the Rich Content Editor, select the content you want to format as a list.
2. From the toolbar, click on the Bullet list icon if the order doesn't matter. If order does matter, click on the numbered list icon. Note: When using the Rich Content Editor at the Syllabus page, the save button is “Update Syllabus.” In a Discussion, the save button for a post is “Post Reply.”

Links:

Write meaningful link text that indicates the link’s destination.

1. Highlight meaningful text for the link (ex. The Evergreen State College)
2. From the Rich Content Editor's toolbar, click on the Link to URL icon (resembles a chainlink)
3. In the Link to Website URL window, paste or type the URL (http://www.evergreen.edu) into the insert box and click the Insert Link button.

Tables:

Indicate column (or row) headers in data tables.

1. To add scope, select the relevant cells of the table to be marked as row or column header.
2. Click the Table icon in the editor’s toolbar, select the Cell Properties link.
3. In Cell properties, set the Cell type to “Header cell” and in the Scope menu, select the Column option.
4. To set scope for the row, repeat the process, but in the Scope menu, select the Row option.
5. Add table caption.
6. Check the reading order

Add table caption.

1. Highlight the table, click on the Table icon in the Rich Content Editor.
2. From the drop-down menu select Table Properties.
3. Under the General tab, check the box for Caption, then click Ok. A new field for a caption should appear at the top of the table.

Check the reading order

1. A screen reader reads tables from left to right, and top to bottom, never repeating a cell.
2. Merged, nested, and split cells may alter the reading order of a table.
3. Make sure you construct your tables in a way that accommodates a good reading order.

Color

Use sufficient color contrast

1. Highlight the text you want to change to another color
2. Click on the Text Color icon (letter A at left in the toolbar).
3. Click on a color in the drop-down menu to apply it to the text.

TIP: Utilize the WebAIM Color Contrast Checker to ensure adequate color contrast. Don’t use color alone to convey meaning.

1. Don’t use color alone to make a distinction, a comparison or to set something apart from the rest of the webpage. If you categorize something by color alone, those who are color blind or blind will not benefit from the color distinction

Math & Science

Write math and science equations using the Math Editor (LaTeX-based) in Canvas.

1. Use the LaTeX Math Editor in Canvas, available in the Rich Content Editor toolbar by clicking on the Insert Math Equation button (paragraph symbol between the Embed Image and Record/Upload Media buttons). For more information, go to the Math & Science page in this handbook.

Multimedia:

1. Eliminate or limit blinking/flashing content to 3 seconds
2. Make sure all mouse actions can also be completed with a keyboard alone.
3. Use an accessible media player like YouTube or Vimeo.