How To: Create Accessible Canvas Pages

individuals in a school lab working on computers

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.
    Canvas rich text editor with paragraph drop-down menu expanded displaying the header options available
  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
    canvas accessibility checker icon
  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".

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. Select the list style in the editor as shown in the image below:

Canvas rich text editor menu bar

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 group like concepts which do not require a sequential order.

Table of Contents


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).
    • Text should be black on a white background, in general, to provide the highest contrast for readability.
    • The minimum allowed contrast ratio is 4.5:1 for text and images of text. The following tools are great for measuring contrast and displaying what the color choices will look like:
  • 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 text to provide emphasis sparingly instead of: italics, 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 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 table icon in the rich content editor as seen below.
    Canvas table creator within the rich text editor.
  3. Create the desired table size by selecting the appropriate box. The size selection will insert the table onto the page.
  4. Enter text in the table cells.
  5. Select the "Check Accessibility" icon
    canvas accessibility checker icon
    • Address the issues listed such as adding a caption to the table.
      Canvas accessibility checker showing the created table does not have a caption and allows for entry of a caption without leaving the tool.
      • 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.
      Canvas accessibility checker showing the created table does not have a header set and provide a drop down option to correct issue
      • 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.
    Canvas insert / edit image window with focus on the embed image rich text editor icon and alt text attributes
  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 which are not essential should be marked "Decorative image" with no text provided in the "Alt text" area.
      Canvas embed image with decorative image selected to have a screen reader skip the image
  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