Building from Scratch Build an Accessible Canvas Page from Scratch

The easiest way to make a Canvas page accessible is to have accessibility in mind while you are creating it. On this page, you will learn how to build an accessible Canvas page from scratch. You may want to follow along in your own Canvas page as we go.

Headings

You probably remember headings from all of the other modules. Well, they are just as important in Canvas as they were in Word documents and PDFs. Headings add structure to your page, which allows screen readers to quickly navigate.

There's an important thing to keep in mind while adding headings to Canvas, the title of the Canvas page is Heading 1. You can't un-tag it as a Heading 1. It's just always there. So, we start with Heading 2. Note: If you are using the DesignPLUS Sidebar to style your page, the banner title is marked as a Heading 2, so start with Heading 3 below that.

Read the instructions instead

In a blank Canvas page:

Type in the headings of your page. Your page will look like an outline at this point.
Style the headings as Headings.
1. Click somewhere in the first heading you typed.
2. In the Rich Content Editor tool bar, use the "Blocks" dropdown menu (it normally says "Paragraph") to select Heading 2.
3. Do the same with Heading 3 and Heading 4 as needed. You can have Heading 5 and Heading 6, but the process is slightly different. To format text with these headings, select Format in the Rich Content Editor Tool bar, hover over Formats, hover over Headings, select the correct heading.

Resources

For more information about headings, please see the following resource:

Beginner's Accessibility with the Rich Content Editor

Lists

Always use ordered (i.e., a numbered list) or unordered lists (e.g., a bulleted list) when making lists in Canvas, as opposed to manually writing out numbers or dashes. Lists tagged as lists will be easier for all of your students to navigate (screen reader or not).

Read the instructions instead

Add the text you want to be in a list. Each new item of the list should be on a new line.
Select all of the text you want to be in a list.
In the Rich Content Editor toolbar, select the Ordered and Unordered Lists dropdown menu. Select the type of list you would like to use.
If any of your items need to be sub-items (indented to the right) then place your cursor at the beginning of that list item and press the tab key on your keyboard.
- You can format an indented list with a different bullet/number by clicking into the list item and selecting a new style from the list menu.
To add a blank line after a list, place your cursor at the end of the last list item and press enter/return on your keyboard until the list formatting is gone.

Resources

For more information about lists, please see the following resource:

Beginner's Accessibility with the Rich Content Editor

Text Formatting

Excellent news! Canvas formats all bold text as strong and all italicized text as emphasis. You don't have to think about this one!

Links

As discussed previously, links should always be descriptive.

Keep in mind: You should always delete unnecessary or unneeded links from your document. This is especially true if you have copied text from a webpage, which often include links in their text. Only retain links that are relevant and useful.

Read the instructions instead

Add a link from scratch

Select the text you would like to link. Ensure that this text is descriptive.
Select the Links dropdown in the Rich Content Editor.
If the page you are linking to is in the course, select Course link. Otherwise, select External link.
1. Course link: Use the panel to select the correct page you want to link to.
2. External link: In the dialog box, paste the URL into the Address box. Select Done.

Change a non-descriptive link

Click inside the link (not on either edge).
Type in what you would like the link to say.
Delete the text in the link that you no longer want there.

Resources

For more information about links, please see the following resource:

How do I create hyperlinks to course or group content in the Rich Content Editor?

Tables

Tables can be difficult for screen readers to navigate unless they are correctly formatted. Even the best screen readers struggle to navigate nested, split, or merged cells, so avoid using these in Canvas pages. As mentioned in Module 1, avoid using tables "aesthetically." That is, they should not be used to design the layout of a page. We have access to tools that can achieve the same layout as a table, without tables. Contact elearningsupport@slcc.edu for more information.

Consider the following when using tables:

Avoid using tables for layout purposes.
Ensure the "First Column" and "Header Row" are properly formatted.
Introduce tables by including a caption to offer needed context.

Read the instructions instead

Note: Besides following the steps below, you can copy and paste a table from a Word document. The formatting is not preserved, but it will make the process a little easier if you already have the table.

Add a table

Place your cursor where you would like the table to go.
In the Rich Content Editor toolbar, select the Table dropdown menu.
Hover over Table and select the correct number of rows and columns you need.
Enter information into the table.

Header Row and Column

Click on a cell you would like to be part of a Header Row or Header Column.
In the Rich Content Editor toolbar, select the Table dropdown menu.
Hover over Cell and select Cell properties.
In the Cell Properties dialog box:
1. Change the Cell type to Header cell.
2. Change the scope to Column or Row. Column if it's a cell along the top; Row if it's a cell along the left side.
Select Save.
Repeat these steps for all other cells that should be part of the Header Row or Column.

Table Caption (Title)

Click on the table.
In the Rich Content Editor toolbar, select the Table dropdown menu.
Select Table properties.
In the Table Properties dialog box, check the "Show caption" checkbox.
Select Save.
Edit the Table caption to be descriptive of the table.

Table Styling

Canvas does not have many table styling options. If you are an HTML pro, you may be able to style the pages exactly as you want using the code. However, the rest of us must use the Table Properties and Cell Properties.

Click on the table.
In the Rich Content Editor toolbar, select the Table dropdown menu.
Select Table properties.
Switch to the Advance view using the tabs at the left.
Change the Border style, Border color, and Background color as desired.

