Accessibility Dashboard Errors and Alerts Q&A

What & Why

An empty heading refers to a line in your content that has had a heading tag applied to it but there is no text within the heading tag. This poses an issue for people who use screen readers as it will tell them there is a heading but not read anything to them. 

How to Fix

To fix the empty heading tag, it can be removed (backspace or delete) or you can actually use it by adding informative content (but see the common alert below about heading structure). If you need space between items in your content, it is better to have a blank paragraph line than a blank heading tag. To make this change while editing a page, put your cursor on the heading line and from the toolbar click on the Heading drop-down and change it to Paragraph.

See also

Tables Tutorial, W3C: Web Accessibility Initiative

What & Why

An empty link is code that indicates there is a link but the URL portion of that code is empty. When making edits to a page, an empty link can be left behind. They are often right next to a working link. 

How to Fix

You can remove the empty link in the editor via Pope Tech Guide under Images and Links, Empty Link, click the red link icon to select an empty link result, and select Remove Link.

You can also remove the empty link using backspace, delete, or you can highlight and select remove link from the toolbar. 

What & Why

When you use a table in a Canvas page, it has an element in the code called Table Header (th) to describe each column; if left blank, the table will be very confusing for people who cannot see or need to navigate by keyboard. 

Most cases of an “empty table header” error involve the use of tables for layout. Utilizing tables for laying out text and/or images in columns is not an accessible design. Also, avoid empty, split, or merged cells. Likewise, adding an image or screenshot of a table renders the table unreadable by screenreaders. 

How to Use Tables Accessibly

• Use table headers to describe the data or information in each column, such as Due Date, Module, Assignment, etc.
• Include a caption that describes the whole table (via Table Properties, Show Caption, then edit the caption).
• Include information or data in every cell.

It’s Going to Be OK

You may not be able to lay out your content in a way that is as visually appealing to you without the use of tables. There are ways to design pages in Canvas accessibly and with the look you prefer. However, you may need to work with a web editing program or a web developer to get it right. Putting information on your pages in a way that allows everyone to understand your meaning is a valuable move.

What & Why

Alternative or “alt” text is a text description that can be added to images to make them more accessible. For people who are blind, a screen reader will let the reader know there is an image and then read this description to them. Remember, if the image adds meaning to the page, this is what your blind readers are missing, so be sure to describe the image meaningfully yet succinctly.

How to Write Alt Text

It is not necessary to include the words, “image of” or “picture of.” If the image is a particular kind of image, like a photograph or infographic, those words can be included. 

Alt text can also be automatically generated in Canvas, be written by you, or you can upload your image to Western’s Descriptive Alt Text Generator to generate alt text to copy-paste into the image alt text description.

Canvas suggests that you keep your alt text under 100 characters and Pope Tech will give another error for alt text that is any longer.  

How to Add Alt Text to Images

To add alt text to an image on a Canvas content page, click on the image and select Image Options. Enter the image description, enter Done, and save the page.

For images that are purely decorative, usually you can enter a checkmark for the decorative option; however, Pope Tech sometimes will still flag images for review even when this is checked. If the alternative text or the decorative indication are properly used, you can safely ignore the error.

Image and media alternatives

You may need to provide alternatives for certain images and media, such as:

• Accompanying  links to transcripts of audio
• Accompanying links to audio described versions of videos
• Explanatory text along with icons and graphical buttons
• Captions and descriptions for tables or complex graphs

What & Why

Low contrast errors, the most common in Canvas, occur when the text color and a background or highlight color are too similar (e.g., grey/yellow) or too similar in value (e.g., red/green). While this would not be an issue for a screen reader since the text is in the code, low contrast text can be very difficult to read, especially for people with low vision.

How to Fix

Highlight the text that has been flagged and change the color choices. If you cannot tell if a highlight color is added, you can click the highlighter tool on the control bar and select the red diagonal line for a transparent background. 

If you want to utilize color combinations check your options on the WebAIM Contrast Checker.

See Also

Designing for Web Accessibility, W3C: Web Accessibility Initiative

What & Why

When a YouTube video has no captions or subtitles, a person who is blind will miss important information that is not communicated verbally. Many users turn on captions when viewing videos in loud or private environments. In some cases where the audio is not describing what is happening int he video sufficiently, audio descriptions can be added as well. 

How to Fix Your Own Videos

If the video is your own, you can add captions to it in YouTube, or you can upload your video to Panopto Video Management System at Western, which automatically captions your videos, allows you to edit them, and does not include ads.

How to Fix Other People’s Videos

Unfortunately, there is not a way to add captions to other people’s videos on YouTube; however, you can attempt to contact the owner of the video and request that they add captions. Some people will even create the captions themselves using third party tools (e.g., Amara.org, captionfy.io) to send to the video owner in the hope that they will add them. As a last resort, you can link to the text for these captions with the videos you are posting in Canvas.

See Also

Making Audio and Video Media Accessible, W3C: Web Accessibility Initiative

See “Empty Table Header” above under Errors.

What & Why 

These alerts are directing you to examine this content separately, as Pope Tech cannot evaluate content that is not within a Canvas page and the rich content editor. This alert also directs you to evaluate links to Word, PowerPoint, GoogleDocs, Canvas Assets (non HTML-based), and other documents or YouTube/Vimeo videos.

How to Fix 

This may require a deeper dive into your linked content to ensure each item is accessible. If the items are within your control, you can work—over time—to improve them. Consider the following:

