6 Easy Ways to Make Your E-Learning More Accessible

Intimidated by the Web Content Accessibility Guidelines? You’re not alone.  While it’s great these guidelines exist, most e-learning pros find them overwhelming. They’re long and written in tech speak, so it can be hard to be sure you’ve fully understood what they mean—much less ensure your courses comply with them. 

But the truth is, you don’t have to go from zero to 100% accessibility compliance overnight. Most e-learning pros aren’t experts in WCAG, but instead are taking baby steps toward accessibility—learning and improving incrementally. 

In this article, I’d like to walk you through some easy—but important—changes you can implement right away to make your courses more accessible. 

1. Make All Text Size 12 or Larger

When designing e-learning, keep text size in mind for clarity and readability. All you have to do is make sure all the text in your course is set to at least size 12, so it’s easier to read. Pretty simple, right? 

2. Use Contrasting Colors

Another simple thing you can do to ensure all your learners can read and interact easily with your content is to choose colors for foreground objects—like text and buttons—that stand out from the background. The easiest way to do this is by measuring the contrast—or the difference in brightness—between your foreground and background colors using an accessible color palette builder like this one.

Here are two main rules to remember:

• The color of your text should have a 4.5:1* contrast ratio with the background color.
• The color of interface elements—like buttons—should have a 3:1 contrast ratio with the background color.

For more information on contrast, check out this article: Contrast Considerations for Accessible E-Learning.

3. Make All Buttons 44 x 44 Pixels or Larger

Changing the size of your buttons is another quick win. By adjusting all your buttons to at least 44 x 44 pixels, you’re making sure they’re easy for all learners to select—even if they have motor impairments. Check out the difference below:

35 x 20 pixels	45 x 90 pixels	65 x 185 pixels
Try it out for yourself

The bottom line is that the bigger the button, the easier it is to click because you don’t have to make as much of an effort to click in the exact right spot.

4. Add Alternative (Alt) Text to Informative Images and Hide Decorative Images

Another easy way to make your courses more accessible is by adding alt text—descriptive text that screen readers announce to learners—to informative images in your course to explain what an image depicts. If an image is just decorative, you’ll want to hide it from accessibility tools so the learner won’t have to repeatedly press the tab key or screen reader navigation keys to advance to important elements.

How can you tell the difference between informative and decorative images? Just ask yourself this question: If I removed this image, would the learning experience be impacted? If the answer is yes, it’s an informative image. If the answer is no, it’s likely a decorative image. 

For tips on writing effective alt text, read this helpful WebAIM article.

Not sure how to add alt text or hide decorative images from screen readers? If you’re using Articulate apps, it’s super easy! Check out these tutorials to find out how it works:

• Storyline 360: Adding Alternative Text for Screen Readers
• Storyline 360: Hiding Objects from Accessibility Tools
• Rise 360: How to Add Alternative Text to Images

5. Include Closed Captions and Transcripts for Audio and Video

To make your audio and video content more accessible, start including both closed captions and transcripts. For videos, make sure to include visual descriptions in the captions and transcripts so everyone can benefit from the additional context contained in the video. 

Why include both captions and transcripts? Because people who are deaf and blind can’t access captions. Not to mention that transcripts also allow people with cognitive impairments to read at their own pace.

Luckily, adding closed captions and transcripts is easy in Articulate apps! Check out these tutorials for closed captions:

• Storyline 360: Creating and Editing Closed Captions with the Built-In Editor
• Rise 360: How to Add Closed Captioning to a Video

And to add transcripts, here’s what I recommend:

• For videos in Storyline 360: Enable the transcript button after adding closed captions to automatically generate a video transcript.
• For audio in Storyline 360: Add a button that opens a layer with the transcript text on it.
• For audio and video in Rise 360: Add a single-tabbed accordion block below the audio or video block with the transcript text inside.

If your course uses a lot of audio and video, it’s also a good practice to include a downloadable transcript at the beginning of the course, so learners can follow along that way if they’d like.

6. Customize the Focus Order (If Needed)

Another thing that has a big impact on the learning experience of learners using screen readers is the order in which on-screen text and objects are read aloud—called the focus order. And it makes sense! Imagine if when learners open a slide with a tabs interaction, instead of starting with the first tab, they were directed to the middle one? And from there, instead of moving on to the next tab, it brought them back up to the slide title? That would be a frustrating experience, wouldn’t it? Of course it would! When you don’t define a logical focus order, learners using screen readers end up doing extra work to access the same information as other learners—and that’s not an equal experience.

Luckily, if you’re using Rise 360 the focus order is taken care of for you, so you don’t have to worry about it. And if you’re using Storyline 360, you can easily customize it by following the instructions in this tutorial: Storyline 360: Customizing the Focus Order of Slide Objects

The Bottom Line

Will implementing these tips ensure your course conforms 100% to every WCAG standard? No. But you’ll be making a significant leap forward in the level of accessibility you’re providing—which will improve the learning experience for everyone.

Want to learn more about making accessible e-learning? Check out this helpful article series: All About Accessibility.

Subscribe to our newsletter to get the latest e-learning inspiration and insights directly in your inbox. You can also find us on LinkedIn and X (formerly Twitter). And if you have questions, please share them in the comments.

*According to the WCAG guidelines, large-scale text (≥ 14 bold or 18 regular) can have a contrast ratio as low as 3:1, but we simplified it to make it easier to remember and because a higher contrast is better.