Canvas Making an existing Canvas page accessible

You likely already have Canvas pages in your course. You may be using these to present content, as a place to receive assignments, or as a space to update students about upcoming events. If you did not build them with accessibility in mind, don't worry; you can still make them accessible.

You will want to follow along with the steps below. Consider opening a page from one of your own courses and going through the same steps.

Optional: You can also duplicate the page that we demonstrate remediating below. To duplicate the page, complete the steps in the following accordion: "Canvas Practice: SLCC Digital Accessibility Credential Course."

Canvas Practice: SLCC Digital Accessibility Credential Course

Ensure you have access to a DEV site or "sandbox course." You should have access to a personal sandbox course you created during the Canvas User Credential course. If not, you can request your own course by filling out this form: Development Site Request Form.
Once you have confirmed you have access to your Sandbox course, import Canvas Practice: SLCC Digital Accessibility Credential Course into your Sandbox course.
- Once inside the resource, click the blue button on the right-hand side of the page that reads "Import/Download." This will open a panel on the right-hand side of your screen. Click the checkbox next to the sandbox course or dev site you want to import the page into. Then click "Import into Course" at the bottom of the panel.
Now, open up the course you imported the page into. On the course navigation, select "pages." There, you should be able to find a page titled, "Sir Edward Burnett Tylor: Father of Cultural Anthropology." If you don't see it immediately, give it a few minutes. Sometimes, importing a page can take some time.

Common elements

Click on each of the tabs below to learn how to make the most common elements of a Canvas page accessible.

Page title (file name)

Remember the guideline for file names is that the file name should describe the purpose or topic of the file. In Canvas, instead of a file name, we check the page title. For example, this page is titled "Making an existing Canvas page accessible."

You can change the page title by editing the page and changing the text in the Page Title textbox.

Resources

For more information about Canvas page titles, please see the following resource:

How do I change the name of a page in a course?

Headings

Remember the guidelines for headings are that they should be formatted using the headings tool, have a logical order, avoid skipping levels, and be descriptive of the content.

I want to mark my headings first so that the Canvas Accessibility Checker will catch any nesting errors.

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

Identify any headings used on the page.
Click on each line of text that should be styled as a heading.
Ensure that the heading is tagged as a heading by looking at the Blocks section of the Rich Content Editor toolbar and making sure it is marked as a heading and not a paragraph.
Restyle the heading color, size, etc. as needed, making sure that it is still marked as a heading.

Resources

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

Beginner's Accessibility with the Rich Content Editor

Images

Remember the guidelines for images are that they should be marked as decorative or have alt text and use accessible color contrast ratios (at least 3:1).

Read the instructions instead

Alt text

Select an image.
Select the Image Options popup.
In the Image Options panel, add alt text or check the box to mark the image as decorative.
Select Done at the bottom of the Image Options panel.

Color contrast

Open a color contrast checker, such as the WebAIM Color Contrast Checker.
Check each image that includes meaning that needs to be communicated for color contrast issues.

Resources

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

Lists

Remember the guideline for lists is that they should be formatted using the list tool.

Read the instructions instead

Look for lists used on your page.
Click on each list and ensure that Ordered and Unordered Lists is highlighted in the Rich Content Editor toolbar.

Resources

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

Beginner's Accessibility with the Rich Content Editor

Links

Remember the guidelines for links are that they should describe the link's purpose, be concise, and avoid URLs.

Keep in mind: You should always delete unnecessary or unneeded links from your Canvas page. 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

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

Remember the guidelines for tables are that they should avoid being used to design the layout of a page, be formatted using Tables tools, include headers (with the scope marked) and titles/captions. In Canvas table titles are called captions.

Tables in Canvas make it easy to do the table caption, header rows and/or columns, but we will also need to ensure that every header cell has an associated scope (column or row). Good news, Canvas provides easy access to all of these tools and if you get really stuck, the Accessibility Checker's got your back.

Read the instructions instead

Add a table caption

Click inside the table.
Select Table in the Rich Content Editor toolbar.
Select Table Properties from the dropdown menu.
In the Table Properties dialog box, check the box next to Show Caption.
Select the Save button.
Edit the caption to be applicable for the table.

Check for header rows and header columns

