Close up UX developer and UI designer brainstorming about mobile app interface wireframe design on table with customer brief and color code at modern office
ATD Blog

How Do You Optimize Accessibility?

Wednesday, November 25, 2020

You could do a better job with authoring accessible e-learning. It's not really your fault. The truth is, we can all do better. We should strive not just to do the bare minimum but to optimize the experience of all learners.

To author truly accessible e-learning, you’ll often need to go above and beyond the usual checklist. Here are five tips.

1. Use Sensible Focus Items in a Logical Focus Order

Keyboard navigability is an important part of accessibility compliance. It serves learners who rely on a screen reader due to impaired vision, limited literacy, or learning disability. It also helps learners who have motor deficits that make it difficult to navigate by touchscreen or mouse. You can meet the bare minimum by ensuring that all substantive components in your course are capable of being singled out (“focused” on) through keyboard navigation.

You shouldn't, however, stop there. To make the learning experience as smooth as possible for all learners, you’ll need to check the focus order and ensure that the content appears in a logical sequence. You can do this without screen reading software by tabbing through the page and watching where the focus outline goes.

It's easier to flub the content’s focus order if you're authoring e-learning using content layers. The way these layers are stacked will directly affect the focus order, and you're probably not thinking about that as you build.

One of the last steps of your editing process should be to optimize accessibility by rearranging the layer order. Layers are read from bottom to top. Items sharing a layer are ordered from top-left to bottom-right, so you may also need to split items onto separate layers or change their position.

Pro Tip: Stop using a slide-based/fixed-pixel approach (or authoring tool) when designing your e-learning. Responsive design automatically takes care of these problems and also improves usability for screen magnifiers and of course mobile users.

2. Add Supportive Text for Screen Readers

Visual and interactive elements are critical to making your learning content interesting and engaging. However, learners with limited or no vision will miss out on or struggle with your content unless you add supportive accessibility text. It can also pose a problem for learners with slow, little, or expensive bandwidth. Adding alt-text is the first step to closing this gap. Make sure alt-text includes the information learners need from an image, not just keywords.

What is a learner with typical vision getting from the image? Recreate that in text. (Another way to optimize accessibility is to ensure that purely decorative elements are unfocusable so screen readers will skip it.) Complex graphs or illustrations may need more than the 100 allowable alt-text characters. Explaining key takeaways in the visible text can help learners with visual limitations as well as those that struggle to interpret visual data.

Interactive elements can also benefit from a little instruction. Include this in visible text when all learners could use direction. When assistive technology requires special instructions, some authoring tools enable supportive text that is only visible to screen readers.

Pro Tip: If you are using an authoring system that also helps manage your content, the descriptions you add to for tagging/searching can often be used for alt-text for the asset. In some tools this is automatic, which will enable you to write one good description and benefit twice.


3. Optimize Use of Color and Contrast

Low contrast and certain color combinations can cause problems for learners with impaired vision. In fact, certain lighting conditions can make low contrast challenging for everyone. It also worsens the effects of eye strain. Whether or not your goal is authoring accessible e-learning, you should create sufficient contrast against the background for any critical elements, especially text, images of text, and buttons.

Another common mantra of accessible design is “don't use color alone to convey information” because an estimated 8 percent of men have some degree of colorblindness (for women, it’s 0.5 percent). Most people with a color vision deficiency have difficulty with green and red. Blue-yellow deficits are much rarer. Total colorblindness is rarer still. It's not as simple as avoiding stoplight red and green. Red-green colorblindness affects all shades of those colors as well as brown, orange, and purple.

What are the best practices for authoring colorblind-accessible e-learning? Here are a few:

  • Contrast matters for colorblindness too—pale colors are more easily confused with one another, as are dark ones.
  • Graphs and charts that use color to distinguish data sets should also use a noncolor alternative. Options include textures, patterns, contrast, numbers, shapes, or labels. Many times, these alternatives can be worked into the main graph. In cases where that makes the graph too busy, provide learners with the option to switch to a colorblind graphic.
  • In line graphs where multiple data sets cross, make sure that all learners can follow each line’s path. Use line patterns, contrast ratios, or data points with different shapes.
  • A red outline around an incorrect form field shouldn't be the only indicator of a problem. Icons work as well as applying a background shade or a thicker border. Error lists are colorblind accessible but also benefit learners using screen readers.

