How Can I Make My Canvas Course Accessible?
An accessible course provides all students the opportunity to acquire the same information, engage in the same interactions, and enjoy the same services with substantially equivalent ease of use. Canvas as a platform is 508-compliant, with appropriately contrasting colors, clean designs, and tab-navigable menus. However, it’s up to you to ensure that the content you create within Canvas is accessible.
This page contains the info you need to make your course compliant with the accessibility guidelines found in Emerson's Teaching Guidelines During Covid-19.
Ally Accessibility Tool
The Ally Tool is now enabled in all Canvas courses. Ally provides an accessibility score and rationale for all images and documents in your course, makes the text of PDFs searchable (via the OCR process), and allows instructors and students to download PDFs in alternate formats such as audio. It also provides guidance for improving the accessibility of your documents and other content. Along with the Canvas accessibility checker, which can be used to check for accessibility issues on pages you create, this tool is your best friend when it comes to accessibility.
Ally runs in the background of Canvas. When you see a tiny colored odometer-like icon to the left of your images and linked documents, that's Ally! Click that icon to learn more about how to make your file accessible. Students won't see these icons. This guide will cover using Ally to add alt text to images and to create OCRed versions of PDFs.
- Learn more about Ally (Note: Ally is owned by Blackboard but works in Canvas)
Where do I Start?
Here are some of the most significant ways you can improve the accessibility of your Canvas courses:
- Add alternate text to images.
- Use the built-in styles.
- Use descriptive links.
- Make accessible color choices.
- Use captioned videos.
- Use accessible documents.
- Learn more about accessibility.
Add Alternate Text to Images
Alternate text—also known as alt text, or alt text tags—allows screen readers to interpret images for the user. If an image lacks alt text, a screen reader cannot fully do its job. In all likelihood, it will just read the image's file name, such as "somepic2014.jpg." Alt text should be brief but descriptive and neutral in tone. We recommend making a habit of checking your course for images that need alt text!
When you have an image you want to add to a page, discussion, or assignment in Canvas—let's say, for instance, a mascot pup from the Australian War Memorial photo collection on Flickr...
...make sure that you include alternate text. The only time an image doesn’t need alternate text is if it’s purely decorative.
The description you write will depend on the image’s context:
- If the context concerns the Flickr collection “World War II” and dog mascots, you may want to write something like "A black and white photo of puppy mascot, being dried after a bath." Usually, you would not include the word "photo," since a screen reader can detect an image. But in this case, the black and white quality of the photo is meaningful to its WWII context.
- If you were just including a picture of a dog, and further context was not necessary, you could write "Drying a puppy after his bath."
- Or, if this was related to dog breeds, you could write "Stabyhoun (or perhaps Large Münsterländer) puppy mascot of Australian Army, 1943."
- If the image contains legible text, include that text in your description. If the text contains important logistical info (such as the time and place of an event), it’s best to also include that text in the body of the page itself.
You can use this Alt Text Decision Tree from American University to ensure that you write the most effective alternate text possible!
How to Add Alternate Text
There are two ways to add alt text to images in Canvas: the Ally accessibility tool and the Canvas image editor.
Use Ally to Add or Edit Alt Text
Navigate to a Canvas page that includes an image. If your course has the Ally tool enabled, a small, colored gauge will appear in the bottom-left corner of each image you embed in your Canvas course. Red means the image lacks alt text, orange means its alt text needs improvement, and green means it has satisfactory alt text. Click on this gauge to add or edit alt text to the image:
After you successfully add and save alt text, or designate the image as decorative using the Indicate Image is Decorative button, the image’s gauge will turn green.
Use the Image Options Panel to Add or Edit Alt Text
Navigate to a Canvas page that includes an image. Click Edit. In the content editor, first click on the image to select it (it will become outlined in blue). Then click Image Options in the bubble that appears:
This opens the Image Options panel on the right of your screen. Find the Alt Text field:
Alternate text will default to the image’s file name—unhelpful to the user—unless you change it. Edit the “Alt text” field to add a description, or check the box labeled “Decorative Image” to indicate that the image should not be read by screen readers. Click Done at bottom-right of the panel to finish.
Use the Built-In Styles in Canvas
How to Add Heading Tags
Headings allow students using screen readers to efficiently navigate textual content and understand its organization. Designate all headings in your Canvas content as such by giving them heading tags. Heading tags follow a nesting order beginning with Heading 1, which is usually the title of a page or document. Heading 2 would be the first subsection’s title, any children of that section would be Heading 3, and so on. Do not skip heading levels.
In most Canvas content (pages, assignments, and discussions), the title will automatically be tagged as Heading 1. Therefore, you should tag the title of all major sections on your page as Heading 2 (and subsections Heading 3, and so on).
To assign heading tags, click Edit. In the rich content editor, highlight the text you wish to give a heading tag, then click the style box at the content editor’s top-left:
In the screenshot above, the page’s title, Sample Topic Note, will automatically be designated Heading 1. The highlighted text About Topic Notes is being designated as a second-level heading, Heading 2. If you place your cursor within or highlight text tagged as a heading, an indicator at bottom-left of the editor will show you its level in the heading hierarchy: here, “h2” meaning Heading 2.
Although adding a heading tag to text automatically changes its formatting (usually making it bigger), it’s important to understand that heading tags are distinct from formatting. This means a few things:
- You cannot make text a heading simply by making it big and/or bold. You must highlight the text and use the style bar to select Heading 1-4.
- Heading tags should not be used in lieu of formatting. In other words, do not use the style bar to make text a Heading 2 just to make it bigger and bolder, if that text doesn’t actually fit into the page’s heading hierarchy as a Heading 2.
- After you’ve given text a heading tag, you’re free to change that text’s formatting to whatever you want. The heading tag you’ve given it will remain.
When you’re done adding heading tags, you can check your work using the content editor’s built-in accessibility checker. Click the Accessibility Checker button at the editor’s bottom-right (it looks like a person standing in a circle). If your content has any accessibility issues, they will appear in a panel on the right. Click Next to cycle through all issues until you arrive at heading issues (if there are any):
In the screenshot above, the title Sample Topic Note is Heading 1. About Topic Notes is a Heading 2. Accessibility is a Heading 4, which is incorrect because Heading 3 has been skipped. The accessibility checker places a blue rectangle around the incorrectly tagged text, and provides a drop-down menu with options for fixing it. Select Fix heading hierarchy to automatically correct the heading tag, or Remove heading style to remove the tag. In the example above, I would choose Fix heading hierarchy and click Apply, which gives Accessibility the Heading 3 tag.
How to Make Lists
Lists are another important way to structure the content you create in the content editor. The Canvas content editor allows you to create unordered (bulleted) and ordered (numbered) lists. Use the bullet and number buttons at top-right of the content editor to create lists, rather than using hyphens.
This Canvas community guide explains how to create accessible lists.
When using text as a link, be sure to make the text descriptive enough so that someone using a screen reader will understand where the link leads. Here is an example of a sentence containing linked text that is not descriptive enough:
- Click here to reach the Paul Revere House’s website.
A sufficiently descriptive link would be:
- Visit the Paul Revere House’s website.
Listen to VoiceOver, Apple’s built-in screen reader, read the first example.
Now listen to VoiceOver read the second example.
The second example is less confusing because it states that the clickable text is “Paul Revere House’s website” rather than “click here,” and it introduces the link with a few contextual words.
Accessible Color Choices
The rich content editor in Canvas allows you to change the color of your text. However, text is difficult to read without sufficient contrast between the text and the background, especially for those with low vision.
You can use the accessibility checker built-in to the Canvas content editor to make sure your text contrasts sufficiently with the background. First, navigate to the content you wish to check and click Edit. Then, click the accessibility checker button at the editor’s bottom-right. If your content has any accessibility issues, they will appear in a panel on the right. Click Next to cycle through all issues until you arrive at contrast issues (if there are any):
In the screenshot above, red text has been flagged as an issue (it’s overlaid with a blue rectangle to indicate that it has an issue). Red text does not contrast sufficiently with a white background. To fix it, use the provided color selector to pick a darker color with a higher contrast ratio. When your choice is sufficient, the blue Apply button will become filled-in. Click it to make your change and fix the issue.
When you’re completely done, be sure to click Save at the bottom of the Canvas content editor to save your edits.
When using images and colored text, you should also be mindful of users with color-blindness, since the Canvas accessibility checker does not address it. As a general rule, don’t use color as the only way to indicate meaning. If you must, consider contrast and users with color-blindness.
Learn about color-blindness in this guide from the National Eye Institute.
To be accessible, videos must have closed captions available. A transcript by itself, though helpful, is not enough. This is essential for all students, not just those who are deaf or hard of hearing. An Oregon State study across 15 public and private universities found that “more than half of students surveyed said captions help by improving comprehension.” Captions provide long-term study aid for students, allowing them to search videos’ contents and comprehend footage with unclear audio.
When including videos in your Canvas course, try to find a version that has human-generated closed captions, as opposed to auto-generated closed captions. On YouTube, you can check this by looking for a CC button to the bottom-right of a video. Click on it: the words English (auto-generated) or English will appear in the video’s top-left corner. English by itself means the video has human-generated captions. These are preferable because computers often misrecognize words, resulting in less accurate captions. However, auto-generated captions are better than none at all.
Another option is to begin with auto-generated captions, then manually correct them. As of 10/23/20, if you create or upload a video in Panopto, auto-captions will automatically be added. The following guides go over several ways to edit captions for accuracy:
- How to edit auto-captions for a Panopto video.
- If you wish to send a Panopto video out to a vendor for human-generated captions, you will first need to delete its auto-captions. To do so, go to the video's Settings, choose Captions from the lefthand menu, click Default under "Available Captions" to expand it, then click Delete Captions.
- If you edit a Panopto video, the auto-captions will be out of sync. To fix this, download the video, then re-upload it to Panopto.
- How to manually create captions for a Panopto video.
- How to edit auto-captions for a YouTube video you own.
Which Videos Need Captions?
Ideally, all videos in your course should have some form of captioning. However, this isn't always possible. Here are some rules of thumb.
Videos that DO need captions:
- If videos convey significant information, and you are selecting them ahead of time and/or plan to re-use them, they should always have captions.
Videos that DON'T need captions:
- If videos are disposable (i. e. a video addressing a current event, a synchronous video conferencing session, or video comments on a student's submission, all of which won't be re-used in future semesters), it is acceptable for them not to have captions, but you should still let students know that they can contact SAS if they need an accommodation.
- If videos are created by students, it is acceptable for them not to have captions. However, you should encourage your students to caption their videos using the tools mentioned above. You should also let students know that they can contact SAS if they need an accommodation.
Remember that many students will not self-report needing an accommodation, so the more you can provide captioned videos, the better. If you want to learn more, check out this article on the use of closed captioning in pedagogy.
If a student does officially request an accommodation for a video through SAS, SAS will provide a captioned version of the video.
Accessible Documents: HTML Pages, Word Docs, and PDFs
When selecting electronic texts to include in your Canvas course, keep in mind that some formats are more accessible than others:
HTML pages, or texts contained directly on web pages, tend to be the most accessible kind of electronic document. Here’s an example of an accessible HTML page. Helpful indicators like headings and alt text are built into HTML, making these great alternatives to scanned documents when available. Headings are essential for those using screen readers, since they allow the user to make sense of where they are in a document and navigate accordingly.
HTML pages also have searchable text, meaning text you can highlight or search for. Screen readers function by reading searchable text; they can't read a document without it.
Hint: This guide is an HTML page!
Microsoft Word doc/docx files and other digitally-created documents (files from Pages, Open Office, Google Docs, etc.) are searchable and allow for easy designation of headings, placing them among the more accessible choices.
Check out this guide to adding headings to Word docs—complete with a video demo at the bottom!
PDFs, or Portable Document Files, can be more or less accessible depending on the document. Born-digital PDFs such as those typically found in library databases tend to be accessible. Scanned PDFs are the least accessible type of electronic text, because they often have contrast issues, illegible fonts, crooked or curved pages, or contain handwriting that can’t be converted to searchable text. Any PDFs you use should be clear and easily readable. See this guide for what that means:
Remediating PDFs (making them accessible) is a complex and time-consuming process. That’s why we recommend finding documents that are already accessible, such as HTML pages, e-books, or Word docs with added heading tags.
One of the hallmarks of an accessible PDF is searchable text. Searchable text can be copied, pasted, selected, searched for, etc. To check if a PDF (or any electronic text) has searchable text, try clicking and dragging your mouse across a sentence. If you can select the text, it's searchable. If you can't, the PDF is only an image, and screen reader programs won't be able to read it.
If a PDF does not yet have searchable text, but is clear and easily readable, it can be made searchable during a process called OCR, or Optical Character Recognition. This is the one accessibility feature that Emerson's Teaching Guidelines During Covid-19 specify for PDFs. Luckily, the Ally tool built into Canvas will try to automatically OCR any PDFs you upload and provide them in an Alternate Formats menu.
How to Find Ally's Alternate Formats Menu
To access the Alternate Formats menu for a file you've uploaded to Canvas, you or your students can click the download icon to the right of a linked document, then click Alternative formats from the dropdown menu:
This button brings up a window that looks like this:
You can also access your Ally accessibility scores and alternative formats via the Files section of your Canvas course. This can be a quick, convenient way to check all your media for accessibility:
After you download the OCRed version, you can delete the old file in Canvas and upload the new version. Although you don't have to do this last step, it will create a better experience for your students, and your Ally meter will be greener!
If Ally does not provide an OCRed version (because the computer can't recognize the text properly), consider whether your PDF is legible enough to use. You may need to find a clearer version.
What am I Responsible For?
Faculty are NOT expected to tag PDFs. If you are teaching one of the fully-online, asynchronous courses built during the 14-week "Teaching Online at Emerson" course offered by ITG, you will submit your PDFs to ITG for remediation, including tagging. For all other courses, you're only responsible for providing clear, easily readable PDFs that can be OCRed as explained above.
Students can formally request accommodation via SAS if they need PDFs that have accessibility features beyond searchable text.
If you're curious about the full remediation process, this Adobe Acrobat Pro guide shows you how to run a process that tries to automatically make a PDF accessible (like any other automated tool it's imperfect), and also how to run a full accessibility check on your PDF.
Best Practices for Digital Documents
- Instead of scanning a handwritten text, consider typing it into a Word document or, even better, directly into a Canvas page.
- Instead of scanning an article or book chapter, try searching for an HTML or e-book version on the Iwasaki Library website or via Google Scholar (you can log-in with your Emerson account). Library resources and e-books are more accessible than scans.
- If you must scan a document, try to keep the text as straight, sharp, and well-lit as possible to ensure the highest quality scan. If there’s an option to create a “searchable” or “OCR” PDF from the scan, do so. OCR, or Optical Character Recognition, is the process by which text is extracted from digital documents and placed in a separate layer so it can be highlighted, copied, searched, etc.
- If you want to share an online article with students (like this one), simply copy-and-paste its link into a Canvas announcement, page, assignment, or discussion. Or, if the article is available via the library, use its permalink. DO NOT save web pages, including online articles, as PDFs and upload them to Canvas. Web pages are HTML pages: they are 100% more accessible than the PDF you can save them as.
- Instead of including a PowerPoint file (which is not an accessible format) in your course, copy-and-paste your slides' contents into one or more Canvas pages.