Difference between revisions of "Accessible Canvas Pages"

Canvas strives to be Accessible out-of-the-box by applying universal design strategies from the start. As we add content to our sites, we also need to apply best practices. Below is information about how to initiate a Canvas site and the essential steps for creating Accessible web-based and digital content.

Site Templates

• Faculty can self-initiate Canvas for their offerings, see Selecting Academic Technologies for directions.
• When initiating Canvas for your program/course, you can select an Evergreen Canvas site template or choose to clone/copy a previous Canvas site.

Headings

Properly format and apply headings in the correct (hierarchical) order - i.e., H2, H3, H4, etc

• When in edit mode, highlight text and select a Heading from the Paragraph drop-down menu in the Rich Content Editor.
• A Canvas page title is formatted as Heading 1, or H1.
• There should be only one H1 per page, though there can be multiple H2, H3, and H4 headers.
• Avoid skipping main-level headings and apply consistently throughout page.
• Examples: Heading 2 (H2) is great for headlines, Heading 3 (H3) is good for separating sections of content, and Heading 4 (H4) 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

Use the "Ordered and Unordered Lists" Tool.

1. In the content field, select the items you want to format as a list.
2. If order is important, use numbering.
3. If sequential order is not needed, use bulleting.

• 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 descriptive/meaningful link text to indicate the link’s destination.

1. When editing your content, highlight the descriptive text for the link (example, "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.

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

• 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

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