![Logo: Accessibility Learning Path](https://accessibility.psu.edu/files/2023/09/ALPLogoCatalogSmall.png)
Page Content
About the Rich Content Editor
The Rich Content Editor is the Canvas WYSIWYG editor that can be used to create accessible HTML content for images, links, headings and tables. The following Canvas features use the Rich Content Editor:
- Announcements
- Assignments
- Discussions
- Pages
- Quizzes
- Syllabus
Keyboard Alternates for Rich Content Editor
Editing Shortcuts
Users on a keyboard can access the tools on the Rich Content Editor with these Canvas editor keyboard short cuts. They include common shortcuts such as CONTROL+B (Windows) or COMMAND+B (Mac) for making text bold.
Note: The key mappings cannot be modified in Canvas.
Navigation Shortcuts
Additional keyboard shortcuts to tab within the interfaces is available by tabbing to and selecting the View keyboard shortcuts icon above or below the interface
Function | Windows | Macintosh |
---|---|---|
Open List of Commands | ALT+F8 | FN+OPTION+F8 |
Open Editor Menubar | ALT+F9 | FN+OPTION+F9 |
Open Editor Menubar | ALT+F9 | FN+OPTION+F9 |
Open Toolbar | ALT+F10 | FN+OPTION+F10 |
Select Tools | Arrow Keys or TAB | Arrow Keys or TAB |
Return to Text Area | ESC | ESC |
Add ALT Text to Uploaded Images
Using the Rich Content Editor, you can add ALT text to images embedded into content. These images have to be first uploaded to your personal or course files. The steps are listed out below:
- In the Rich Content Editor upload or find an uploaded image. The image can come from your computer drive, or be already uploaded into Canvas.
- Select your image and click the box for Image Options to open a new window.
Note: Another option is to go to the HTML editor view and edit thealt=""
attribute within theimg
image tag. - In the Image Options window, enter in 1-2 sentence description in the top Alt Text field. Verify or change other settings as needed.
- Select the Done button to complete the process.
Use Heading Styles
Headings and subheadings are used in longer documents to help readers develop a mental map and skip to different sections as needed. Users on a screen reader can also make use of headings, but only if they are semantically tagged as headings.
This can be easily done in Canvas by using “styles” such as Header 2, Header 3 and so forth within the Rich Text Editor. The Paragraph style is equally important for allowing a screen reader to read smaller chunks of text.
Use Styles like Header 2 or Header to adjust font size in Canvas content.
Use Meaningful Link Text
Many screen readers including JAWS and VoiceOver give users the option to read just the links on the page. It’s important that text for inserted links describe a specific destination. Avoid generic terms like “here” and “read more”.
Math Equations
The Canvas Math Editor will convert an inputted equation to MathML for users on a screen reader. See the Canvas Math Editor for details on how to create a math equation.
Add Language Tag (in HTML code view)
A language tag (or attribute) indicates the language of the text to a screen reader and a search engine. By default, the language in all Canvas is set to English (i.e. <html.... lang="en">
).
However, if you include non-English content, it should have its own tag. Otherwise a user on a screen reader will not be able to hear foreign language content spoken correctly. Instead, all words will be pronounced as if they were in English.
How to Add a Language Tag
Unfortunately, language tagging can only be done while viewing HTML code.
- Within the Rich Content Editor, click the HTML Editor link in the upper right. This will open up the window showing the HTML code.
- Add language attribute tags to sections of non-English content following examples on Language Tags in HTML.
Uploaded Files
Any files uploaded into Canvas should be optimized for accessibility. Options for different file types are given below:
Recommended File Types
Not Recommended
Alternatives for these file types are recommended because these formats require a great deal of time and technical expertise to make them usable for all audiences.
Allow File Downloads
It’s also important to allow students to have the option to download files or open them in a blank window as well as view them through Canvas. This allows students using different assistive technoclogies or devices to view the files outside the Canvas environment. Doing so allows students to take advantage of the accessibility features in the native document software.
There have two options, both of which allow for the files to be downloaded or previewed within Canvas.
- They can be added as stand-alone content within a module, and a link to download the document will be auto-generated at the top of the page.
- They can be linked to from a page. In this case, the link is designed so that there are options to either preview the document in Canvas or to open it in a new window, which will allow for downloading as well.
Create Accessible Tables
About Accessible Tables
For screen reader accessibility online data tables, should have have the following features. Note that both will also provide additional formatting cues useful to sighted users.
- A CAPTION for the title of a table
- The first row should contain HEADER cells with SCOPE set to “col”. These cells should describe the contents of each column.
- Optionally, the first column can contain HEADER cells with SCOPE set to “row”.
Both features allow screen reader (and sighted) users to more easily determine the purpose and structure of a table.
Canvas Table with Caption and Headers
The example image below shows a course requirements table in the Rich Content Editor with both a CAPTION “Requirements by Percentage and Points” for the title and HEADER cells at the top for. Note that headers are bold faced and centered.
Note: By default, Canvas may not show borders on tables, but they can be added in the Table Properties window during the process to insert a table caption. See details below.
Insert Table Caption and Edit Borders
- Follow the Canvas-provided instructions on how to insert a table in Canvas.
- Highlight the table.
- Select the Table link in the top menu, then choose Table properties.
- In the Table Properties window, check the option for Show caption.
.
- Click Save to complete the process.
- The table should now have a blank spot above the table. In the blank spot, enter in a title for the table.
Set Cell Properties to Headers
By default Canvas tables do not include headers, but you can change the top row or the left column to headers in the Cell Properties option.
Avoid using the Merge Cells and Split Cells tools. This will generally disorient a user on a screen reader.
- In a table highlight the cells of the first row.
- Select the Table link in the top menu, then choose Cell : Cell Properties. A new window opens.
- In the Cell Properties window, change the Cell type to “Header cell”.
- Set the Scope option to “Column.” Click Save to complete the process.
- To convert the first column cells to headers, highlight that column and follow steps #1-4 above. In step #4, set the Scope option to “Row.”