Article Author: Barry Dahl
May 18, 2017
Just in time for GAAD 2017
Today (May 18) is 2017 Global Accessibility Awareness Day, or GAAD. Here at D2L, we pay attention to accessibility concerns every day, but still, this day is very special. It seems timely to toot our own horn today since we very recently added an enhancement to the HTML editor in Brightspace.
Introducing... the Check Accessibility icon in the HTML editor!
Figure: The Accessibility Checker in Brightspace Editor.
First available in the April 2017 Release (version 10.7.0 for those of you keeping score), the accessibility checker reviews your added content and looks for the following items:
- Use of paragraphs as headings
- Sequential headings
- Adjacent links
- Ordered list structure
- Unordered list structure
- Contrast ratio of text to background colors
- Image ALT text
- ALT text filename
- Table Caption
- Complex table summary
- Table caption and summary
- Table heading scope, markup, and headers
The checker indicates if there are no issues, or offers suggestions to fix identified accessibility issues. Here are a few examples:
I added a graphic image without adding any written alt text, by indicating that I was inserting a decorative image. When I clicked on the Check Accessibility icon in the HTML editor, I received this accessibility check:
Figure: Using the Accessibility Checker in Brightspace Editor.
Keep in mind that using the Insert Stuff icon or the Insert Image icon requires you to add Alt Text or mark the image as decorative before you can add the image to the page. If you mark the image as decorative, which inserts the code for Null Alt Text (as intended), you will still get the potential error message as shown above when running the accessibility checker. In effect, the checker is asking you to check to make sure that you don’t need some written alt text to describe the image to someone using a screen reader.
If I wanted to use Null Alt Text because the image was truly decorative, then I would simply hit the Ignore button.
If you copy paste an image from another source, such as word processing document, then it will likely come in without any Alt Text. In this situation, the Check Accessibility button would be a great help to the author.
A second example is shown in the graphic below. Here is a case where I intentionally entered Page Headings in an inappropriate manner (H2, then H4, then H3). The accessibility checker alerts me to this problem and tells me that they must be in the proper sequence.
Figure: The Accessibility Checker highlighting inaccessible content in Brightspace Editor.
A third example is shown below. I changed some of the text from a black font color to other, lighter font colors. Two of the three colors do not provide enough contrast, and the accessibility checker highlights these for me.
Figure: The Accessibility Checker highlighting inaccessible colors in Brightspace Editor.
One thing that the accessibility checker cannot do at the current time is alert you if you insert a video that does not have captions. I searched for and easily found a video that does not have closed captions available for playback. The accessibility checker does not alert me that the embedded video does not include captions. This is an example of the need for the user to still be aware of accessibility issues and not rely solely on the new Check Accessibility feature.
Figure: The Accessibility Checker highlighting inaccessible video content in Brightspace Editor.
Overall, the Check Accessibility feature is a great addition to the Brightspace.
