Overview
In D2L Brightspace, Anthology Ally (Ally) can identify accessibility issues with HTML files or web pages, provides guidance, and in some cases can apply a fix directly to the document. This article describes how to fix accessibility errors in HTML content, using the guidance from Ally where available or the D2L HTML Accessibility Checker.
If you still have questions, submit a request for an Accessible Document Design Consultation.
Headings
Your HTML file should have a logical and hierarchical heading structure that does not rely solely on visual formatting to indicate section headings. Proper use of headings makes it easier to scan the page contents and improves navigation for screen reader users.
Empty headings
This means there is an empty or blank line in your file that has been formatted as a heading, which creates a challenge for screen readers navigating the content. In general, you should avoid blank lines as they can cause confusion for screen readers.
In the Ally Accessibility Score the empty heading(s) will be highlighted in the document preview on the left. On the right Ally offers remediation options that will be applied to the HTML file to fix the issue.
Select the radio button for Remove empty heading. If there are multiple empty headings and you have verified that they should all be removed you can check the box for Apply to all occurrences. Finally, select the Apply button and wait for it to update the accessibility score.
Headings don't follow a logical structure
If you skip heading levels Ally will alert you that there are headings that don't follow a logical structure. For example, you may have used an H1 immediately followed by an H3. It is acceptable to skip backwards heading levels (e.g., H4 followed by H2).
Headings that do not follow the logical structure will be highlighted in the document preview, you will need to look at the context and the previous heading to determine the appropriate heading level. Once you have determined the appropriate heading level, select it from the text styles menu in the accessibility guidance panel on the right.
The built-in accessibility checker will also identify any skipped heading levels and you can select the appropriate heading level from the Format menu in the HTML editor.
Heading structure does not begin at one
This alert will appear if the first heading in your file is not Level 1. It will not appear if you have normal paragraph text before your Heading 1, but this should also be avoided. Fix this by adding a Heading level 1 to the beginning of your document, or changing the heading level of your first heading.
Does not contain any headings
Ally may notify you if your HTML content does not contain any headings, particularly if it is a longer page.
- Add Heading Levels 1 through 4 using the HTML editor in D2L:
- Highlight text that should be a heading
- Select the Format button in the editor toolbar (it most likely says Paragraph), and select the appropriate heading level from the drop down
- If you have changed the visual formatting without applying a heading style, the built in accessibility checker can identify text that may be a heading based on the visual appearance. This will require a manual review of any text that is identified as a potential heading.
Set Title and Language
If Ally reports that "The HTML content is missing a title" or "The HTML content does not have a language set" these can be fixed by setting the page attributes of your HTML content.
- Begin editing the HTML content in D2L
- Click on the + symbol in the editor toolbar
- Select Attributes
- Click on Page Attributes
- Enter a Page Title, this can be the same as the document title
- Enter the correct language code of your file (en = English)
- Click Create
- Click Save and Close
Images that are missing a description
All images must have descriptive alternative text or be marked as decorative. View this WebAIM Alternative Text Article for more guidance on writing effective alternative text. If you use the Insert Image button you will need to add alt text before inserting an image into an HTML file. If you paste an image into the HTML editor you will not be prompted to write alternate text but you should still add it.
To add or edit an image description:
- Edit the HTML file
- Right click on an image
- Select Image from the pop up that appears
- Add descriptive text to the Alternative Description field. If this is a decorative image, leave this blank and select the Image is decorative checkbox.
Table Headers
Table headers are important for enabling screen reader users to understand the data presented in a table. This requires changing the cell properties of the first row and/or first column. Similar to creating a heading structure for your document, this cannot be done with visual formatting alone. Remember that tables should not be used for layout purposes.
Column Headers
- Select all cells in the first row
- Open the drop down menu of the table tool icon
- Select Cell
- Select Cell Properties
- In the Cell Type drop down select Header cell
- In the Scope drop down select Column
Row Headers
- Select all cells in the first column
- Open the drop down menu of the table tool icon
- Select Cell
- Select Cell Properties
- In the Cell Type drop down select Header cell
- In the Scope drop down select Row
Table headers that are missing content
If you have defined a row or column as table headers but some of these cells are blank the accessibility score will include the issue "This HTML file contains table headers that are missing content". Review your tables and be sure that any row and column header cells include content. If there are cells that are intentionally left blank in the header row or column, change the cell properties to Cell Type: Cell and Scope: None.
Contrast Issues
Ally will identify any low contrast text in your document and suggest alternative colors where needed. Select one of the suggested colors and then select Apply, or return to the HTML Editor to select a different color.
The HTML editor also has a built-in color contrast analyzer that you can use when selecting text colors.
- Begin editing the HTML content
- Run the Accessibility Checker to locate the text with insufficient contrast
- Change the text color to something with higher contrast
- The select color menu will tell you if the currently selected color meets color contrast requirements for small and large text. A green check mark indicates that your chosen color has sufficient contrast, while a red X indicates you have low contrast and should try a different color or a darker shade of the current color.
Remember that you should not use color as the only means to convey information.
Links with no textual content
This means that there is a link that is not associated with any display text, which may happen if you delete link text without fully removing the hyperlink. Ally will highlight the location of the link and give you the choice to Remove the link or Add text to the link.
If you choose to Add text to the link, the text should clearly communicate the destination of the link. Avoid phrases like "click here", "here", or "read more". For more information read Links and Hypertext from WebAIM.
Videos without captions
Ally cannot always verify whether or not a video has captions, so you may get a perfect accessibility score but still have a message that the file contains a video without captions. This is there to remind users to check for captions on their videos, but does not affect the overall score.
Check any videos in your file and make sure there is an option to enable closed captions (cc). If your video does not have captions, submit a Closed Captioning Request.