Make Your Course Accessible

Pope Tech LogoUsing the Pope Tech Accessibility Guide and Dashboard

Using the Pope Tech Accessibility Guide
to Fix Accessibility Issues in Canvas

Main Links
Overview of the Pope Tech Accessibility Tool

Pope Tech provides two accessibility tools to help with Canvas course accessibility. An accessibility checker that simplifies solving basic accessibility issues and a dashboard that tracks course wide and institution wide accessibility metrics. In short, the Accessibility Guide simplifies addressing common high-impact accessibility issues and the Accessibility Dashboard allows us to see how much progress we’ve made on making our courses accessible on an individual and institution wide level. Note: The Accessibility Guide should not be used as a substitute for knowing about basic digital accessibility. The Accessibility Guide is a tool aimed to help with common issues and using the Accessibility Guide does not guarantee accessible content.

Fixing Accessibility Issues with Pope Tech

The Accessibility Guide can be used wherever the Rich Content Editor appears in Canvas. This content includes:

  • Pages
  • Announcements
  • Discussions
  • Syllabus
  • Classic Quizzes (Instructions field)
  • Assignments (Instruction field)

To access the Accessibility Guide, go the element you want to check, click on Edit to open the Rich Content Editor, and then scroll down to the bottom right of the page and click on the Pope Tech icon which is located the left of the save icon.

Canvas editor buttons showing Pope Tech button, Cancel button, and Save button
Figure 1: Pope Tech Button Location in the Canvas Editor

When activated the following accessibility issues panel appears:

Pope Tech Accessibility Panel showing issue list
Figure 2: Pope Tech Accessibility Issues Panel

Issues on the page are split up into six categories to make them easily navigable. You’ll notice that the categories listed parallel the main content issues covered on this website. As you select each issue, it highlights the alert or error and gives you the tools to address the issue. To learn more about an error or alert (what it means, why it’s important to fix, and how to fix it) click on the question mark icon next to the issue.

Access and Navigate the Canvas Accessibility Guide (2:21 mins.)

Direct link to video: Access and Navigate the Canvas Accessibility Guide

Using the Pope Tech Accessibility Dashboard

The Accessibility Dashboard is found by clicking on Pope Tech Accessibility in your Canvas course menu (your particular button might be further down in the navigation list).

Canvas course navigation menu
Figure 3: The Canvas Course Navigation Menu

The Accessibility Dashboard provides you a full report of the errors and alerts it finds in your entire Canvas site helping you prioritize the pages with the greatest number of elements that need to be addressed. The below screenshot shows the scan of a course titled Utah Jazz History, as you can see, the course has 16 errors and 39 alerts that need to be checked. The most common issues are highlighted in the graph in the central region of the dashboard.

Pope Tech Accessibility Dashboard
Figure 4: Pope Tech Accessibility Dashboard

The Dashboard provides course wide metrics as well as allowing you to see the number of errors or alerts found on each page. As you scroll down, the dashboard lists the individual pages that it found errors on. The detail button in this list provides a full breakdown of the types of errors and alerts on the page and the edit button opens both that page and the accessibility guide so that these issues can be fixed immediately.

Get Started Using Pope Tech's Canvas Course Dashboard (3:03 mins.)

Direct link to video: Get Started Using Pope Tech's Canvas Course Dashboard

Fixing Issues in Images and Links

Links

Link text should make sense out of context and should be descriptive enough to clearly define where the link is going. While Accessibility Guide flags some common link errors, you should also manually check that each link works and that the link text is concise, descriptive, and meaningful.

When fixing issues with links:

  • Fix any errors or alerts following the Accessibility Guide instructions
  • Common alerts/errors: Empty link, suspicious link text, redundant link
  • Where you have full URL’s replace the URL with meaningful, descriptive link text
  • Verify that each external link on the page is functioning properly

Resources: A beginner's guide to link accessibility

Images

To provide equal access, alternative text needs to convey all the relevant context and content that a sighted user would gain from the image.

When fixing issues with alternative text:

  • Fix any errors or alerts following the Accessibility Guide instructions
  • Common alerts/errors: missing alt text, suspicious alt text, long alt text
  • Verify that alt text appropriately answers the question “What information (that is necessary to the content of the page) does this image convey?
  • If the image does not convey useful information mark the image as decorative.
  • To keep alt text concise, verify that any complex images or graphs have enough text on the page (in the form of a nearby paragraph or caption) to clearly explain the necessary information conveyed in the image/graph.

