Canvas Rich Content Editor

RCE Overview

The Rich Content Editor (RCE) is a WYSIWYG editor available anywhere you create new content in Canvas, including:

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

Canvas Rich Content editor with buttons and sample text.

The RCE has everything you need to create content that meets the WCAG standards.
It includes buttons for text styles and alignment, colors, lists, tables, videos, links, images, and headings.

You can also toggle between the Rich Content Editor and HTML Editor if you prefer to have direct access to the HTML markup.

See also:
What is the Rich Content Editor

Check Accessibility Tool

Check Accessibility checker.

The RCE has a handy button to help you check for and fix common accessibility issues.
It’s the button that looks like a person with their arms out, found immediately after the text editor.

Before you select "Save and Publish," use the "Accessibility checker" button to open a side panel where you can resolve each issue.

Important Note: The Accessibility Checker doesn’t flag every issue, so take note where manual checks are recommended or required.

See Also: Use the Accessibility Checker

Clear Formatting

Clear all formatting when pasting content from external sources like Word documents, PDFs, and emails. Other applications use their own markup that can become garbled when converted to HTML.

After pasting content into the RCE, select the pasted content, then select the "Clear Formatting" button. It looks like an Italic, underlined capital letter “T” with an “X” subscript or TX.

Note that the Clear Formatting button is nested under the "More..." ellipsis.
You can also find Clear Formatting by expanding the "Format" menu item above the text editor.

Clear formatting button.

Once the formatting is cleared, apply Canvas formatting styles like headers and lists using the buttons in the RCE.

See Also:
Remove Text Formatting

Headings

Formatting headings in the RCE is easy. Select the "Block" button to expand a menu of styles.
Use Header 2 <h2> through Header 4 <h4> to mark up your headings in a logical order.
Note that the "Page Title" input field above the text editor uses the Header 1 role, so all pages already have an <h1> tag.
You can also find heading styles by expanding the "Format" menu item above the text editor, then select "Formats."

Expanded Blocks button menu with heading styles.

Structure your Canvas content, starting with <h2>, making sure to properly nest any additional headings.
You can customize the appearance of the font size, style, and color after you apply the proper heading.

Manual Check Recommended: the Accessibility Checker tool is not consistent about flagging issues with headers.

See also:

Image Alt Text

Embed image button menu expanded with Upload Image selected.

To embed an image, you can either select the "Images" button, or expand the "Insert" menu and select "Image."
Adding alt text is integrated in the Attributes section of Insert/Edit Image dialogue.
Type a concise and equivalent description of the image, then select the "Submit" button.
Note that you can edit alt text by selecting the image, then click "Image Options" or press Ctrl + F9 .

Image Alt Text field under the Attributes heading.

Basic Techniques for Alt Text

Links button menu expanded with Course Links selected.

Embedding hyperlinks in text is easy.
Select the descriptive text you want to link, then select the "Links" button that resembles a chain link.

  • External links: past the URL into the "Link" field.
  • Internal links: use the side panel to choose links from Pages, Assignments, Quizzes, Announcements, Discussions, Modules, or Course Navigation.

Remember to make your link text as descriptive as possible.

Example: Click here to read the syllabus instead of Click here.

Manual Check Required: The Check Accessibility tool does not flag non-descriptive links.

See also:

Color


The RCE includes buttons for formatting foreground and background colors of text.

Avoid color combinations that don’t meet the minimum contrast ratio.
Also, avoid using color exclusively to convey meaning.

Text color picker expanded with Dark Red selected

The Accessibility Checker tool consistently flags color contrast that does not meet the minimum requirements.
The tool will guide you about fixing it.

See also:

Tables


Using table properties can be a bit tricky if you’re not very familiar with the RCE.

Insert Table grid picker expanded.

  1. Insert the table using the "Table" button pr select the "Table" menu item above the text editor.
  2. Select the number of columns and rows you’d like in the table, reserving the top row for headers.
  3. When the table is inserted, select all cells in the top row either by clicking and dragging across the cells, or use the Shift + arrow keys.
  4. With the top row actively selected, go back to the "Table" button menu.
  5. Select "Cell" in the dropdown menu, then select "Cell Properties."
  6. In the Cell Properties dialogue, change the Cell Type to "Header."
  7. Next, change the scope to "Column," then select "OK."

This changes the data cell <td> to a header <th> in the HTML.

Manual Check Recommended: The Accessibility Checker is consistent about flagging tables that are missing headers and captions. However, manually check to make sure that the table isn’t overly complex with merged and nested cells.

See also: