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. To run the checker, click the Check Accessibility button in the bottom toolbar of the HTML editor.

image showing where to find accessibility checker

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.

Additional Resource: Brightspace Accessibility Checker Job Aid

 

Informative table about the D2L accessibility checker
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.

choose heading in accessibility checker

Heading order must be sequential

Headings are used to organize information hierarchically on a page. Items are categorized as heading level 2 items 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.

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.

heading selections in D2L

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.

select list type button

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.

example of text contrast error

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.

example of correct contrast

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.

warning for not having alt text on image

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

add alt text to an image

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.

use descrptive text for alt text

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.

add captions to tables

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.

example of complex table

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

insert table summaries box

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

select header row or header column

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.

associate table header with cells

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.

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 FDC Online Accessibility page" is preferred to "Click Here" and/or the full URL.

Click Repair in the Accessibility Checker dialog box.

correct adjacent links error

Informative table about the D2L accessibility checker

  • Warning Text: Paragraph cannot be used in place of heading
    Explanation:

    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.


    How to Resolve:

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

    choose heading in accessibility checker


  • Warning Text: Heading order must be sequential
    Explanation:

    Headings are used to organize information hierarchically on a page. Items are categorized as heading level 2 items 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.


    How to Resolve:

    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.

    heading selections in D2L


  • Warning Text: Use list markup for lists
    Explanation:

    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.


    How to Resolve:

    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.

    select list type button


  • Warning Text:

    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


    Explanation:

    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.

    example of text contrast error


    How to Resolve: 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.

    example of correct contrast


  • Warning Text:

    Images must have alternative text


    Explanation:

    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.

    warning for not having alt text on image


    How to Resolve:

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

    add alt text to an image


  • Warning Text:

    Alternative text must not be the same as the image name


    Explanation:

    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.


    How to Resolve:

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

    use descrptive text for alt text


  • Warning Text:

    Tables must have captions


    Explanation:

    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.


    How to Resolve:

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

    add captions to tables


  • Warning Text:

    Complex tables should have summaries


    Explanation:

    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.

    example of complex table


    How to Resolve:

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

    insert table summaries box


  • Warning Text:

    Tables must have at least one header


    Explanation:

    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.


    How to Resolve:

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

    select header row or header column


  • Warning Text:

    Table headers must be associated with cells


    Explanation:

    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.


    How to Resolve:

    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.

    associate table header with cells


  • Warning Text:

    Adjacent links should be merged


    Explanation:

    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.

    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 FDC Online Accessibility page" is preferred to "Click Here" and/or the full URL.


    How to Resolve:

    Click Repair in the Accessibility Checker dialog box.

    correct adjacent links error