Click in a cell that should be part of a header row or header column.
Select Table in the Rich Content Editor toolbar.
In the dropdown menu, hover over Cell and select Cell Properties.
In the Cell Properties dialog box, find the Cell Type section.
1. If the cell type is "Cell" the cell is not a header cell.
2. If the cell type is "Header cell" it is a header cell.

Add a header row or header column and set the scope

Click in a cell that should be part of a header row or header column.
Select Table in the Rich Content Editor toolbar.
In the dropdown menu, hover over Cell and select Cell Properties.
In the Cell Properties dialog box, find the Cell Type section.
Select Header cell in the Cell Type section.
In the Scope section, select an option:
1. The scope of a header row cell should be column.
2. The scope of a header column cell should be row.
Select save.

Use the accessibility checker

Open the accessibility checker by using the gingerbread man icon below the Rich Content Editor.
Use the next button to find a table issue.
Use the accessibility checker to fix the issue.

Resources

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

Videos

Remember the guidelines for videos are they they should have accurate captions, audio descriptions (when an accommodation request is made by a student), and avoid quick flashes.

We will be using the Media Gallery to add the video to the course. We will do this so that it can be sent to the ADS for captioning because we do not own the video. You will need to have the Media Gallery tab available in your course. To add the Media Gallery tab, check out the How do I manage Course Navigation links? Canvas guide.

Read the instructions instead

Add video to the course Media Gallery

Click on the Media Gallery tab in your course (you may need to edit your course navigation to see this option).
Select the Add Media button.
On the new page, select the + Add New button.
In the dropdown menu, select YouTube.
On the YouTube page, paste the link for your YouTube video and select Preview.
Once your video has been uploaded, click the save button at the bottom of the page.
Select "Go To Media," right next to the Save button.

Add video to Canvas page

On the video page, 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.

Send video to the ADS for captioning assistance (if needed)

Visit the SLCC ADS Remediation Service webpage.
Select the captioning request button.
Complete the form.

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:

Color contrast

Remember the guidelines for color contrast are that text and images that convey information should have sufficient color contrast between adjoining colors.

To check the color contrast on the Canvas page, we will use the Webaim Contrast Checker. So, get that out and let's get checking!

Read the instructions instead

Open a color contrast checker, such as Webaim Contrast Checker.
Locate a place on the page where there may be color contrast issues.
Use the eyedropper in your contrast checker to add the background color and the foreground (text) color.
You should aim for a score of 4.5:1. If the text is large, 3:1 is considered acceptable, but we suggest aiming for 4.5:1 nonetheless.
If the color contrast is too low, change the colors used.

Resources

For more information about color contrast and modifying text, please see the following resource:

Accessibility checker

Canvas has a built in accessibility checker. The accessibility checker does not check everything, but it is very helpful for what it does check. Watch the video below to learn how to use it.

Note: The accessibility checker in Canvas does not check the accessibility of documents, presentations, or websites linked to from the Canvas page. You will need to check those separately. You may be able to use Panorama to help you check these elements. See the next page to learn more about Panorama.

Read the instructions instead

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.

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?

Equations (for STEM faculty)

Remember the guidelines for equations are to use equation editors if at all possible, provide alt text if you must use an image, and avoid using PowerPoints and PDFs.

Canvas is an excellent place to add equations. Out of all the tools we have discussed in this course, Canvas offers the most accessible equation options. In the video, we will add equations using the equation editor.

Read the instructions instead

Place your cursor where you would like the equation to be placed.
Select the Insert Math Equation button in the Rich Content Editor toolbar. You may need to select the more symbol ( ) to see the Insert Math equation button.
Enter your equation in the Equation Editor dialog box
1. Use the equation tools in the Equation Editor to add your equation
2. Toggle the "Edit directly in LaTeX" toggle to enter LaTeX code directly into the Equation Editor
3. Copy an equation in a Word document and paste it into the Equation Editor
Select Done when you are finished entering your equation.

You may be interested in right clicking on an equation to see how the equation can be altered for various disabilities (including my old eyes that need the equations to all be larger).

Resources

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

Less common elements

Click on each of the tabs below to learn how to make the less common elements of a Canvas page accessible.

GIFs

Remember that the guidelines for GIFs are that they should be marked as decorative or have alt text, avoid flashes, and be able to be paused, hidden, or stop on their own after 5 seconds.

GIFs are just fun! I sure enjoy a well placed GIF. Unfortunately, they are less fun in Canvas. For the first time, we will need to consider the pause, stop, hide standard. We will also take a look at the alt text and flashes.

