Canvas Rich Content Editor
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.
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.
What is the Rich Content Editor
Check Accessibility Tool
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.
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.
Once the formatting is cleared, apply Canvas’ formatting styles like headers and lists using the buttons in the RCE.
Remove Text Formatting
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
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.
- Basic Techniques for Headings and Structure
- Canvas Accessibility, Headings and Structure
- UC Berkeley, Headings in Canvas
- UC Berkeley, Lists in Canvas
Image Alt Text
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.
Manual Check Recommended: Check the alt text of each graphic to make sure it is meaningful and equivalent. Mark images decorative where appropriate.
- Basic Techniques for Alt Text
- Canvas Accessibility, Alternative Text
- UC Berkeley, Alternative Text in Canvas
- Embed Images in the Canvas Rich Content Editor
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.
Manual Check Required: The Check Accessibility tool does not flag non-descriptive links.
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.
Note: The Check Accessibility tool consistently flags color contrast that does not meet the minimum requirements. The tool will guide you about fixing it.
Using table properties can be a bit tricky if you’re not very familiar with the RCE.
- Insert the table using the ‘Table’ button.
- Select the number of columns and rows you’d like in the table, reserving the top row for headers.
- 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.
- With the top row actively selected, go back to the ‘Table’ button menu.
- Select ‘Cell’ in the dropdown menu, then select ‘Cell Properties.’
- In the Cell Properties dialogue, change the Cell Type to ‘Header.’
- 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.