Canvas Accessibility Guide

Heading levels should be organized hierarchically, just as in a topic outline. The page title in Canvas is always automatically coded as Heading 1. Heading 2 is used for all subtopics on the page, Heading 3 for sub-subtopics, and so on.

To add a heading level to your text

1. Click on the Edit button in the upper right-hand corner of your Canvas page to open the Rich Content Editor window.
2. Highlight the text you want to format as a heading (e.g., Overview, Instructions, Grading).
3. In the upper-left corner of the Editor, select "Paragraph” to open a dropdown menu of heading styles.
4. Choose the heading that fits the topical organization of your content (starting with Heading 2).
5. If you want the headings to be a certain size or format, pick the appropriate heading level first, then adjust the formatting as desired.

Video Demo

[Under Construction]

Additional Information

• To update heading levels in Canvas, see How do I add and modify text in the Rich Content Editor as an instructor? and scroll down to “Change Text Style.”
• To learn more about why logical structure is important to visually impaired users, visit WebAIM’s Headings.

Lists should be formatted using the Canvas Rich Content Editor (RCE) so that it can be read as a list by a screen reader.

To Create Accessible Lists in Canvas

1. Open the Rich Content Editor.
2. Select the list icon* (looks like a bullet point list, three dots and three horizontal lines, stacked vertically).
3. Choose your preferred list convention from the menu.

Using hyphens, asterisks, or other non-semantic characters may create the appearance of a list, but lists created without formatting tools will not be recognized as a list by assistive technology. 

Keep in mind that depending on the content, some list styles are more appropriate than others. For instance, if you are providing instructions that must be followed in order, you should choose an ordered list style. If the list data isn’t sequential, you should use an unordered list style.

*You may not be able to see the list icon if your browser window is too small. You can expand the editor menu by clicking on the overflow menu (three vertical dots).

Video Demo

[Under Construction]

When making links on canvas, link text should be unique within a page. Canvas allows users to make two kinds of links: external links, which lead to web content outside of canvas, and course links, which allow you to link to a variety of course content, pages, quizzes, assignments, and discussions.

Creating Accessible External Links

1. Open the Rich Content Editor.
2. Highlight the intended hyperlink text.
3. Locate and select the Link icon to bring up the Link Options window.
4. Select External Link.
5. Copy the desired URL to your clipboard.
6. Paste the URL into the Link field.
7. Click Done.
8. Select Save in the corner of the Rich Content Editor to save the changes to the page.
   

Creating Accessible Course Links

1. Open the Rich Content Editor.
2. Click the Link icon.
3. Select Course Link to bring up the Add window.
4. Use the Search bar to search for intended resource, or use the dropdown menus beneath the search bar to locate the resource manually.
5. Select the intended resource.
6. Select Save in the corner of the Rich Content Editor to save the changes to the page.
   

Video Demo

[Under Construction]

Additional Information

• To learn more about why links should describe the link destination, see WebAIM’s Links and Hypertext.
• To edit/create hyperlinks in Canvas see How do I edit and remove hyperlinks in the Rich Content Editor?.

General guidelines

1. To ensure proper reading order, organize information left to right and top to bottom.
2. Avoid merging cells. Merged cells can disrupt logical reading order.
3. Provide a text summary of the content if the table contains complex data.
4. Don’t use tables for content layout. Only use tables for tabular data.
5. Avoid using colors with insufficient contrast.

Captioning tables

When writing captions for tables, avoid generic captions (e.g. “Data Table”). Instead, concisely summarize and contextualize the content. If the table is referred to in the text, assure that the table is consistently being referred to by its caption. You can provide an additional text summary of the table if needed.

1. Open the Rich Content Editor. 
2. Select the intended table. Selection is indicated with blue handles at each corner of the table. If you have not yet created the table, you can do so in the Table menu.
3. Click the More… icon.
4. Click the Table icon in the toolbar.
5. Select Table properties.
6. Check the Show caption box. 
7. Save.
8. Now the caption field will be available. Enter the caption into this field.
9. Save.

Provide headers and set their scope

Remembering that screen readers will read left to right and top to bottom, choose whether you will have headers across the top or left side of your table (or both). Be sure to set the scope of the header to properly associate the cells with their header(s).

1. Open the Rich Content Editor. 
2. Select the intended row or column.
3. Click the More… icon.
4. Click the Table icon in the toolbar.
5. For a row, select Row properties. For a column, select Column properties.
6. Change the type of row or column from Body to Header and Save. 
7. Keeping the same area selected, return to the Table icon and select Cell > Cell properties.
8. Under Cell type, select Header cell. Under Scope, select the proper scope. Note: The scope is which set of information the header refers to, so if you are setting a header across the top row, the scope will be column and vice versa.
9. Save.

