Note: The explanations/tutorials below demonstrate how to fix HTML issues using Canvas' built-in accessibility checker. You may still use the Canvas accessibility checker, but we recommend using the more user-friendly and accurate Pope Tech Instructor Accessibility Guide.
Click an issue below for an explanation of what it means and how to fix it.
The HTML content has contrast issues
Explanation: The HTML content contains text with low contrast between the text and its background. This can cause the text to be difficult to read, especially for those with low vision, poor eyesight or colour blindness.
Fix: Change the color of the font and/or background color.
The HTML content has images without alternative descriptions
Explanation: The HTML content contains images that don't have a description or alternative text. People with screen readers or other assistive devices rely on these descriptions to understand the image content and purpose. Having a clear description for an image can help everyone better understand the content of the image and how it relates to the context.
Fix: Click the dial on the image wherever it is found on your Canvas page, announcement, discussion, etc. Ally will open the instructor feedback panel. Type the alt text into the alt text field and submit.
The HTML's heading structure does not start at the right level
Explanation: The headings in the HTML content don't begin with the main heading and therefore don't follow a logical order. Having the main heading at the beginning of the document will provide a more logical structure and will make the document much easier to understand and navigate for all users.
Fix: On a Canvas page, the page title is Heading 1. Section titles should begin at heading level 2. Sub-sections should be heading level 3.
The HTML content has tables that don't have any headers
Explanation: The HTML content contains tables that don't have or properly specify a header structure. People with screen readers or other assistive devices rely on a semantically meaningful and correct heading structure to help them navigate the table and understand the meaning of every cell, but it can be beneficial to everyone to have a clear structure in the table.
Fix: Highlight the cells of the header row (or column).
From the table menu in the rich content editor, select "Cell", then "cell properties".
Select "header cells" from the Cell type dropdown menu.
Select "columns" (if the headings are by column as below. If it's arranged by row, select rows. If you do both, select both options.) from the scope dropdown menu. Click "Ok".
The HTML content has empty headings
Explanation: The HTML content contain headings with no content. This can cause potentially confusing contentless alerts to screen reader users.
Fix: It is easy to accidentally mark the line before or after a heading as a heading. Check your page to make sure any blank lines are normal text and not a heading.
The HTML content does not have any headers
Explanation: The HTML content doesn't contain any marked-up headings. Headings are important as they provide structure to a page. When headers are properly and consistently used, the page becomes much easier to understand and navigate for all users, and provides additional benefits such as the ability to automatically generate a Table of Contents.
Fix: For longer pages with multiple sections, adding headings will allow a user to navigate by section. Sighted users can scan for section titles, which are usually bold or larger font.
To add headings, in edit mode, navigate your cursor to the section title. In the Rich Content Editor click on the dropdown menu next to the font size (it probably reads "paragraph"). Select the appropriate heading level for that section title.
On a Canvas page, the page title is Heading 1. Section titles should begin at heading level 2. Sub-sections should be heading level 3.
The HTML content does not have an appropriate heading structure
Explanation: The HTML content contains headings that don't follow a logical order. All headings should follow a sequential and descending order. Headings are important as they provide structure to a page, especially longer ones. Well-structured and logical headings will make the page much easier to understand and navigate for all users.
Fix: On a Canvas page, the page title is Heading 1. Section titles should begin at heading level 2. Sub-sections should be heading level 3.
The HTML content contains links without discernible text
Explanation: The HTML content contains links with text that is not discernible by a screen reader or is not focusable. People with assistive technologies would be unable to understand the link or navigate to it.
Fix: This is a common problem that usually results from someone deleting link text, but not fully removing the hyperlink. You can usually track down the link by looking for an external link icon that is not associated with any text or falls before hyperlinked text.
To remove it, delete out the blank space, or look in the HTML code and remove the link.
