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 on the bottom right of the text entry area
    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. 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.

Canvas rich text editor menu bar showing the lists options button under the more options of the toolbar.

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:
  • 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.
    Canvas table creator within the rich text editor.
  3. Create the desired table size by entering a numeric value for "Cols" and "Rows." Then select "Save."
    Canvas table properties dialogue.
  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.
    Image attributes section, below the upload area from the computer
    • Icons, logos, and decorations that 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

100% helpful - 1 review
Print Article

Details

Article ID: 60346
Created
Tue 8/14/18 12:50 PM
Modified
Tue 5/9/23 4:48 PM

Related Articles (7)

Creating accessible content for in-person and online courses is important to ensure providing your resources to all of your students regardless of ability and provides content for different learning modalities. Follow the tips listed in the checklist to open the door to all of your students within your courses.
Accessibility conformance information about the Canvas Learning Management System (LMS) used for all FSW courses virtual presence.
Guidelines for setting up a Canvas course for a face-to-face course. This article outlines the minimum steps required to ensure students consistent access to basic course resources and records.