Read the instructions instead

Alt text

Select the GIF.
Click on the Image Options popup.
In the Image Options panel, add alt text or mark the GIF as decorative.
Select Done at the bottom of the Image Options panel.

Pause, stop, hide

Open the ezgif Change GIF loop count.
Upload your GIF to ezgif using the URL submission or by choosing a file.
Select the Upload button.
On the new page, set the loop count to one or two, depending on the length of the GIF.
Select the Change loop count button.
Under Output animation, select the Save button.
Upload the changed GIF into Canvas and replace the GIF on the page with the new one.

Flashes

Watch your GIF looking for flashes.
If your GIF has quick flashes, pick a different GIF (or make adjustments if you have those skills).

Resources

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

Audio

Remember the guideline for audio is provide an accurate transcript for any audio content.

Canvas is a wonderful place to add audio files. You can embed podcasts, add audio snippets of you speaking Japanese, or add music. When you add audio to the course, keep in mind that the audio will need a transcript.

Read the instructions instead

Locate the source of the audio. Try to find a transcript.
Add a link to the transcript near the audio on your Canvas page.
If you cannot find a transcript, use the Word Dictate or Transcribe feature to create a transcript.
Link to your Word transcript on the Canvas page.

Resources

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

Text formatting

Remember that the guidelines for text formatting are that when using text, make sure to use semantic markup and easily readable fonts and to avoid all caps (except for things like acronyms) and underlined text that is not a link.

There is no need to worry about bold or italicized text in Canvas. Bold text is always tagged as strong and italicized text is always tagged as emphasis. You still need to ensure your subscripts and superscripts are properly formatted as such, but otherwise you are good to go on text!

Visual communications

Visual communication

Remember that the guidelines for using visual elements is to ensure that they are not the only way meaning is conveyed.

There is no visual communication on this page, but if there was, you would need to ensure that the information is communicated in another way too.

Screen size

Remember the guideline for screen size is to ensure that all content is still present and nothing loses its meaning when the screen size is changed.

It is very useful to check your Canvas pages on various screen sizes. Many of your students will access your course on their phone. Even if you teach AutoCAD, which requires a computer, students may still look at the Canvas course on their phone to review or to look at instructions on one screen while they work on a computer.

Read the instructions instead

Use the browser resizing buttons (next to the minimize and close button) to resize your browser window.
Drag the edges of the browser window to resize the window even more.

Resources

For more information about screen size, please see the following resource:

None. If you have any ideas, let us know what you would like to see.

Text size, text spacing, and overcrowding

Remember the guidelines for text size, spacing, and overcrowding are to ensure that the text can be resized, respaced, or magnified without losing readability of any content.

There is no need to worry about text size and text spacing on Canvas. Learners can use web browser features to change the text size and spacing of any Canvas page. Go technology!

Languages (for language faculty)

Remember the guideline for languages is to ensure the language being used is clearly marked for assistive technology.

To change the language for part of a page in Canvas, you will need to edit the HTML, the "language" of the Canvas page. If this makes you nervous, contact the ADS for support. If you are up for an HTML adventure, start by reading the article Declaring language in HTML from the people who write WCAG.

You may also find it useful to look up your language code on the following page: HTML Language Code Reference.

Read the instructions instead

Switch to HTML Edit view.
1. Select the HTML editor button ( ) below the Rich Content Editor.
Locate the text in a different language in the HTML (this is likely to be the most difficult part).
Add <span lang="[insert language code here]"> </span> around the text in another language.
Ex. I just added a language code in a Portuguese course. Here's what the Heading 3 looks like now:
<h3><span lang="pt">Sejam todos bem-vindos ao Portuguese 1010!</span></h3>
Save the Canvas page.

Note: If you are changing an entire paragraph, div section, or heading to a different language, you can add the language tag to the element instead of putting a span around it. For example, I changed an entire Heading 3 to be in Portuguese. Instead of using a span element, I could have written it as: <h3 lang="pt">Sejam todos bem-vindos ao Portuguese 1010!</h3>

Resources

See the resources in the intro paragraph.

Build an accessible Canvas page from scratch

If you are interested in learning how to make a Canvas page accessible from the very beginning, check out Build an Accessible Canvas Page from Scratch in the Building from Scratch module.