There are tools available that allow you to check the accessibility of contrast and color in your project. You can also look for authoring tools that provide WCAG-compliant themes that are pretested.

Pro Tip: If you are using a centralized management system for managing your content, you can build these designs directly into your themes (skins) and ensure your team uses the theme “colors” when developing content. This way if anything is missed, you can just update the theme instead of individual pages. If your system lets you reuse themes, then you only need to make this change once to update all content using that design.

4. Create Full Accessibility for Audio and Video Content

Audio and video files are a great way to build engaging multimodal courses. Don't sacrifice these resources in the name of easier accessibility—your content will be poorer for it. You do, however, need to plan for accessibility. Providing a text version of audio or video content will benefit learners who are deaf, hard of hearing, or have auditory processing issues. They'll also make the content accessible to anyone who can't turn on their sound, which is crucial in an era when so much learning happens on the go.

Text alternatives should include a description of any nonverbal but contextually relevant sounds (like a bird call in a course about birds). Audio-only clips are straightforward; they call for a transcript.

Videos are more complicated. Closed captions make video clips accessible while preserving access to the visual content. Video transcripts can be read independently, and as a result, also serve learners who can't play the video (due to bandwidth, for example). Enhanced video transcripts that also describe visual elements can make videos fully accessible to blind or low-vision learners.


Finally, some authoring tools make it possible to have interactive video transcripts. This makes it easy for learners to review specific segments. It also provides needed support for anyone with ADHD, learning disorders, or sensory processing difficulties.

Pro Tip: Don’t get caught up in the idea that you need to add audio “narration” to a page to make it accessible. People who can’t see will be using screen readers, which often give more information than a screen transcript. Further, its generally not recommend to auto play audio for several reasons.

5. Make Assessments Accessible

When you're authoring accessible e-learning, you can't forget about your assessments. Make sure your question types and answer designs are accessible. Drag-and-drop questions are inadvisable because most can’t be used with a screen reader. Questions or answers that use image, video, or audio instead of text won't be universally accessible unless you take extra measures.

You can still use these assessment tools as long as you add accessibility features. You’ll need to offer alternative questions to demonstrate knowledge of that objective, but that should be a last resort.

Answer feedback also needs to be accessible. Indicators for correct and incorrect answers can't be purely visual, and your textual feedback needs to be informative and positioned in the right focus order. Putting feedback in the wrong spot can render it useless for screen readers or create unnecessary keystrokes.

Pro Tip: In general, drag-and-drop exercises don’t really make learning better. Not only do they not meet accessibility requirements, but they are often poor experiences on mobile devices. However, with recent advances, some authoring tools are providing options for more controlled drag-drop exercises that are WCAG compliant and auto-adjust for mobile devices.

Want to Learn More?

Join me at ATD TechKnowledge 2021 for the E-Learning Accessibility Tips, Gotchas, and Standards session. We will explore how to make your learning content Section 508 or WCAG compliant—in other words, accessible to all.

Editor’s Note: This post originally published on the dominKnow blog.

About the Author

Paul Schneider is senior vice president of dominKnow. He has worked in the area of distance communication technologies in academia and corporate for over 18 years, with his primary focus on distance learning. In this capacity he has provided services in the areas including instructional design, web design, classroom, product development, distance instruction, technical support, project management, network administration, and course development. Paul, who holds a PhD, oversees operations and business development at dominKnow, helping to guide the product development and organization to meet their mission to design easy-to-use products that can enable people to develop and deliver high quality training with maximum efficiency.

Sign In to Post a Comment
Thanks for this Paul. I wonder if you have any advice on accessibility for live webinars? My organization is exploring if we should have language or a question on our registration form related to additional accommodations. Would you have any advice or additional tips on that?
Sorry! Something went wrong on our end. Please try again later.
Great article Paul, you provided excellent strategies & tips to help make content more accessible. Thanks!
Thanks Maureen! It's always great to hear about folks starting to incorporate accessibility design into their workflow. I look forward to hearing from folks and their experiences at my ATD Tech Knowledge talk next week. FYI here are some more great resources:
Sorry! Something went wrong on our end. Please try again later.
Sorry! Something went wrong on our end. Please try again later.
Sorry! Something went wrong on our end. Please try again later.