Accessibility and Online Education Materials

It’s a lot harder to convert in-person materials to accessible online material than you think. And you can’t leave out accessibility.

Empty theater style classroom with wooden student chairs and a black swivel intructor’s chair
Empty theater style classroom with wooden student chairs and a black swivel intructor’s chair

Each day there are at least a dozen new articles in my LinkedIn feed on converting dead-tree, in-person course materials to online course formats. Maybe 1 in 10 of them (if that) address accessibility, and then usually just in passing like “oh, yeah, remember to caption your videos”

Emergencies are not a valid excuse for leaving children with disabilities behind. Folx, these are all lawsuits waiting to happen. The plaintiffs are winning 98 % of them. Don’t be the one they make the example of.

Continue to follow accommodations identified in 504 plans, IEPs, and by disabled student services

If a school has agreed to a particular set of accommodations such as captioning, an emergency that moves education to the home setting is not a valid excuse for ignoring those agreements.

Not all disabled students have 504 plans, IEPs, or recommendations from disabled student services

Problem:

  • Some students are just getting by in in-person settings, and will be less successful studying from home
  • Some students don’t realize they are entitled to extra services
  • Some students (and their families) feel that asking for special education is stigmatizing, and so they don’t ask for something that their children could benefit from.
  • Some students have conditions (such as anxiety, clinical depression, autism) that will worsen in isolated settings.

Solution: Reach out to the children who are not doing well (or their parents) and try to dig deeper into why

Provide text descriptions for all non-text visuals especially informative graphics

Problem: Without descriptions, graphics are usuable by people with vision loss

Solution: All non-decorative images and videos should have a text alternative to match the visual information being conveyed. Word and Powerpoint files have the ability to add alt-text at the image level, but any description as close as possible is better than nothing.

Never, ever use raw scans of pieces of paper

Problem: I’ve lost track of how many times I’ve pieces of paper scanned and turned into .PDF files without any other processing. Frequently this is done in physicians office where they will take something that was in paper form (such as physical therapy instructions or intake forms) and create files out of them. These are totally unusable by people who are blind or who can’t use a mouse.

Solution: Run the scans through OCR, then clean them up. Check them in the MS Word accessibility checker, and save them out as doc files. Honestly, sometimes it’s faster to just re-enter accessible versions into Word.

Closed Caption (CC) Videos

Problem: Not all students with hearing loss have IEPs or 504 plans. A student with hearing loss who is getting by in an person setting might heavily reply on speech reading. They might be completely hosed when unable to read lips. Animation is the worst for that.

Solution: All videos should be closed-captioned. Even if the audio track is empty or only contains music there should be an appropriate caption such as “no sound” or “waltz” or “Elton John Bennie and the Jets.” I personally love the BBC guide to determine what level of captioning detail should be used since it takes into account context. Subtitles or transcripts are an acceptable alternative to captioning.

It takes a long time to manually caption videos. A quicker way to do it is to take the auto captioning script from YouTube (or MS Teams if you are lucky, their autocaptioning is vastly better) and clean it up. If you can afford it, rev.com will provideo you a video captions file in 48 hours for $1.25 per minute.

Evaluate your videos for Descriptive Audio

Problem: People with significant vision loss use Descriptive Audio (aka Audio Description, and sometimes referred to as AD or DA) to understand videos that contain informational content which is not conveyed on the audio tracksoundtracks to achieve an equivalent experience. Think of the Wizard of Oz. How would a person with significant vision loss know that the Munchkins were people of short stature or that Toto was a small terrier unless it was specifically mentioned in a descriptive audio soundtrack?

Descriptive Audio is not always required. Multimedia where the content is largely conversational, such as vlogs or interviews don’t typically require DA since the content is more conversational and will more likely be fully conveyed via the audio track rather than through visual cues. On the opposite end of the spectrum, animation (again !) is the worst and almost always requires a DA soundtrack, because much of it is visual-only.

Solution: DA soundtracks can be obtained from 3playmedia.com

Use enough strong contrast in color choices

Problem: Text with poor color contrast for both people with unimpaired vision and people with color blindness (also known as volor vision deficiency) is difficult to read.

Solution: Text should have a good contrast ratio against its given background. Because educational content might be viewed on a mobile device, a best practice would be using a minimum threshold of 5.0:1

Make sure anything with color is evaluated in color-blindness mode. This is easily done by using the color blindness simulator provided by Coblis.

  1. Take a screen shot of the material in question
  2. Paste it in the Coblis website
  3. Select the type of color blindness the student is experiencing. Over 90 % of color blindness is red-blind / green-blind.
  4. Make sure that the contrast of both the original document and the re-rendered document meetings the 5.0:1 desired ratio using the Paciello Group Color Contrast Analyzer.

Don’t embed text in your images

Problem: When you embed text in images, it becomes pixelated (i.e. gets fuzzy) when magnified, making it very hard to read in a “zoomed in” state.

Solution: Use live text separate from (and preferably not on top of) pictures. A few other font-related best practices include:

  • Use only sans-serif font families — serif fonts make things harder to read
  • Don’t use an overly ornate script
  • Don’t use a lot of italics
  • Don’t center or right justify

Do your tables announce in an understandable manner?

Problem: Tables are frequently used espectially in STEM subjects. Imagine hearing announcement of “10” — is that useful to you? What if you heard, instead “10 grams of carbs Oreos” because your row header said “oreos” and your column header said “grams of carbs” That’s the difference structuring tables correctly makes.

Solution: Make sure your tables have text descriptions or are structured with row and column headers so they announce correctly via screen readers.

Make your link text short and understandable

Problem: Many handouts, especially resource pages, contain multiple links. Having your link text be the URL of the link, while common, is very undesirable from an accessibility perspective. It takes a long time for screen readers to announce all the useless information like http://www/and the top level domain identifier at the end such as .com or “.co.uk” While that may not seem like a lot of extraneous information, on a link heavy page it can add several minutes to the time for a screen reader user to listen to the information announced.

Solution: Where possible, use link text that is easily understandable. Where a link cannot be formatted to be optimally accessible, use a URL reduction tool (something like bit.ly) to reduce overly verbose (and not useful) screen reader announcements. Even better, use a personalized bit.ly (like bit.ly/ux4pwds for my CSUN presentation) so it isn’t a jumpled string that is hard to remember.

Written by

Accessibility Architect @ VMware. W3C Silver, ITI & IAAP GLC committees. Degrees in CS, law, business. Wheelchair user w/ a deaf daughter.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store