Use the Accessibility Checker to find errors

Before leaving the page, click on the accessibility checker icon below the text editor. This will walk you through any issues and how to resolve them.

Video Demo

[Under Construction]

Additional Information

• Creating accessible tables in Canvas
• Using the Canvas Accessibility Checker

Using color can help convey information, but many users cannot benefit from the use of color due to visual impairment or color blindness. All users benefit from color contrast that makes information easy to read.

General guidelines

1. Ensure that the contrast between text and background is high enough to be easily readable.
2. Don’t rely on color alone to convey information. Combine with visual cues other than color.
3. Avoid combinations known to be problematic for colorblind users (e.g. red/green).

Changing Text Color

1. Open the Rich Content Editor.
2. Highlight the target text.
3. Use the Text color and Background color tools to pick a color.
4. Save.
5. Before leaving the page, click on the accessibility checker icon below the text editor. This will walk you through any issues and how to resolve them.

Video Demo

[Under Construction]

Additional Information

• Creating alternative text in Canvas
• Using the Canvas Accessibility Checker

General Guidelines

1. Be specific and concise. Consider the purpose of using the image and the context it is being presented in. Note: Alt text exceeding 120 characters will be flagged by the Accessibility Checker, but there is no hard limit.

2. Don’t start your description with “An image of…”. The screen reader will tell the user that an image is being described.

3. For complex images, provide a brief summary and describe the contents more fully in the text.

4. For icons, describe the purpose of the icon rather than its shape (e.g. Describe the magnifying glass icon for searching as “Search” rather than “magnifying glass”).

Adding Alternative Text to Canvas

1. Open the Rich Content Editor. 
2. Select the intended image.
3. Click Image Options.
4. Enter your description in the Alt Text field. If your image is decorative, select Decorative Image instead.
5. Before leaving the page, click on the accessibility checker icon below the text editor. This will walk you through any issues and how to resolve them.

Video Demo

[Under Construction]

Additional Information

• Creating alternative text in Canvas
• Using the Canvas Accessibility Checker

Non-English words will be read with the default English pronunciation is they are not marked with the language attribute. For many languages, the result is incomprehensible and inaccessible for students using assistive technology. This can be remedied by accessing the HTML layer of the page and updating the language attribute on any non-English text.

To Change the Language Attribute

1. Open the Rich Content Editor on the page you’d like to update.
2. Select the HTML Editor icon (</>).
3. Locate the non-English text you’d like to tag.
4. Type  <i lang =”xx”>
5. Replace the x’s with the country code that corresponds to the language you are using. A link to the country codes has been provided at the bottom of this page.
6. Add the </i> tag to the end of the non-English language section, before the closing </p> tag.
7. Save the edits to the page.  

Video Demo

[Under Construction]

Additional Information

• For more information see Canvas: Using the Rich Content Editor to Apply Language Attribution Tags.
• For country codes see W3 Schools: HTML ISO Country Codes Reference.
• To change the language for an entire page of content, see Language on Websites.

Quiz questions need to be clear and accessible for all learners. Without proper care it is easy to write questions that assistive technologies (such as screen-readers) cannot properly interpret creating inaccessible and confusing quizzes.

Use Classic Quizzes

New Quizzes have been found to have issues with accessibility. Use Classic Quizzes instead. This option can be chosen when you first create a quiz in a course: 

If you choose New Quizzes and later decide you want to go back to using Classic Quizzes, you will need to reset the default quiz option by clicking Quizzes in the left-hand course menu, clicking the three dots option button (located next to the +Quiz button on the right-hand side of the Quizzes page), and then selecting Reset quiz engine choice.

Clearly State What Kind of Answer the Question is Looking for

• If multiple answers are possible clearly indicate in the instructions that “Multiple answers or possible” or “Select all that apply.”
• If multiple questions follow a single prompt, indicate this with “Use the following prompt for Questions 3–7.”
• If the question is a fill-in-the-blank type question, clearly mark this in the instructions with “Fill in the blank in the following sentence.”

General Rules

• Avoid Abbreviations or All Caps
• Avoid Using Time Limits for Quizzes
• Use Language Attribute Tags for non-English Text
• Use the Equation Editor for Equations
• Reminder: Use Alt Text for All Images

There are a number of tools built into Canvas in order to provide a more accessible experience.

Manage User Settings

