Logo: Accessibility Learning PathA certification for this topic is available in the Accessibility Learning Path. The self-paced Canvas course includes detailed how-to instructions and self-check exercises.

Page Content

About the Rich Content Editor

The Rich Content Editor is the Canvas WYSIWYG editor that can be used to create accessible HTML content for images, links, headings and tables. The following Canvas features use the Rich Content Editor:

  • Announcements
  • Assignments
  • Discussions
  • Pages
  • Quizzes
  • Syllabus

Keyboard Alternates for Rich Content Editor

Editing Shortcuts

Users on a keyboard can access the tools on the Rich Content Editor with these Canvas editor keyboard short cuts. They include common shortcuts such as CONTROL+B (Windows) or COMMAND+B (Mac) for making text bold.

Note: The key mappings cannot be modified in Canvas.

Navigation Shortcuts

Additional keyboard shortcuts to tab within the interfaces is available by tabbing to and selecting the View keyboard shortcuts icon above or below the interface
Icon looks like a small keyboard.

Rich Editor Keyboard Commands
Function Windows Macintosh
Open List of Commands ALT+F8 FN+OPTION+F8
Open Editor Menubar ALT+F9 FN+OPTION+F9
Open Editor Menubar ALT+F9 FN+OPTION+F9
Open Toolbar ALT+F10 FN+OPTION+F10
Select Tools Arrow Keys or TAB Arrow Keys or TAB
Return to Text Area ESC ESC

 

Add ALT Text to Uploaded Images

Using the Rich Content Editor, you can add ALT text to images embedded into content. These images have to be first uploaded to your personal or course files. The steps are listed out below:

  1. In the Rich Content Editor upload or find an uploaded image. The image can come from your computer drive, or be already uploaded into Canvas.
  2. Select your image and click the box for Image Options to open a new window.
    Note: Another option is to go to the HTML editor view and edit the alt="" attribute within the img image tag.
  3. In the Image Options window, enter in 1-2 sentence description in the top Alt Text field. Verify or change other settings as needed.
  4. Select the Done button to complete the process.

Image options window with Alt text set to John Ross in formal Western clothes.

Use Heading Styles

Headings and subheadings are used in longer documents to help readers develop a mental map and skip to different sections as needed. Users on a screen reader can also make use of headings, but only if they are semantically tagged as headings.

This can be easily done in Canvas by using “styles” such as Header 2, Header 3 and so forth within the Rich Text Editor. The Paragraph style is equally important for allowing a screen reader to read smaller chunks of text.

Open Paragraph menu with options for Heading 2-4.

Use Styles like Header 2 or Header to adjust font size in Canvas content.

Do not use Font Sizes options to format text. Screen readers do not recognize these as headings.

Use Meaningful Link Text

Many screen readers including JAWS and VoiceOver give users the option to read just the links on the page. It’s important that text for inserted links describe a specific destination. Avoid generic terms like “here” and “read more”.

Math Equations

The Canvas Math Editor will convert an inputted equation to MathML for users on a screen reader. See the Canvas Math Editor for details on how to create a math equation.

Add Language Tag (in HTML code view)

A language tag (or attribute) indicates the language of the text to a screen reader and a search engine. By default, the language in all Canvas is set to English (i.e. <html.... lang="en">).

However, if you include non-English content, it should have its own tag. Otherwise a user on a screen reader will not be able to hear foreign language content spoken correctly. Instead, all words will be pronounced as if they were in English.

How to Add a Language Tag

Unfortunately, language tagging can only be done while viewing HTML code.

  1. Within the Rich Content Editor, click the HTML Editor link in the upper right. This will open up the window showing the HTML code.
  2. Add language attribute tags to sections of non-English content following examples on Language Tags in HTML.

Uploaded Files

Any files uploaded into Canvas should be optimized for accessibility. Options for different file types are given below:

Recommended File Types

Not Recommended

Alternatives for these file types are recommended because these formats require a great deal of time and technical expertise to make them usable for all audiences.

Allow File Downloads

It’s also important to allow students to have the option to download files or open them in a blank window as well as view them through Canvas. This allows students using different assistive technoclogies or devices to view the files outside the Canvas environment. Doing so allows students to take advantage of the accessibility features in the native document software.

There have two options, both of which allow for the files to be downloaded or previewed within Canvas.

  1. They can be added as stand-alone content within a module, and a link to download the document will be auto-generated at the top of the page.
  2. They can be linked to from a page. In this case, the link is designed so that there are options to either preview the document in Canvas or to open it in a new window, which will allow for downloading as well.

Create Accessible Tables

About Accessible Tables

For screen reader accessibility online data tables, should have have the following features. Note that both will also provide additional formatting cues useful to sighted users.

  • A CAPTION for the title of a table
  • The first row should contain HEADER cells with SCOPE set to “col”. These cells should describe the contents of each column.
  • Optionally, the first column can contain HEADER cells with SCOPE set to “row”.

Both features allow screen reader (and sighted) users to more easily determine the purpose and structure of a table.

Canvas Table with Caption and Headers

The example image below shows a course requirements table in the Rich Content Editor with both a CAPTION “Requirements by Percentage and Points” for the title and HEADER cells at the top for. Note that headers are bold faced and centered.

Note: By default, Canvas may not show borders on tables, but they can be added in the Table Properties window during the process to insert a table caption. See details below.

Caption is Requirements by Percentage and Points. Headers are Requirements, Percentage and Details

Insert Table Caption and Edit Borders

  1. Follow the Canvas-provided instructions on how to insert a table in Canvas.
  2. Highlight the table.
  3. Select the Table link in the top menu, then choose Table properties.
    Open Table menu in Canvas.
  4. In the Table Properties window, check the option for Show caption.
    Table Properties window with show caption checked..
  5. Click Save to complete the process.
  6. The table should now have a blank spot above the table. In the blank spot, enter in a title for the table.

Set Cell Properties to Headers

By default Canvas tables do not include headers, but you can change the top row or the left column to headers in the Cell Properties option.

Avoid using the Merge Cells and Split Cells tools. This will generally disorient a user on a screen reader.

  1. In a table highlight the cells of the first row.
  2. Select the Table link in the top menu, then choose Cell : Cell Properties. A new window opens.
  3. In the Cell Properties window, change the Cell type to “Header cell”.
  4. Set the Scope option to “Column.” Click Save to complete the process.
  5. To convert the first column cells to headers, highlight that column and follow steps #1-4 above. In step #4, set the Scope option to “Row.”

Cell properties window with cell type set to header cell and scope set to column.

Top of Page