How To: Create Accessible Canvas Pages

Canvas Pages offer a rich content editor that makes editing, formatting, and checking accessibility for issues straightforward. Pages, instead of loading files, are the preferred format to present content to your students as they won't need special software, only a web browser, and an Internet connection. Students are able, in turn, to quickly access the course content on a wide array of devices and easily navigate the course by screen readers. Correctly formatting your Canvas Pages will ensure they are accessible to all students and comply with WCAG 2.0 guidelines. The sections below will walk you through formatting best practices for Canvas Pages.

Table of Contents

Page Headers

Headings (rather than bold or enlarged text) provide structure, organization, and focus points making it easier to navigate long documents and are essential in creating accessible content.

1. Within the Canvas course select the "Pages" option
2. Create a new page or edit an existing one
3. Simply highlight the text and select the appropriate heading style within the "Paragraph" drop-down.
   
4. Be sure to "Save" every so often to avoid losing your work.
5. Before finally selecting the "Save & Publish" button select the "Check Accessibility" icon on the bottom right of the text entry area
   
6. Add and "Apply" any information it may request.
7. Select the "Save & Publish" button.

NOTE:

• "Header 1" is for the page's title, all other headers may be used more than once beginning with two.

Table of Contents

Descriptive Links

Screen readers will read out the text associated with each link on the page or the URL (if it is the only text provided). The user would then need to listen to the whole page up to the point of the non-descriptive link to gain context of where it will lead. Following consistent linking guidelines within Canvas will ensure students, with or without a screen reader, can better navigate the course content.

• Underlining non-linked text for emphasis should be avoided, users typically associate underlined text as a link.
• Descriptive link text should describe the linked content rather than the generic language such as "click here", "read more", or "More info".
  • Examples of descriptive links follow below:
    • "Please visit the FSW Admissions Homepage for additional forms and information."
    • "Fill out the Student Engagement workshop survey to provide feedback."

Table of Contents

List Styles

Lists arrange and/or order content within sections when creating a list highlight existing text or press the appropriate list type before beginning a list. Do not use dashes or asterisks to create lists. To add a list in the Canvas Rich Content Editor, select the three vertical dots "More..." menu, and then the second option will present list formats.

Use the following types of lists:

• Ordered (or Numbered) – Should be used to convey a sequential process. Ordered lists use numbers, letters, or roman numerals for each list item.
• Unordered (or Bulleted) – Should be used to provide emphasis, focus attention, or to group like concepts that do not require a sequential order.

Table of Contents

Emphasis & Fonts

• Colors should never be the only visual means of conveying information, indicating an action, prompting a response, or distinguishing an element. Proper text contrast and font selection provide easy reading when printed in grayscale (student printing costs $0.10 per black and white page, save students money on printing).
  • The text should be black on a white background, in general, to provide the highest contrast and readability.
  • The minimum allowed contrast ratio is 4.5:1 for text and images of text. The following tool is excellent for measuring contrast and displaying what the color choices will look like:
    • Color Contrast Checker from TPGi
• Use a consistent sans-serif font such as Arial, Helvetica, Open Sans, Tahoma, and Verdana with 12 point size as a minimum.
• Be sure to use Bold or italic text to provide emphasis sparingly instead of underlining or All Caps.
  • Do not use rapid blinking or moving text; make sure transitions are slow.

Table of Contents

Tables with Headers

Use tables to display data in rows and columns, do not use them for layout purposes. Tables must have headers specified as the top row, the first column, or both for accessibility purposes. Follow these steps to insert a correctly formatted table in a Canvas page:

1. "Edit" the page.
2. Insert a table by selecting the Insert menu of the Rich Content Editor as seen below.
   
3. Create the desired table size by entering a numeric value for "Cols" and "Rows." Then select "Save."
   
4. Enter text in the table cells.
5. Select the "Check Accessibility" icon
   
   • Address the issues listed such as adding a caption to the table.
     
     • Add the caption and select apply; the caption will be added by the tool and advance to the next issue to address
   • The next issue is to select the header for the table.
     
     • After choosing the appropriate table header select "Apply", other issues may follow.
       • Address any remaining accessibility issues.
6. Close the "Accessibility Checker" and "Save" the content.

Table of Contents

Images

Images should enhance the textual course content and may also be decorative.

• Only add images and figures integral to the meaning of the content.
  • Images with a significant amount of text, such as comic strips or infographics should also have a text transcript available.
• Use good quality images (800px by 600px resolution is sufficient), not high quality, to ensure fast loading for students on mobile devices.
• Images require descriptive alt (or alternative) text to support screen readers.

Adding alt text descriptions to images in Canvas

1. Select the "Edit" button within a Canvas Page
2. Select the "Embed Image" icon to add an image uploaded to the Canvas files, URL, and Flickr.
   
3. Once an image is selected to be added, the "Alt text" in the "Attributes" section will be populated with the image's file name.
4. Remove the file name within the "Alt text" area and provide a brief description of the image avoiding the words "picture", "graphic", or "depiction" as the first word.
   
   • Icons, logos, and decorations that are not essential should be marked "Decorative image" with no text provided in the "Alt text" area.
     
5. After providing the alt text or marking the image as decorative select the "Update" button to insert the image.
6. Select the "Save" button below the Rich Text Editor once completed.

Table of Contents