• Files: WWU provides access to a free online conversion tool called Sensus Access to help with conversion of files to more accessible formats. In some cases this works seamlessly; however, in other cases, especially for files with complex content, the results will not suffice.
• Microsoft: See Improve accessibility with the Accessibility Checker.
• PDFs: See Accessible PDF Files on the University Communications site.
• Videos: See Panopto Video Management System by the CII/ATUS.

Start with each bit of new content you create and make a practice of making each new set of slides, lecture notes, etc. accessible. When you have time, you might consider more structural changes like copying content from a PDF-based syllabus into the text editor for the Syllabus in Canvas to utilize a more accessible platform instead. 

See Also

Course Accessibility: Tools, LLATCH, & CATCH

What & Why 

To make headings readable by screen reader software for people who are blind, they need to be created using the preset heading styles available in the Canvas editor. For people who cannot see your page, this provides a way for them to cognitively organize the content that will be read to them. They may use headings to skim a page and focus on the areas they want to read first. Your use of H tags should form an outline for the page that would give a person who cannot see a way to tab between the sections and create a mental framework for the content being read to them. 

How to Apply Heading Styles in Canvas 

While editing any content page in Canvas, you will see these style options by clicking in the control bar on the word, Paragraph. In the drop-down choices, you will see H2, H3, and H4. In Canvas, the H1 tag is already being used by the page title, so you will never see H1 in the style settings. Your first heading in the content area will be an H2.

All headings within content pages start with H2 and follow sequentially. You can apply the H2, H3, and H4 tags to a line of text by placing your cursor in your text heading and then selecting the desired H tag in the control bar from the paragraph drop-down, showing the H2, H3, H4 options.

Do not skip headings, for example, going from H2 to H4, as that would make it seem like something is missing.

Headings for Announcements?

Headings are helpful even on very short pages and announcements to give cues as to the length of the page. For example, an announcement title could be, “New Date for Final” (which is automatically an H1; then the first line could be, “Update as of 3/12/26,” (which you would format as an H2), followed by a new line of text.

Can Headings be Styled?

After applying H tags to your headings, you can still apply bold, indents, and different sizes to your text if you prefer. These stylings are ignored by screen readers and would not interfere. However, be careful not to underline text (as that indicates links) or apply shading, highlighting, or color choices that would lower the text contrast too much; these can add barriers for people with low vision. 

If you want to set a different size for a heading via the editor in Canvas after applying the proper heading style, you can highlight the text of the header, then select a font size from the control bar. The heading style will still make the heading accessible, but you can set the size to your preference.

See Also

Course Accessibility: Tools, LLATCH, & CATCH

Headings: W3C: Web Accessibility Initiative (additional examples)

What & Why 

When a possible list is detected, the alert refers to a list of items preceded by a character or number, but without the use of proper list formatting. For example, when a screen reader encounters these characters, it reads the descriptive words such as “plus sign” or “asterisk, etc. In HTML, properly formatted lists are either “ordered” (with numbering) or “unordered” (with bullets), but these need to be created using the bullets or numbering tools in the editor. When a screen reader encounters a list, it lets the listener know what kind of list it is about to read and how many items are in it.

How to Fix 

Remove the manually entered characters or numbers, highlight the lines of text, and select either the bullet icon or numbering icon from the control bar to properly format the text. 

When using the Pope Tech Guide on a page, under Tables and Lists, select each “Possible List” alert and select either “unordered list” or “ordered list” to apply the fix. 

NOTE: When mixing numbering and bullets, apply one format to your whole list, then highlight the part that will be the other kind of list and apply the format. It should nest the second list within the first.

What & Why

A redundant link alert indicates that a link appears twice within a couple of lines. In some cases, the repetition of the link is intentional and the alert can be safely ignored. In some cases, the alert helps you find cases where the same link was accidentally applied when it was intended to be two different links. 

How to Fix

You can remove the empty link in the editor via Pope Tech Guide under Images and Links, Empty Link, click the red link icon to select an empty link result, and select Remove Link.

You can also remove the empty link using backspace, delete, or you can highlight and select remove link from the toolbar. 

What & Why

A redundant title alert indicates that a title “attribute” on a link or other item is the same as the visible text of the link or the alt text. This results in a screen reader potentially reading the same title repeatedly; however, it is not visible to sighted users. Sometimes this redundancy is applied automatically in Canvas without your knowledge or due to copy-pasting links from other sources. The title attribute can often be removed or modified (via code view) to provide advisory, but not redundant information.

How to Fix

You can remove the redundant title in the editor via Pope Tech Guide under Other, Redundant title text, then click the orange pointer icon to select the item, and select Remove Title.

WARNING: Special content like equations utilize code that appear redundant to the Pope Tech tool, but that are required for the equation. Use your judgment to determine cases that require this fix.

What & Why

This alert may occur when there is no alternative (i.e., “alt”) text on an image, when the alt text is the name of the image file, when the alt text exceeds 100 characters, or when the alt text is repeated in the code for the image. 

See “Missing Alternative Text…” above under Errors for more on how to fix these alerts..

What & Why

The underlined text alert points to text that has the underline style applied, but that is not also a link. Underlined text is a cue for people to recognize links within the text and should not be applied to headings or other text for emphasis. This impacts users with low vision as well as all users for communicating content and interactions clearly. 

How to Fix 

If you want to call out text that is important, try prefacing the sentence with a word like, “Note:” or “Important:” since these would be read by a screen reader. If the emphasis is subtle and not important to communicate meaning to non-sighted users, you can use italics or bold, or even high contrast colors. (See “Very low contrast” under Errors for more information.)

If you are using underlining for headings, utilize proper H tags for formatted headings instead. (See “No heading structure/Skipped heading level” above.)