Emerson IT Help Desk

Creating Accessible Content in Canvas

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.

Ally Accessibility Tool

The best way to start is by asking ITG to activate the Ally accessibility tool for your Canvas course. Ally provides more in-depth guidance for Canvas accessibility than the built-in checker. Ally provides an accessibility score for all media in your course, makes the text of PDFs searchable (a process known as OCR or Optical Character Recognition), and allows instructors and students to download PDFs in alternate formats such as audio.

Here are some of the most significant ways you can improve the accessibility of your Canvas courses:

 

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...

A black-and-white photo of a puppy being dried after a bath.

...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!

Click here for the original mascot image on Flickr Commons.

 

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:

Ally's alt-text entry interface. It consists of two panes: the left pane contains the image (here a dog on a couch); the right pane contains a text box and other options.

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.

You can learn more about Ally here. If you’d like to turn Ally on in your course, please email ITG@emerson.edu!

Use the Canvas Image Editor to Add or Edit Alt-Text

Navigate to a Canvas page that includes an image. Click Edit. In the text-editor, first click on the image to select it (it will turn blue). Then click on the Picture Frame button in the toolbar (it says "Embed Image" when hovered-over, but it also lets you edit any selected image):

The editing screen for a Canvas page. An image is highlighted in blue, and the pictureframe button is circled.

This brings up the Insert/Edit Image window. It will have already populated the image’s URL for you; in the below example it's pointing to the course files. Leave that part alone. What you want is the Alt text field:

The image editor in Canvas. It is a form with several text-entry fields and options.

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 Update to finish.

 

Use the Built-In Styles in Canvas

How to Add Header Tags

Headers allow students using screen readers to efficiently navigate textual content and understand its organization. Designate all headers in your Canvas content as such by giving them header tags. Header tags follow a nesting order beginning with Header 1, which is usually the title of a page or document. Header 2 would be the first subsection’s title, any children of that section would be Header 3, and so on. Do not skip header levels.

In most Canvas content (pages, assignments, and discussions), the title will automatically be tagged as Header 1. Therefore, you should tag the title of all major sections on your page as Header 2 (and subsections Header 3, and so on).

To assign header tags, click Edit. In the HTML editor, highlight the text you wish to give a header tag, then click the style box at the text-editor’s top-right:

The editor for a Canvas page. The style box is circled, and the header level indicator at bottom right is also circled. The text 'About Topic Notes' is highlighted.

In the screenshot above, the page’s title, “Sample Topic Note,” will automatically become Header 1. The highlighted text “About Topic Notes” is being designated as a second-level header, Header 2. If you place your cursor within or highlight text tagged as a header, an indicator at bottom-left of the editor will show you its level in the heading hierarchy: here, “h2” meaning Header 2.

Although adding a header tag to text automatically changes its formatting (usually making it bigger), it’s important to understand that header tags are distinct from formatting. This means a few things:

  • You cannot make text a header simply by making it big and/or bold. You must highlight the text and use the style bar to select Header 1-4.
  • Header tags are not to be used in lieu of formatting. In other words, do not use the style bar to make text a Header 2 just to make it bigger and bolder, if that text doesn’t actually fit into the page’s heading hierarchy as a Header 2.
  • After you’ve given text a header tag, you’re free to change your text’s formatting back to however it looked before. The header tag you’ve given it will remain.

When you’re done adding header tags, you can check your work using the text-editor’s built-in accessibility checker. Click the accessibility checker button at the editor’s top 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 header issues (if there are any):

The editor for a Canvas page with the built-in accessibility checker open. The checker appears as a right-hand pane with a text-entry field, previous/next buttons, and other information. An issue with Header Order is displayed, with options for fixing it.

In the screenshot above, the title “Sample Topic Note” is Header 1. “About Topic Notes” is a Header 2. “Accessibility” is a Header 4, which is incorrect because Header 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 header 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 Header 3 tag.

 

How to Make Lists

Lists are another important way to structure the content you create in the text-editor. The Canvas text-editor allows you to create unordered (bulleted) and ordered (numbered) lists. Use the bullet and number buttons at top-right of the text-editor to create lists, rather than using hyphens.

This Canvas community guide explains how to create accessible lists.

 

Descriptive Links

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:

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

Contrast

The rich text-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 text-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 top 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):

The editor for a Canvas page with the built-in accessibility checker open. The checker appears as a right-hand pane with a text-entry field, previous/next buttons, and other information. A contrast issue is shown, with the color selector displayed. The Apply button is greyed out.

In the screenshot above, red text has been flagged as an issue (it’s overlaid with a blue rectangle to indicate that it’s flagged). 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:

The editor for a Canvas page with the built-in accessibility checker open. The checker appears as a right-hand pane with a text-entry field, previous/next buttons, and other information. A contrast issue is shown, with the color selector displayed. The Apply button is filled-in and clickable.

When you’re completely done, be sure to click Save at the bottom of the Canvas text-editor to save your edits.

You can learn more about contrast ratios in this guide.

 

Color-blindness

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.

Learn how to accommodate users with color-blindness in your web design.

 

Captioned Videos

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:

How to edit captions for a YouTube video you own.

How to add auto-generated captions for a Panopto video, and then edit them.

How to manually create captions for a Panopto 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 far 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 header tags and alt-text are built into HTML, making these great alternatives to scanned documents when available.
  • 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 header tags, placing them among the more accessible choices.
  • PDFs, or Portable Document Files, can be more or less accessible depending on the document. Scanned documents (usually 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.
    • Instead of scanning a handwritten text, consider typing it into a Word document or 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.
    • Note that the OCR process is not perfect. Unless an OCRed scanned text has been manually corrected by a human, the PDF will still not necessarily be accessible.

 

Remediating PDFs

If you are a faculty member, support is available for remediating your documents (making them accessible). If you’re teaching online, you will submit your PDFs to ITG in advance of your course so we can remediate them for you. If you’re teaching in person, you can contact SAS.

In case you’re curious, this section describes the remediation process. For a PDF to be accessible, it needs to have searchable text, have tagged content in a logical reading order, have alt-text for any images, and have metadata indicating its title, author, copyright status, and primary language. Even providing all of this does not ensure the PDF will be completely accessible. The WCAG guidelines contain more recommendations for accessible PDFs.

Here are some steps you can take to remediate your own PDFs in Adobe Acrobat Pro, which is available for free through Emerson College’s access to Adobe Creative Cloud. See this guide to download apps from Creative Cloud.

  • Determine if the PDF needs to be OCRed. Try clicking on some text and highlighting it. If you can’t, the document needs its text to be recognized and made editable via the OCR process.
  • OCR your PDF. Open the PDF in Acrobat Pro, click Edit PDF in the right pane, and the OCR process will run. Save the newly editable document with a new name. See this guide to converting scans to editable text for more details. If you enable the Ally tool in your Canvas course, you can also OCR a PDF by simply uploading it to Canvas.
  • Correct your PDF’s reading order.
  • Add tags and alt-text to your PDF. See this guide to editing document structure (start at “About the Tags panel”).
  • Add metadata to your PDF. You can do so by going to Files > Properties while the PDF is open in Acrobat Pro.

This guide to verifying PDF accessibility shows you how to run a full accessibility check on your PDF in Acrobat Pro (start at “Check accessibility of PDFs”).

See Adobe’s full guide to creating accessible PDFs for more info and techniques. This is a list of all accessibility features available in PDFs.

Remediating PDFs 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 header tags.

 

Further Reading

Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk