Description
Improve the accessibility of your course with the built-in accessibility checker in the HTML Editor. Accessible content improves the learning experience for all of your students, but especially those with disabilities. By using the accessibility checker, you can be sure you are on your way to creating an inclusive learning environment for all of your students.
Article Contents
Instructions
The Accessibility Checker is available within the HTML Editor when you create or edit HTML content pages. It is located right beside the Spell check button with an eye and checkmark as the icon. You can select “Check Accessibility” anytime while editing your content.
The Accessibility Checker will catch common issues on static HTML content and offer suggestions to help you fix the issues on the spot.
NOTE: The Accessibility Checker does not replace real-user testing, manual testing, and does not guarantee compliance.
Images Must Have Alternative Text
One of the most common issues is missing image alternative text (alt text). Alt text is read by a screen reader in place of the image, which allows the learners with visual impairment to access the information.
If your image is missing alt text, the accessibility checker will display an error message "Images must have alternative text". You can add the alt text directly in the text box labeled "Provide alternative text". Once you've entered the alt text, click Repair Issue.
NOTE: If the image is purely decorative or has been described in the surrounding text, you can hit the Ignore button which is right next to the Repair Issue button.
Back to Top
Heading Structure
Headings allow learners with visual impairments to understand the logical structure of the page and navigate to or skip over sections using assistive technology. If the heading levels are not in order, the accessibility checker will display an error message "Headings must be applied in sequential order".
To fix, highlight the heading and select the proper heading level from the format drop down options in the editor.
Back to Top
List Items
Lists convey a hierarchical content structure to screen reader users. Unordered list should be used when list items can be arranged randomly, while ordered list should be used when a sequential order is important. The accessibility checker will produce an error message "The selected text appears to be a list" if the lists were not true lists.
To fix, highlight the list and choose the Unordered List icon or select Ordered List from the dropdown menu.
Back to Top
Tables
A table contains columns or rows that show the meaning of the data in the grid. Sighted user can quickly make visual association between the data and the row/column headers, however the users who cannot see the table cannot make the visual associations, they rely on the screen reader to navigate through the cells one at a time, and hear the column/row headers if the table is marked up properly.
Table Caption
If you receive the error message "Tables must have captions", type a brief description to indicate the content of the table. Example for the table below could be "Course Schedule". Click Repair Issue to update the caption.
Table Header
It is critical for data tables to have a designated header row and/or column for assistive technology to navigate through the table. If you receive the error message "Tables must have at least one header cell", you must select either Header Row or Header Column, then click Repair Issue. In the example below, we would select Header Row.
Header Scope
For simple tables, the header scope will associate the header cells and data cells. In our example, the scope for the header row would be "Column", as the contents in the column under week are directly associated with that header cell.
Back to Top
Color Contrast
Low color contrast is a common accessibility issue. The accessibility checker can catch the following issues:
- Large text must have a contrast ratio of at least 3:1.
- Visual presentation must have a contrast ratio of at least 4.5:1.
To change the color, select the color dropdown arrow in the HTML editor.
When the color window opens, you can see your current contrast ratio, the accessible contrast ratio, and whether is passes WCAG AA standards.
You can use the lightness slider to adjust the selected color until it meets the accessible ratio, or you can choose a new color.
Back to Top