Resources: WebAIM on writing alt text

Fixing Issues in Text and Contrast

Make sure that color is never used to convey essential information without also conveying that information through another medium (such as adding an asterisk or making text bold).

The Accessibility Guide will check color contrast on all html elements on a page.

  1. Fix any contrast issues using the Accessibility Guide.
    • If you have authored any images or other digital content, verify that the text and background contrast is high enough (WebAIM contrast checker)
    • Make sure no necessary information is conveyed just through color alone
  2. Some types of text (math elements, portions of a page in languages other than English etc.) have additional accessibility concerns. Be aware that the Accessibility Guide does not check these elements.
Headings

We often create content that creates artificial headings by changing font size on a page or making text as bold. However, for these to be accessible they need to be labeled as headings and not just normal text. If your page contains more than a paragraph of text, we recommend using headings to break up the content into a clear outline.

  1. Use the Accessibility Guide to check the Heading Outline.
    Canvas makes the page title heading level 1 automatically, so headings should start at heading 2
  2. Fix the Heading Outline as appropriate using the tool
    Don’t skip heading levels and make sure the headings help split up the page and organize its contents
  3. Add additional heading levels as necessary to clearly organize the material

Resources: Common heading accessibility issues, WebAIM on headings

Tables and Lists

Tables

Fixing issues with table accessibility often involves redesigning your content. Make sure your table is being used to convey tabular data and then consider if the ways in which you can present your data can be clearly conveyed by a single set of row and column headers. If not, simplifying your table or reorganizing your data might be the easiest way to make the table accessible.

  1. Make sure tables are used to convey tabular data. Remove or redesign unnecessary layout tables.
    Instead of using tables to create columns or organize the page, DesignPLUS contains features supporting adding columns and other design elements
  2. Avoid using complex tables whenever possible. Redesign complex tables into multiple simple tables as necessary.
  3. Fix any remaining issues with table headers and captions marked by the Accessibility Guide
    Common errors: Empty table header, possible table caption

Resources: A beginner’s guide to accessible tables

Lists

Occasionally lists (particularly ordered lists) are created in a way that doesn’t automatically label them as lists in html. You should always make sure lists are created using the list icon List Icon in the Rich Content Editor.

  1. Check lists in the Accessibility Guide under structural elements.
  2. Verify that each list structure represents a logical list.
    Use unordered lists (bullet points) for content that does not have a obvious, logical order and save ordered (numbered) lists for content where there are clear logical steps to the list order.
  3. Verify that all lists (both bullet points and numbers) are listed within the Accessibility Guide’s structural elements. If not, go the Rich Content Editor and manually mark them as lists.

Resources: A beginner’s guide to accessible lists

Documents and Videos

The Accessibility Guide does not check non-html elements, which means that all external documents and video content needs to be manually checked.

Make your Course Accessible contains helpful checklists and resources for various document types and media.

Accessibility Issues that Need Manual Checking

While the Accessibility Guide does a good job of checking common issues, as with all accessibility checkers, it has a number of limitations and cannot check objects that aren’t present. There is no substitute for your own knowledge of basic digital accessibility.

After fixing all issues with the accessibility guide, manually double check the following:

  • If no potential heading elements are present on the page, the accessibility guide cannot recommend missing headings. Verify that the page information is clearly outlined with heading elements to break up the page information.
  • The Accessibility Guide doesn’t note or check complex tables. Verify that complex tables aren’t being used.
  • The Accessibility Guide does not check if lists are used properly. Verify that each list is indeed a list of items and that the list is properly used as an ordered or unordered list.
  • Verify that all alt text provides the necessary, relevant information that a sighted user would get from looking at the image. Keep alt text as short and concise as possible.
  • Verify that each hyperlink goes to the intended destination and then make sure link text is short, descriptive and concise enough to clearly relay the link destination out of context. (Avoid using URLs as link text whenever possible)
  • If your page contains languages other than English, make sure the language tags are correctly set.
  • If your page contains math equations, double check that all math elements have been coded properly.
  • The Accessibility Guide cannot check accessibility issues in images, video, or other media types that are embedded in a page. You will have to check these manually.
  • Your unique courses and needs might have additional accessibility concerns not covered here. Contact an ITAL in your unit if you have questions or concerns about accessibility not covered in this list.