Designing with Visual and Audio Accessibility in Mind: What You Need to Know

Emily Herrero
Posted: March 20, 2019

A few years back, I was on a team designing a program for employee career development. One of our tasks was to create a profile that showed an employee’s readiness to move to the next level. As we thought about ways to create something useful that would be a quick indicator of an employee’s progress, we settled on using a stoplight system — Red: Not ready; Yellow: In development; Green: Ready for next role.

Sounds simple, right?

We presented our plan to leaders in the organization for review, and while most loved the idea — we had an unexpected hiccup. One of our reviewers was color blind. This individual couldn’t see what we thought was a simple color-coded system.

I’ll be honest here: It hadn’t even occurred to me that this could be an issue. I was so comfortable with my own way of thinking and knowing what worked for me that I made the incorrect assumption it would work for everyone else.

In some way or another, you’ve probably been in this exact same situation yourself. That’s why thinking about accessibility (especially early on in the design and development processes) can help you build a better learning solution that embraces usability for all.

In fact, a lot of accessibility standards actually make it easier for all of us to enjoy and interact with information. By making your content accessible, you can not only deliver on your company’s goals for inclusion, but also show your entire workforce that you value each person’s participation and want everyone in the organization to have the same access to information. Think about how this can influence the morale and engagement of all your employees!

Let’s look at some ways you can start to incorporate accessible design into your learning today. Keep in mind though — this isn’t an all-inclusive list. We’ll touch on some key points here, but I’d love to hear your ideas on how you approach accessibility. Feel free to share those in the comments section below.

Plan for it

The main point is to plan for it; know that accessibility needs to be a part of everything you design.

Anote here to any learning managers or leaders: Think about this upfront and be clear with your instructional designers and developers on the types of accessibility your team needs to keep in mind.While it may seem like this is something that can easily be adjusted later, it can be challenging and time consuming to retro-fit a training to meet various accessibility standards.

One method that can help you plan (as well as design and develop) is the POUR approach, as defined by the Web Content Accessibility Guidelines (WCAG) 2.1. They are:

  • Perceivable
  • Operable
  • Understandable
  • Robust

For a detailed explanation on how to utilize POUR and incorporate these principles in your own instructional design and development, check out this article on WebAIM’s website: Constructing a POUR Website.

WebAIM also offers a checklist that can help you plan for 508 Accessibility considerations and the WCAG 2.0 guidelines. As they state on their website, this checklist isn’t a replacement for the full list of guidelines, but it’s still a great place to start. At the very least, you’ll have a better sense of what you need to think about as you’re planning your learning content.

Additionally, spend some time reviewing the U.S. General Services Administration’s website on Section 508 and the accessibility requirements there. It includes details on creating accessible content by type and how to test your content for accessibility.

Let’s jump into some of those accessibility considerations.

Accessibility considerations

Think about the types of content you are developing. Depending on your learning and development strategy, you’ll want to consider incorporating the following items:

Voiceover:

Closed captioning may need to be added in, which can impact the placement of graphics and other onscreen text in video or eLearning courses. It can also affect how and when audio is played. Maybe audio should be avoided altogether, and it should be a text-based piece that can be read easily by the learner or by a screen reader. Be thoughtful here about how voiceover can add or detract from the experience and if it adds value to the message you are trying to convey.

Graphics and onscreen text:

The same holds true for graphic and onscreen text components as well. If screen readers need to be able to access eLearning content, then the developer needs to be careful about how things are layered on the timeline in their authoring tool, or the screen reader may either read them out of order or not read them at all. Think about the implications of this for a moment.Your learners could end up completely confused or miss out on important concepts.

Additionally, special thought should be given to how text and imagery are used together. For example, if you have a big, bold graphic that you’re then layering text onto, consider how well that text contrasts with the graphic behind it. Is the text big enough? Does the color or font style you’ve chosen blend into the background too much? What would happen if your learner were color blind or had low vision; would the text on the graphic even be visible?

Interactions:

Another consideration with eLearning is the types of interactions you’ll include(for example, clicking buttons or dragging and dropping content on the screen). In some instances, you can add keyboard shortcuts for the learner to perform an action, but sometimes these don’t function as intended. Spend some time getting familiar with your authoring tool and where it might have accessibility limitations. This will help you plan better interactions that will be more meaningful — no matter the user.

Imagery, animations, and video:

If you’re using a lot of imagery to tell your story, be prepared to include descriptions of those images in the Alt Text and Long Description fields. You want everyone to experience the beauty you’ve created, whether it be in writing, spoken words, or images. This also applies to any animations or video you’ve incorporated into your design. Be sure to provide descriptions on those items so that all learners can have a similar experience.

Related: How to Bring Your PowerPoint Training to Life With Better Animations & Transitions

One additional note on animation: Items that flash or flicker repeatedly can cause seizures or migraine headaches in certain individuals, so it’s best to avoid this when you’re thinking about ways to add that extra “sizzle” to your content.

Now that we’ve looked at a few accessibility considerations from my perspective, start to think about what others you might face.

Resources to help you check for accessibility

Here are a few extra resources to supplement the ones already highlighted above that can help you prepare for building your own accessible content.

  • The dos and don’ts on designing for accessibility include wonderful posters that were developed for the UK government by Karwai Pun. They are an excellent tool to help guide you in creating your own accessible content for anyone.
  • I also highly recommend checking out the U.S. Web Design System. While this website focuses on designing content for the federal government, it lays out some of the best design and accessibility principles I have seen personally.

Know your learners

All instructional designers understand how important it is to know your learners, but it can be easy to get tunnel vision — like I mentioned at the beginning of this article in my own personal example. Consider the types of barriers learners might face when accessing your content. Look for ways to incorporate accessibility into your own design and development processes so that you can make better solutions for everyone.


About the Author