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

Users on a keyboard can access the tools on the Rich Content Editor with these keyboard short cuts.
Note: The Macintosh FN key is on the lower left of the keyboard and is separate from the numeric function keys.

Rich Editor Keyboard Commands
Function Windows Macintosh
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
Open List of Commands ALT+F8 FN+OPTION+F8

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. First upload or find the image. The image can come from your computer drive, Flickr, or another source.
  2. In the Rich Content Editor, click the picture icon to open the embed image tool.
    Embed Image icon
  3. Find the image to upload. Uploaded images are in the Canvas tab.
  4. In the Attributes section, add ALT text by replacing the image file name with a short description of the image.
  5. Click Update to complete the process.

Canvas image upload screen

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. The Paragraph style is equally important for allowing a screen reader to read smaller chunks of text.

Styles menu with Header options
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.

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

Insert Table Caption

  1. Follow the Canvas-provided instructions on how to insert a table in Canvas.
  2. Highlight the table.
  3. Click the Table insertion tool to reveal the menu.
  4. Select Table Properties in the menu.
  5. Check the option for Caption on the General tab, then click Ok.
  6. A slot to enter a table title will appear in the Rich Content Editor.

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. Click the Table insertion tool to reveal the menu.
  3. Select Cell : Cell Properties in the menu.
    Table menu showing Cell Properties option
  4. In the Cell Properties window, change the Cell Type to “Header cell”.
  5. Set the Scope to “Column.” Click OK to save the settings.
    Cell Properties for a header cell with scope of row
To set the first column cells to headers, highlight that column and follow steps #1-4 above. In step #5, set the “Scope” to Row.

Top of Page