Canvas has a built-in checker that allows the user to run an automated check on the canvas page. This check does guarantee full accessibility and should always be used in addition to other methods found in this course.
The accessibility checker in Canvas can be a useful tool for checking color contrast, and apply table headers to content! Be sure to always manually check your Canvas page for accessibility requirements as they are easy to overlook. Remember, every Canvas page should have the following items applied:
Images in Canvas need accurate descriptions for students who rely on screen readers. Images that convey a lot of text should be avoided whenever possible, and descriptions should be presented to provide enough information within context of the topic. Keep in mind the context of the picture, which may change the scope of the needed description.
Image Context
Image context will change based on the audience and what you want them to learn about the image. The same image could have different descriptions depending on its intent. If you are creating the course or the content, remember that you are the artist and you get to pick the alternate text.
Alternate text for diagrams and charts can be accomplished but its possible these items might be better represented in a list or a table structure. Complex graphs and charts can include an over load of information.
Bar graphs should be converted into accessible tables.
Briefly describe the graph and give a summary if one is immediately apparent.
Provide the title and axis labels.
It is not necessary to describe the visual attributes of the bars, e.g. dark blue, light blue, unless there is an explicit need such as an exam question referring to the colors.
Description:
Figure 1 is a bar graph that measures percentage of vaccination coverage in five states over one year, from Q3 2006 to Q2 2007. In each state, the coverage increases over time. The data are summarized in the following table. All data are approximate.
First dose rotavirus vaccination coverage among children aged 3 months, by quarter – immunization information system (IIS) sentinel sites, United States, 2006-2007.
Arizona
District of Columbia
Michigan
Minnesota
Montana
Oregon
Q3 2006
35%
10%
5%
0%
15%
20%
Q4 2006
45%
30%
33%
25%
27%
27%
Q1 2007
50%
45%
42%
35%
37%
45%
Q2 2007
65%
48%
50%
41%
40%
44%
Things to consider with alternate text and images in Canvas
Avoid “picture of” or “image of”
Avoid having the file name as the alt text – this will sometimes not show up in the accessibility check
Imagine explaining the picture over the phone to someone and use that as the alternate text.
Video Overview of how to apply alternate text to an image in Canvas
Instructional Guide – How to apply alternate text to images in Canvas
Step 1: Ensure you are in edit mode
Step 2: Select the image you would like to add alternate text too and select Image options
Step 3: Add appropriate alternate text or mark as decorative
Making tables accessible in Canvas can be easy if you set them up correctly! Using tables for layout purposes should be avoided. Use tables for displaying data only and use Headers and Scope. This is because assistive technology uses specialized controls when in a table.
Data tables should always include table headers (the <th> element). For short tables and for tables whose data are self-explanatory, column headers are sufficient. For long tables or tables where data may be confusing, it is best to include row and column headers. <th> elements should always have a scope attribute. Column headers should include scope=”col”, and row headers should include scope=”row”. Including scope attributes allow assistive technology to better understand the logical relationships presented in the table.
Use Table Captions
Tables can be given an accessible name with the <caption> element. Screen readers allow users to view a list of tables on the page. If the table has an accessible name, a screen reader will provide that name to the user. If not, the screen reader may only read the number of rows and columns. Thus, a <caption> provides substantial usability benefits, especially if there is more than one table on the page. <caption> elements are visible to sighted users as well.
Avoid Complex Tables
We recommend avoiding tables with multiple levels of row or column headers and headers that span multiple rows or columns. Such tables may be difficult to implement with the correct markup and scope attributes, and even if implemented correctly, may be difficult for users to understand. In most cases, some other presentation of the data, including presenting multiple tables, may be an equally effective alternative to a single, complex table.
Avoid Empty Cells for Formatting
Table authors may choose to use empty cells to visually format the table, such as to indicate a division in various sections of the table. While this practice may make sense for sighted users, it may not work for blind users. We recommend avoiding blank table cells, especially when those table cells are used for formatting.
Things to consider when making tables accessible in Canvas
Avoid using tables for layout purposes
Use simple tables
Set table headers for both columns and rows
Pay attention to the scope of headers
Add a clear caption using the accessibility checker
Video Overview of how to make tables accessible in Canvas
Instructional Guide – How to make tables accessible in Canvas
Step 1: Ensure you are in edit mode
Step 2: Select inside the cell you want to make a heading
You can set both an individual cell or an entire row as a header at once
Step 3a – Setting an entire row: Select Table button in the rich content editor > Row > Row Properties
Step 4a – Change the row type from body to header
Step 3b – Setting an individual cell as a header cell: Select Table > Cell > Cell Properties
Step 4b – Change the cell type to Header Cell and set the scope to what is appropriate
Step 5: Run the accessibility checker found in the bottom right corner of the page
While screen readers can read a full page to a user, screen reader users may prefer to instead listen to a list of links. In that case, a screen reader may only read the link text and not the surrounding text. Accessible hyperlinks in Canvas assist with navigation.
Speech recognition software allows a user to avoid using a mouse. Users can speak the text of the link that they would like to follow.
Keyboard-only users may not be able to use a mouse to click links. They use a keyboard’s tab button to navigate through a page’s links, buttons, and form inputs. For such users, it is very important for them to see which item has a focus on at all times.
Colorblind users may not be able to perceive color cues. Typically, pages present links as a different color than their surrounding text. Adding underlines or other non-color indicators help users who may not see color. Users who are not comfortable with technology may also appreciate having links underlined.
Links should be clear and easy to understand.
What do Links look like using JAWS?
The below image has two separate sites pulled up using JAWS while searching for links. The image on the left indicated the incorrect way to use links and includes link text for the full HTML URL and several wrong examples like “click here”. The image on the right represents a correct link list that uses correct link text that is descriptive and clear.
Image Links
In general, content editors should avoid using images as links. If an image functions as a link, the image must have alt text that conveys the location and purpose of the link. The alt text should not describe the image. Treat image links as links, not as images.
Things to consider when using Links in Canvas
Avoid link text like “Click Here,” “More,” and “Read More.” These kinds of links can be confusing when a screen reader reads them out of context.
This video will walk users through how to make a canvas page accessible. Ive got a even more content for Canvas Accessibility.
Transcript
Hi there, my name is Shawn Jordison. And this is going to be a video walkthrough for Canvas accessibility. The goal of this video is to walk you through the most commonly found accessibility elements that may exist on your pages. So I have a sample page here that has many accessibility errors in it. And what we’re going to do is simply walk through them and fix them. So to begin, let’s select the Edit button.
I like to design my accessibility starting from the very top of the page.
Going all the way down. I also like to start my content below h2. So I’m going to add in some text here, that’s called overview. I’m going to select this text, use the drop down arrow to make this a header to.
Now from here,
this paragraph looks fine. There’s no accessibility elements to address. I do have another area here that says where do I begin designing. This is also a paragraph. So what I’m going to do is make this content a Heading Two.
But we also want to turn off bolding and I actually want it to be lowercase.
So I’m just going to retype that and delete this text file. The reason we want it to be lowercase is because screen readers will often read acronyms letter by letter. And when it sees all capital letters, it could sometimes interpret that word to be an acronym.
Next up, we have a couple of dashes here. These should be built in bulleted list, because the order is not important. So I’m going to select these two items and select bullet lists from the rich content editor.
I’m going to come back through here and delete the dashes out
and move on to my next heading. The next heading is Is there enough time for my students. First I want to retype it.
To make sure we get rid of all that capitalization. Next, I want to remove the bolding on this text. So I’m going to select the text and select bold. I’m going to make this text a header three, as it relates to this heading to have Where do I begin designing.
And so let’s keep going here it looks like we have a little bit of misspellings.
Is there enough time. This is a part of this header down here. So this is also going to be a Heading Three. I’m then going to remove the bolding.
And then under design and develop, I’m also going to remove bolding and it’s actually already marked as a header for which is perfect. So let’s keep going. It looks like this was supposed to be a couple of list items that we tried to designate with axes.
But let’s make this an actual bulleted list, we can come back through, delete the text.
And then we have a new area that doesn’t really relate to any of our current heading structures. So I’m going to select the text and make it a heading to.
Now from here we have a built in list. And if you’re not used to doing this,
these list items might look correct. They are numbers, they clearly are meant to be in a list. But here’s the deal. It’s not actually a list within the structure of the HTML. So we need to select all of our texts, and then select numbered list.
And it puts in an actual list which we must come in here and actually remove these extra numbers.
And we can keep going.
So the essay writing process, this looks like it should be a heading. We’re gonna go ahead and make that a heading two.
And then again, we have another list. That should be a bulleted, excuse me, this should be a numbered list as it represents a sequence of steps.
All right, next up, we have a link. So here’s the Canvas guide for viewing my feedback in the gradebook. So first thing I’m going to do, I’m going to copy the hyperlink
with Ctrl C,
and I’m going to select feedback in the gradebook.
Then select Link to URL
and paste our link with Ctrl V.
Then we’re going to select Insert link, which now puts the link on these words. So I can enter this with a period, and delete the rest of this content. So using the Delete key on my keyboard, I’m removing this extra text
as we do not want extra hyperlinks, or for URLs on the page. Additionally, we want to avoid vague language, like the words here, so we need to fix these two links. First, let’s take a look at the sentence read about the role and structure of US courts and US supreme court procedures here in here.
So I’m going to add the word procedures.
And to get this link out, I’m going to select in the link with my mouse, I’m going to select the link to URL button. And from here, I’m going to copy the link out so I just did a ctrl c.
Now I’m going to select my text where I want to put the link, select the link to URL button Ctrl V to paste and select Insert link. Now we have one more to fix. I’m going to put my cursor in this link, select Link to URL, I’m going to simply copy the link out,
close the window
and add my link to this text on the page. By selecting the text select Link to URL pace.
And then insert link. Now I can delete all of this extra text.
And we have another link.
But the sentence doesn’t really support it. So we’re going to say
additional resources
about language and culture.
I’m going to select in this link. Select the link to URL button to copy my link out Ctrl C to copy this out.
And then I’m going to paste it on my newly created text and then select in certainly.
Now I could delete this extra text. All right, let’s see what else we have in this area. So we have a table that will need to address I’m going to leave the table.
And we’re going to use the check accessibility tool to fix this table.
With our image though, let’s select the image, select Embed Image. And this is where we can add alternate text
and select Update.
We have another table here. I’m also going to use the check accessibility tool. So let’s let’s go ahead and run that we’re going to run the check accessibility tool.
Adjacent links with the same URL should be a single link. Okay, that looks like
an actual error that can be fixed. So we’ll select Apply, we need to add a caption.
Oops.
I apparently cannot type today.
Oh my goodness. All right, we’re gonna put sample data. And then let’s select header row for our headers, select Apply.
And we have one more sample data for a caption and select Apply. Now what’s interesting, it didn’t catch these all caps. So I’m going to come in here and fix these.
And it’s a good reminder
that the accessibility checker is automated, and it doesn’t catch every error.
And all capitalization should be avoided if possible, unless you were working with an acronym.
Let’s go ahead and run that check accessibility tool once more. Perfect, no issues were found. Select Save.
We can quickly review and this page looks a lot better. We have clean links. We have clear tables. We have an image with alternate text. And this page is fully accessible. So you just learned how to make a Canvas page accessible. I hope this video walkthrough was useful for you
Canvas Studio makes it easy to host a captioned video for content that you or someone else has created. This guide explains just how to do it!
Captioning is an important aspect of accessibility, and captioning in Canvas studio can be a breeze. If you are using Canvas and are posting videos; they need to be captioned. This post is not going to explain why captioning is important, but rather; how do you do it in Canvas Studio.
Canvas Studio offers a unique approach to captioning videos for content that you might own or do not own. It is also a premium feature – so be sure to check with your Canvas Admin to see if it is available.
Video Overview
This video will walk you through the steps needed to host a captioned video in Canvas Studio. The watch time is 2 minutes and 5 seconds.
Steps needed to host a captioned video in Canvas Studio
The basic premise is to get an SRT file, and then upload it into Canvas studio. Once you have the video captioned, it can easily be placed on the page. This section will cover the following steps:
Upload the SRT file to the captions section within Canvas Studio
Insert the Video into the Canvas page
Step 1 – You have the SRT file right?
There are many tools to get an SRT file for a video that you are trying to caption. Here is one method using Otter.ai to create an SRT file. Make sure to edit it for accuracy!
Step 2 – Get the video into Canvas Studio Library
In order to properly display a video using Canvas Studio – it must be added to your library. Here are the steps:
After logging into Canvas – select the Studio button on the left column.
Select Add in the top right corner
Upload a raw video file or use a YouTube link
Step 3: Upload the SRT (caption file) to the video itself
In Canvas studio, ensure you are in My Library
Select the video you want to add a caption too
Select the caption tab
Upload English captions
Step 4: Place the video into a canvas page
Get into edit mode on the canvas page that you want to add your newly captioned video
Select the apps button in the Rich Content Editor
Select Studio
Select the video to place onto the page
That’s it!
Are you working with documents like PowerPoint, PDFs, or Microsoft Word files? Check out some of my other posts.
