By Barry Dahl – October 24, 2016
Improving the accessibility of online course content in post #8 of the series. #A11Y
Earlier in this series of blog posts, we looked at online course accessibility concerns for third-party tools, simple and complex images, and video captions. This week we’ll focus on making HTML content pages more accessible to students with disabilities, particularly for those students using assistive technology such as a screen reader.
We’ll start with a quick look at four simple improvements that you can make to your existing online courses.
One: Check your Use of Page Headings in Course Content
It’s important to use properly formatted headings to structure your web page. It isn’t enough to make headings big and bold. Headings need to be formatted as headings and should be used in the correct order. Headings chunk out your content making it easier for everyone to read, but they are also a major way of navigating with a screen reader.1
Heading 1 is like the title of a book and there is just one Heading 1 per page. Heading 2s are like chapter titles. Heading 3s are sub-sections of those chapters, and so on. The heading hierarchy also resembles an outline’s hierarchy if that metaphor works better for you. See the graphic at right for a visual display of a possible heading order
Note: While descending in heading levels, DO NOT skip a level
Two: Know When to Use Ordered and Unordered Lists
It is important to format a list as a list.
Formatting elements like lists, headings and links, are read aloud to screen reader users, so the content is understood in context.
Unordered lists should be used when there is no order of sequence or importance. Ordered lists suggest a progression or sequence. As with headings, lists should be used correctly and for the right purposes. Unordered and ordered lists should always contain list items. Lists should not be used for decorative purposes such as indenting solely for layout purposes.
My favorite teams include:
- Denver Broncos
- Minnesota Twins
- Minnesota Vikings
- San Diego Padres
My top four favorite teams are:
- San Diego Padres
- Denver Broncos
- Minnesota Vikings
- Minnesota Twins
Three: Create Good Links to Additional Content
General guidelines for links:
- Avoid using “click here” or similar non-descriptive link text. Everyone knows you have to click on or otherwise activate a link. Instead, use descriptive link text that tells the user the destination of the link. Where will they be taken if they activate the link?
- If multiple links on a single page include the same link text, all those links should point to the same destination.
- Screen readers say “link” before reading the link. For example: a text link of “link to discussions” would be read as “Link link to discussions.”
- Users of screen readers will often tab from link to link, which is a form of content skimming. Do your links make sense when not in the context of the surrounding content?
- Using the link URL as the link text is generally not a good idea from an a11y viewpoint. A particularly nasty URL (numbers, underscores, dashes, etc.) can be very confusing when listening to a screen reader. It’s also not helpful to a sighted person skimming the page
- Which of these links do you prefer? Don’t be confused. They go to the same place.
Four: Avoid Flashing or Blinking Content
Any flashing/blinking content (especially content in red) can cause seizures in people with photosensitive epilepsy as well as other photosensitive seizure disorders, so it should be limited and used only when necessary. Web pages that do contain flashing content, should limit the flashing to no more than three flashes per second and not use fully saturated reds in the content. If you do have content that flashes/blinks more than three times per second, freeze the blinking content momentarily so it falls below the three times per second limit. If you have a web video with a scene involving very bright lightning flashes (or other scenes with flashes), edit the video so the lightning doesn’t flash more than three times in any one second period.2
In the next post, we’ll consider some additional HTML page accessibility elements, including those that are specifically related to making content pages in the Brightspace platform.
Accessibility Posts - October-November 2016
- Setting the Stage for Improving Accessibility of Online Courses
- What is a VPAT and Where Can You Find Them?
- What Value Can You Find in a VPAT?
- Alt Text for Web Page Images
- When Simple Alt Text is Insufficient
- Finding Captioned Videos for Your Online Courses
- Creating Captions for Your Online Course Videos
- Four Easy Wins to Make Your HTML Content Pages More Accessible
- Three More Ways to Improve Accessibility in your Brightspace Courses
- Creating Accessible Course Content in Microsoft Word
- Creating Accessible Course Content in Microsoft PowerPoint
- Six More Tips for Making Online Courses Accessible
Much of the content in this series of posts comes from WAMOE, the Web Accessibility MOOC for Online Educators; co-created by Karen Sorensen of Portland Community College and Barry Dahl of D2L.
1 Written by Karen Sorensen for WAMOE module 4-1.
2 Written by Karen Sorensen for WAMOE module 4-2.
