Designing for Visual Accessibility: What It Actually Means in Your Courses

When most people hear "accessible eLearning," visual accessibility is usually the first thing that comes to mind. Screen readers. Alt text. Maybe a vague memory of someone mentioning color contrast at a conference once.

It's the most visible category (no pun intended) and also the one most designers think they've handled. Add some alt text, maybe check a contrast ratio, and move on. Box checked.

Except it's not that simple. Visual accessibility isn't one thing. It's a set of interconnected decisions, and missing any one of them means some of your learners are still on the outside looking in.

So let's talk about what visual accessibility actually requires, and what it looks like in practice.

Who Are We Designing For?

Visual disabilities exist on a wide spectrum. We're not just talking about complete blindness. Low vision, color blindness, light sensitivity, and age-related vision loss all affect how learners experience your content. According to the World Health Organization, over 2 billion people globally have some form of vision impairment.

That's not a niche audience. That's a significant portion of any workforce you're building training for.

The Big Four for Visual Accessibility in eLearning

1. Alt Text — and Writing It Well

Alt text is the description a screen reader reads aloud when it encounters an image. Most designers know this. Fewer do it consistently or well.

Bad alt text: "Image1.png" Also bad alt text: "A photo of a person sitting at a desk in an office environment with a computer." Good alt text: "Employee reviewing onboarding checklist on a laptop."

The goal is to convey the meaning or function of the image - not describe every pixel. Decorative images that add no informational value should have empty alt text (alt="") so screen readers skip them entirely.

Designer Hint: With the use of AI, you can upload an image and get great Alt Text back in seconds! Use the tools you have to make your job easier!

2. Color Contrast

If a learner with low vision or color blindness can't distinguish your text from your background, your content doesn't exist for them. WCAG 2.1 AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.

Designer Hint: This is one of the most common failures I see - and one of the easiest to fix. Use WebAIM's free Contrast Checker before you finalize any color palette. Stop eyeballing it.

3. Not Relying on Color Alone

Color is a convenient shortcut. Red means wrong, green means correct. The problem is that roughly 1 in 12 men and 1 in 200 women have some form of color blindness (colourblindawareness.org).

If your quiz feedback, charts, or instructions rely entirely on color to convey meaning then you've lost a portion of your learners before they read a single word.

Designer Hint: pair color with text labels, icons, or patterns. "Correct" in green with a checkmark. "Incorrect" in red with an X. Both communicate the same information through two channels instead of one. This rule also applies to the use of States in eLearning.

4. Screen Reader Compatibility and Tab Order

This is where things get more technical, and truthfully where a lot of builds quietly fall apart.

Screen readers navigate content sequentially, so the order in which your objects are read matters enormously. In Articulate Storyline, you control this through the tab order panel. If you haven't manually set it, the default order is often the order objects were added to the slide, which is rarely logical for a learner who can't see the visual layout.

Designer Hint: set tab order intentionally on every slide, exclude decorative elements from the tab order, and test your course with a screen reader before you call it done. NVDA is free. There's no excuse not to run it at least once.

A Note on Images of Text:

If your content lives inside an image - a screenshot of a document, a graphic with text baked in - a screen reader cannot read it. This is one of the more common accessibility failures in corporate eLearning, especially when designers grab screenshots and drop them in without thinking. This is why Alt Text is so important.

If the text matters, it needs to exist as real text in the course. Full stop.

Screen Reader Tip

Animations can create accessibility barriers for learners using screen readers. When content - text, images, or other elements - appears through animation, it may load after the screen reader has already parsed the slide. This can cause animated content to be read out of order, skipped entirely, or announced in a way that disrupts the learning experience.

If your course includes animations of any kind, test thoroughly with the screen readers your learners are most likely to use. Common options include JAWS and NVDA.

What Good Looks Like

Visual accessibility isn't about stripping design down to plain black text on white backgrounds. It's about making intentional choices, and testing for things like contrast ratios, meaningful alt text, logical reading order, and content that communicates through more than one channel.

Done well, it doesn't just help learners with visual disabilities. It makes your content cleaner, clearer, and more professional for everyone.

I learned most of this through federal contract requirements that left no room for guessing. The standards felt rigid at the time. Looking back, they were just good design with accountability attached. What designer hints and/or tips do you have to share? Comment below!