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

Full Canvas Rich Content Editor with title field, buttons and body description field.

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

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 button

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.

Before you select ‘Save and Publish,’ click the ‘Check Accessibility’ 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:


Clear Formatting


Clear all formatting when pasting content from external sources like Word documents, PDFs, and emails. Other applications use their own semantic structures 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.

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


Headers


Formatting headers in the RCE is easy. Select the paragraph dropdown menu and select Header 2 <h2> through Header 4 <h4>. The Title input field is the Header 1, so all pages already have an <h1> tag.

Paragraph and Header dropdown menu

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

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

See also:


Image Alt Text

How To Add Alternative Text to an Image Example.

Adding alternative text is integrated in the Attributes section of Insert/Edit Image dialogue.

By default, the Alt text input field is automatically filled with the name of the image file. Most likely, the default file name does not create an equivalent description of the information in the image.

Add your own concise and equivalent description of the image, then select the ‘Update’ button.

Attributes section of the Insert/Edit dialogue

Manual Check Recommended: Check the alt text of each graphic to make sure it is meaningful and equivalent. Mark images decorative where appropriate.

See also:


How to use the Link to URL button function example

Embedding hyperlinks in text is easy. Select the text you want to link, then select the ‘Link to URL’ button that resembles a chain link.

Avoid pasting full URLs since they don’t give clear expectations about where they go.

Instead, use the link destination to guide you. For example, when linking students to a book or article, use the title of the book or article to create your link.

Do: Reach Everyone, Teach Everyone: Universal Design for Learning in Higher Education
Don't: https://ebookcentral-proquest-com.ezproxy.rice.edu/lib/rice/detail.action?docID=5597807

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

See also:


Color


The RCE includes buttons for formatting text color (foreground) and background color.

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

Text color picker

Note: The Check Accessibility 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.

Using table properties

  1. Insert the table using the ‘Table’ button.
  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: