Barry Dahl dot com

Improving the accessibility of online course content in post #7 of the series. #A11Y

In the first half of this series of blog posts, we looked at online course accessibility concerns for simple and complex images, video captions, and a general introduction about web course accessibility and why this is an important topic. In this post I’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.

There’s a lot to cover regarding HTML pages, so we’ll break it into parts. This time we’ll look at four simple improvements that you can make right away to your existing online courses.

One: Check your Use of Page Headings in Course Content

Properly formatted page headings are very important to structure and readability of your course content. Formatting your text as big and bold does not result in proper headings. You need to use the HTML headings coding for proper formatting, which is usually available with a simple click of the mouse. Hierarchy of the headings is also crucial. They need to be in the correct order to make sense to students using a screen reader. Headings are an important way of navigating through the content with a screen reader – think about skimming and skipping through the content. Headings also chunk out your content which also makes it easier for sighted students to read.

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 above 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

Oftentimes a list is not a list. What? If you haven’t properly formatted a list of items, it might look like a list to the sighted student, but it won’t be identified as a list to the unsighted student.

The formatting elements that are part of the html code, such as lists, headings, and links, are read aloud to screen reader users, so the content is understood in context. They will be told that the next piece of content is a list, and they will also be told whether the list is ordered or unordered.

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: (this is an unordered list)

• Denver Broncos
• Minnesota Twins
• Minnesota Vikings
• San Diego Padres

My top four favorite teams are: (this is an ordered list)

1. San Diego Padres
2. Denver Broncos
3. Minnesota Vikings
4. 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.
  • Check out this W3 Schools tutorial for more info about text linking,
  • Visit https://www.w3schools.com/accessibility/accessibility_link_text.php to learn more about text linking.

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.²

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.

Directory to posts in this series:

1. Improving Accessibility of Online Courses – the why
2. What do Educators Need to Know about VPATs?
3. Alt Text for Simple Images in Online Courses
4. Complex Images – Going Beyond Simple Alt Text
5. Finding Videos with Good Captions
6. Captioning Videos for Your Online Courses
7. Improving the Accessibility of your HTML Content Pages – Part 1
8. Improving the #A11y of Your HTML Content Pages – Part 2
9. Making Word Documents Accessible for Online Learning
10. Making PowerPoint Files Accessible for Online Learning
11. Using Web-based Tools in Online Learning – #A11y
12. Six More Tips for Making Online Courses Accessible

Filed under: accessibility |