Page Content

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 Toolbar ALT+F10 FN+OPTION+F10
Select Tools Arrow Keys or TAB Arrow Keys or TAB
Open List of Commands ALT+F8 FN+OPTION+F8

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.
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.

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.

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

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.

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

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.

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

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.

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.