To style a single cell, do all of the same things above, but choose Cell and Cell properties instead of Table properties.

Resources

For more information about tables, please see the following resource:

How do I insert a table using the Rich Content Editor?

Images

As discussed in Module 1, alt text provides descriptions of images for screen readers and for students who may have a poor internet connection. Canvas makes it easy for us to add alt text.

Read the instructions instead

Add image to Files

Before adding an image to a page, it is useful to add it to the files of your course. That way you can keep the files organized and easily find what you need.

Click on the Files tab in your course.
Locate the folder where you would like to store the image.
Drag and drop the image you want to use into the folder OR use the blue upload button to locate the image on your device.
Now return to the page where you would like to place the image.

Insert an image

Place your cursor where you would like the image to go.
Select the Images dropdown menu from the Rich Content Editor toolbar.
Select Course Images.
Select the image you would like to use from the Add panel (it should be near the top if you just added it).
Resize the image, if needed, using the blue squares on the corners of the image.

Add alt text

Select the image.
Select Image Options that pops up under the image after you select it.
In the Image Options panel, add alt text or check the Decorative Image checkbox.

Resources

For more information about images, please see the following resource:

How do I embed images from Canvas into the Rich Content Editor?

Videos

Let's add a video to a Canvas page. We will add the video, but captioning will need to be considered elsewhere. I will add the video using Kaltura, which will make the process much easier for the ADS when adding captions. If the video is embedded using YouTube, then the ADS will need to re-embed the video using Kaltura. So, I prefer to add the video using Kaltura, making it easier on the wonderful individuals at Accessibility & Disability Services helping us.

Note: If you are sharing a video that you did not create and is not on YouTube, you can link to the video or possibly embed the video in Canvas. However, if you need captions, you will need to discuss that with the ADS.

Read the instructions instead

Add video to My Media

Before adding a video to a page, it is useful to add it to your My Media folder. From there, you can copy the embed code and add the video to the Canvas page. There is evidence to suggest that the Kaltura video will have fewer issues when added to a Canvas page this way.

Click on the My Media tab in your course (you may need to edit your course navigation to see this option).
Follow the instructions in the How do I upload media to MyMedia (Kaltura) in a Canvas course? help doc to add the video to your course.
- If you are adding a video from YouTube, select "YouTube" instead of "Media Upload" in the Add New drop down menu.
Once your video has been uploaded, click the save button at the bottom of the page.
Select the Publish button and check the box next to the course you are adding the video to.
Select "Go To Media," right next to the Save button.

Add video to Canvas page

On the video page in My Media, select the Share tab (under the video, next to the Details tab).
The Embed code is automatically highlighted. Copy the Embed code.
Return to the Canvas page where you would like to add your video.
Place your cursor where you want the video to go.
In the Rich Content Editor toolbar, select the embed icon (it's at the very end).
In the Embed dialog box, paste the embed code you copied from My Media.
Select Submit.
The video has been added to your page.

Quick Flashes

Watch the video.
Look for instances of quick flashing lights (this may include quick changes between light and dark, as in old time Charlie Chaplin-style movies).
Make note of the types of lights, where they occur, and how long they last.
If there aren't any flashing lights, continue on your way.
If there are flashing lights, add a paragraph above the video to inform students of the flashing lights in the video. That way, students can make a decision whether or not they want to watch the entire video or if they need to skip some parts.

Resources

For more information about videos, please see the following resources:

Accessibility Check

Before finishing off your Canvas page, it is helpful to check the Accessibility Checker (more on how to do this below). Canvas has an Accessibility Checker that is running all the time, but there are also things you will want to check on your own.

Canvas Accessibility Checker

The Canvas Accessibility Checker will check the following:

Lists are properly formatted as lists.
Headings are properly nested.
Color contrast is appropriate.
Tables are formatted properly.
All images have alternative text or are marked as decorative.

Self-Check

After reviewing the Canvas Accessibility Checker, you should check the following:

Headings are all tagged as headings.
Links have descriptive text.
All moving elements (GIFs and videos) can be paused, stop automatically, or can be hidden while viewing the other content.
Color, size, position, sound, borders, etc. aren’t exclusively used to communicate information or meaning.

If any third party tools, such as Padlet or Quizlet, have been added to the course, contact the ADS to ensure the tool is accessible for your students.

You may have noticed that text resizing and paragraph spacing are not included in the list of things to check. This is because Canvas takes care of these things. There is a lot of behind the scenes work that needs to be done to make a website accessible, and Canvas has taken care of a lot of it for us. Thanks, Canvas!

Note: If you used the DesignPLUS Sidebar to style your page, double check how things look at different sizes of screens. Check the page on your phone and make your Browser window small, medium and large. Ensure everything still functions properly.

Read the instructions instead

Review the Canvas Accessibility Checker

At the bottom of the Rich Content Editor edit area, there is an Accessibility Checker icon: . Select this icon.
An Accessibility Checker panel will open. Review any issues it found. It often gives you ideas of how to fix the issue.
When you are finished and you end up with a "No accessibility issues were detected." message, you can close the panel.

Self-Check

Review the items found in the self-check list above. Fix any issues as needed.

Resources

For more information about accessibility checking in Canvas pages, please see the following resources:

How do I use the Accessibility Checker in the Rich Content Editor?