Canvas Rich Content Editor (Staff Guide)

There are two accessibility tools in Canvas, Canvas's own accessibility tool and Ally. Ally provides a comprehensive review of your content allowing you to correct issues and ensure your content is accessible. Canvas's own accessibility checker is also available at the bottom of the text editor window. You will also find a description of keyboard shortcuts, providing a list of activities and their keyboard equivalents. 

To add files to Canvas, you need to click on the documents icon in the toolbar, click the drop down arrow for more options, including the option to Upload a Document, View Existing Course Documents, or access your personal user documents in Canvas.

Selecting any of these options opens up a panel that allows you to browse and search for documents.

How to add links to course, group, or user files (opens in a new tab)

Using the headings in your text makes the content more accessible to students. Ensure you use the Heading levels to represent titles and nested elements in your content. 

Tip: Avoid using particular fonts or text decoration as this can make it difficult for students to read text.  Use the default heading structure to increase and decrease the size of your text.

You can now use the link icon to provide quick links to URLs outside of Canvas as well as other sections of your course. Similar to adding documents, see above, you can now search links within the course, so that they can be re-used across the site with ease.

The new icon maker allows you to create simple and reusable Icons directly inside Canvas. You could use them on your homepage to help signpost information or help improve the visual interest of your course. You can configure your icon using a number of options, including text alignment, background colour, text colour and images.

Once you have accessed the icon maker panel, you can configure your options, including text alignment, background colour, text colour and select images.

• How do I create an icon using the Rich Content Editor Icon Maker? 

ALT Text

Adding visual imagery can help make your content more engaging and help create natural breaks in your content. It is important to provide alternative text, this is called ‘Alt Text’ for any images which convey information, particularly functional images. People who use screen readers need this information to understand the purpose of the image. When creating your icon, ensure you add a title for your icon in the ‘Alt Text’ box for the icon.

Colour Contrast

The colours you choose are also important. Graphics require a minimum 3:1 colour ratio, which means you need to ensure there is good contrast between the background and foreground colours in your image. Anyone viewing the image needs to be able to clearly see any icons or text. The following examples show good and bad practice:

You can now expand the editor to full width of your screen. You’ll find this option alongside the accessibility tools, beneath the editor. Once in full screen mode, you can press ESC on your keyboard to exit, or use the text-based menu and select ‘view/full-screen’ to exit.  

There are alternative options for adding video to your course, however we recommend you use Panopto to add media content to Canvas. Panopto offers a much more accessible experience to students by ensuring closed captions are added and that the content is responsive. 

External tools are available in the ‘Apps’ group. Click on the ‘Apps’ icon to see options for adding content: 

• Canvas Commons 
• Microsoft Office 365 
• Panopto 
• SlideShare 
• Twitter 
• Vimeo 
• YouTube 

The HTML editor is incorporated into the bottom toolbar: