Brightspace HTML Editor has an Accessibility Checker that makes it easier than ever to improve the accessibility of your content pages. The Accessibility Checker will catch common accessible issues on static HTML content and offer suggestions to help you fix the issues on the spot. Please note, the Accessibility Checker does not replace real-user testing especially when you have interactive activities that are imported into the course. Real-user testing is still needed for keyboard-only navigation and screen reader testing.
Here are seven simple tips to build more accessible content topics with the help of Accessibility Checker.
- Run the Brightspace Accessibility Checker - The Accessibility Checker is available within the HTML Editor when you create or edit HTML content pages. It is located right beside the Spellcheck button. You can select “Check Accessibility” anytime while editing your content.
- Add Proper Image Alternative text - The Accessibility Checker will display an error message “Images must have alternative text” if the alt text is missing. It will then provide you the opportunity to repair the issue by adding alt text inside the report panel.
- Use Color Contrast Checker - To adjust the color contrast, you can use the WebAIM: Color Contrast Checker to lighten or darken options to modify the colors slightly.
- Use Headings Correctly - Every page should have an H1 heading (usually the page title), then H2 Heading as the major section headings, down to H3, H4 etc. The headings also need to be used in the correct order.
- Use Lists Appropriately - Lists convey a hierarchical content structure to screen reader users. Unordered list <ul> should be used when list items can be arranged randomly, while ordered list <ol> should be used when a sequential order is important.
- Hyperlink Text - Making hyperlinks accessible is one of the most important aspects of web accessibility. How to use hyperlinks: Select Insert Quicklink icon, then select URL in the popup window, enter the URL and the Title that describes the link’s destination.
- Markup Tables Appropriately - 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. How to mark up tables: Select the cells to be marked up as a table header, select Table Cell Properties then chose Cell Type as Column Header or Row Header.
Visit the Elearning/Brightspace Accessibility for additional information regarding Elearning Accessibility Checker