D2L - Using the Accessibility Checker

Last Updated: 07/26/2017

Introduction

D2L added an Accessibility Checker to the HTML editor in April 2017. This checker will advise you on how to make your content more accessible to individuals who use screen readers or screen magnifiers, as well as individuals with colorblindness.

Accessibility Warnings

The table below contains all the warnings you may receive when running the Accessibility Checker, along with steps you can take to resolve the issue.

To run the checker, click the Check Accessibility button in the bottom toolbar of the HTML editor: 

Warning Text Explanation How to Resolve
Paragraph cannot be used in place of heading

Screen readers can navigate through a page by jumping from heading to heading. This allows screen reader users to quickly skim the content to find the section they’re looking for.

This warning appears when you make a paragraph bold to indicate it is a section header, but you don’t actually change the format of the paragraph to a heading format like “Heading 1”, “Heading 2”, etc.

If there are no headings indicated in the HTML, it is very difficult for screen reader users to efficiently navigate your document. Every page should at least contain an H1 heading to indicate the page title, and H2 headings for the main sections if they exist.

Select an appropriate heading level from the dropdown list in the Accessibility Checker dialogue box, then click Repair.

Image of heading dropdown

Heading order must be sequential

Headings are used to organize information hierarchically on a page. Items categorized as heading level 2 represent subheadings of heading level 1; heading level 3 items represent subheadings of heading level 2, and so forth.

Headings should never skip a level going down; for example, you should not put an H4 directly under an H2. However, skipping levels on the way up the hierarchy (i.e., skipping from H4 to H2) is acceptable.

  • H1: Math Department
    • H2: Courses
      • H3: Undergraduate Courses
      • H3: Graduate Courses
        • H4: Required Courses
        • H4: Optional Courses
    • H2: Faculty

Change the lower heading level to the appropriate higher heading level to eliminate the skip. You can do this with the Format dropdown menu in the HTML Editor menu bar.

For example, if you placed an H4 directly under an H2 section, you could fix this by changing the H4 text to H3.

Alternatively, you could add a new level 3 heading between the level 2 and level 4 headings.

 

Use list markup for lists

Screen readers can navigate through a page by jumping directly to lists (bulleted and numbered).

However, if you create a list by just typing asterisks or numerals into the HTML Editor, the screen reader will not identify that properly as a list.

Instead of manually inserting asterisks or numbers to label items in a list, use the list button in the HTML Editor menu. Click the Unordered (bulleted) list button, or select the drop down and choose Ordered (numbered) list. 

Visual presentation must have a contrast ratio of at least 4.5:1

or

Large text must have a contrast ratio of at least 3:1

Insufficient color contrast between text and its background can make your content difficult or impossible to read for individuals with low vision or color blindness.

Large text can have a lower color contrast ratio; if your text is 18pt or larger, you will only receive an error if the contrast is below a 3:1 ratio.

Open the “Select a Color” dialog box from the HTML Editor menu by clicking on the dropdown arrow next to the box showing the current text color. 

If your current contrast is insufficient, you’ll see a red warning symbol next to the words WCAG AA. Change the text color until the red warning symbol changes to a green check mark.

Images must have alternative text

Screen readers cannot describe the content of an image on their own. When you insert an image in the HTML Editor, you will see a prompt to add alt-text. This text is what a screen reader will read out loud instead of saying “image” or the filename. If the image is decorative, you can check a box in the prompt to indicate that the screen reader should not read it out.

This warning will appear in the Accessibility Checker if you enter a space (“ ”) for the alt-text or remove the alt=“description” text from the HTML source code.

Enter a concise description of the content of the image in the Add alternative text field in the Accessibility Checker, then click Repair.

Alternative text must not be the same as the image name This warning means that you entered the filename (e.g. my-image.jpg) as the alt-text. Alt-text is read out loud by screen readers to describe images on the screen. The filename is not an adequate description of the content of the image.

In the Accessibility Checker dialog box, replace the filename with an appropriate, concise description of the image, then click Repair.

Tables must have captions Captions are visible on the page to allow all users to better understand the purpose of a table. A caption concisely describes the content of a table.

Type an appropriate caption in the Accessibility Checker dialog box and click Repair.

Complex tables should have summaries

Complex tables are tables with merged cells and may have multiple header rows or columns. These tables are more difficult to understand and navigate with a screen reader, so a summary is provided to screen reader users that explains the structure of the table. The summary is not visible on the page to all users, unlike the caption, and should describe how to navigate the table.

Type an appropriate table summary in the Accessibility Checker dialog box and click Repair.

Tables must have at least one header

Header rows help provide context and structure for the data in a table. Making the header row bold is not an accessible way to indicate the header row because screen readers do not consistently read out italics and bold formatting.

Setting a header row is somewhat difficult to do in the HTML Editor itself, so the easiest way to set headers is to run the Accessibility Checker and use the Repair option.

Select whether your table uses header rows or columns, and click Repair

Table headers must be associated with cells

As screen readers move through a table, they read out the row or column header of the current table cell to help the user keep track of their location.

However, it can be unclear to the screen reader whether a header cell should be the header for its row or its column. This is addressed by setting the “scope” of the header.

The Accessibility Checker allows you to set the scope of each header cell. If the header describes the cells in its row, select Row. If the header describes the cells in its column, select Column. If the header cell is a merged cell that describes a group of rows, select Row Group. If the header cell is a merged cell that describes a group of columns, select Column Group. Then click Repair.

Adjacent links should be merged

If you provide two identical hyperlinks next to each other, this warning will appear, even if they have different link text. Repeated links are confusing for screen reader users and should be merged into one link.

Example of adjacent links:

OIT D2L Accessibility (https://oit.colorado.edu/services/teaching-learning-tools/desire2learn-d2l/accessibility)

Note: It’s best practice to make your link text descriptive and to avoid including the URL in the link text, for example, "visit the OIT D2L Accessibility page" is preferred to "Click Here" and/or the full URL.

Click Repair in the Accessibility Checker dialog box.