All accessibility settings can be managed by clicking Account and then selecting Settings: 

Scroll down to Feature Options to adjust settings. Here we will focus on the settings most related to student accessibility.

Auto Show Closed Captions

This option enables closed captions on videos as the default. Note: third party tools, such as Youtube, are not supported by this tool.

Disable Canvas Keyboard Shortcuts

Users using screen readers or keyboard navigation will have an improved experience if Canvas’ keyboard shortcuts are turned off.

High Contrast UI

This option enhances the color contrast of the user interface making it more visually distinct and easy to identify.

Microsoft Immersive Reader

Enables the Microsoft Immersive Reader. To learn more about this feature see the Microsoft Immersive Reader website.

The Canvas Rich Content Editor (RCE) includes an Accessibility Checker (AC) tool to help you verify that the content you create in the RCE is accessible. The AC helps you identify and correct issues impacting learners who use screen readers or other assistive technology to understand what is on the page. Problems can include missing alternative text for images, missing table captions and headers, incorrectly formatted lists, and low color contrast.

How to Use the Accessibility Checker in Canvas

1. Start by clicking on the "Edit" button in the top-right of your Canvas page to open up the Rich Content Editor (RCE).
2. Locate the Accessibility Checker (AC) icon under the editing box. (It looks like a person with outstretched arms in a circle.) If you see a number by the icon, the AC is notifying you that there are accessibility problems within the page. 
3. Click on the AC icon to open the AC sidebar. The sidebar shows you the number of issues it caught, then outlines the first issue and gives you an opportunity to fix it within the sidebar.
4. Once you have fixed the issue, click on Apply in the bottom right corner of the AC sidebar.
5. If there are more issues, click Next in the bottom of the sidebar to move to the next issue. 
6. Once all identified issues have been resolved, you’ll be awarded with confetti and balloons!

Video Demo

[Under Construction]

Additional Information

• Canvas: How do I use the Accessibility Checker in the Rich Content Editor as an instructor?

Some students may have additional time requirements as part of their academic accommodations with DRES. These directions will allow you to accommodate them.

Moderate this Quiz

Open the quiz you want to extend time on and then select Moderate This Quiz in the upper right corner.

Select the Student(s) who need extended time

On the Moderate Quiz page, locate the student(s) who need an extension. Check the box to the left of each student. After selecting the students, scroll to the bottom and select Change Extensions for x Selected Students.

Add additional time

On the Student Extensions pop-up window, enter in any extra time on the attempt in minutes. Click Save.

Video Demo

[Screencast Placeholder]

Additional Resources

For expanded instructions see Instructure’s documentation on adding time to timed quizzes.

Immersive Reader (IR) can be used to read text on Canvas pages aloud, and provides options for adjusting font size and style, line and text spacing, and background colors. This is not only helpful to blind and low vision learners but can increase focus and comprehension for all users. For ESL students, there is also a translation function, a picture dictionary, and options for labelling parts of speech. Both instructors and students have access to the IR, and IR is automatically enabled for Canvas courses at UIUC.

How to Use the Immersive Reader in Canvas

• Click on the Immersive Reader button in the top right corner of a Canvas page. The IR will open in a full-page “immersive” view.
• To have the IR start reading the page, click on the start button at the bottom middle of the screen. The IR will begin reading the page, highlighting each word as it reads.
• To select a voice and adjust the speed of the reading, click the settings icon next to the start button.
• To pause, press the start button at the bottom middle of the page. To restart, press the start button again.
• To start the reading in a different location, put your cursor where you want the reading to start, then click the start button again.
• To adjust the highlighting, click on the book icon in the top right corner of the page. This icon will also give you options for translation, and a picture dictionary.
• To adjust text size, font, spacing, or color, click on the aA icon in the top right corner of the page.
• To close the IR, click on the back arrow in the top left corner of the screen.

Canvas Immersive Reader Limitations 

• Will only read text created with the Rich Content Editor on the Canvas page
• Not available in the Discussion or Quiz tools 

• Embedded links, videos, tables, and mathematical formulae won’t appear 

• Doesn't work in Canvas mobile apps, only in browser 

• Embedded images will not be picked up if alternative text isn’t set

Video Demo

[Under Construction]

Additional Information

• How do I use the Microsoft Immersive Reader?

Under Construction

Under Construction

Canvas has a number of built in keyboard shortcuts for more accessible navigation.

Assignments Index Page

Course Settings: Navigation Tab

Discussion Threads

Gradebook

Modules Index Page

Speed Grader

Media Player

Rich Content Editor