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
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
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.
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."
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:
- Basic Techniques for Headings and Structure
- Canvas Accessibility, Headings and Structure
- UC Berkeley, Headings in Canvas
- UC Berkeley, Lists in Canvas
Image Alt Text
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 .
Basic Techniques for Alt Text
- Canvas Accessibility, Alternative Text
- UC Berkeley, Alternative Text in Canvas
- Embed Images in the Canvas Rich Content Editor
Links
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.
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 the table using the "Table" button pr select the "Table" menu item above the text editor.
- 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.
See also: