A Practical Guide to Accessible eLearning (WCAG Explained)

Good design is accessible design.

For years, I've seen instructional designers and L&D teams treat accessibility as an afterthought—a compliance checkbox to tick just before launch. But I want to reframe that: elearning accessibility isn't just a legal requirement or a technical hurdle. It's the key to creating better, more effective, and more inclusive learning experiences for everyone.

If your course isn't accessible, a significant portion of your audience may not be able to use it at all. That's not just a compliance failure; it's a design failure.

The good news is that creating accessible elearning content doesn't have to be a mystery. The principles are straightforward, and the tools are better than ever. This guide is my practical, no-jargon approach to demystifying accessible elearning and helping you get it right from the start.

What is Accessible Elearning?

So, what is accessible elearning?

Simply put, it’s the practice of designing and developing online courses and training materials that can be successfully used by all people, regardless of their disability or the assistive technology they use.

This includes, but isn't limited to, learners who are:

• Blind or have low vision (who may use screen readers or magnifiers).
• Deaf or hard of hearing (who rely on captions and transcripts).
• Dealing with motor impairments (who may not be able to use a mouse and rely on keyboard-only navigation or voice commands).
• Experiencing cognitive or learning disabilities (who benefit from clear language and simple, predictable navigation).

Here’s the analogy I always use: Accessibility is like adding a ramp to a building.

A ramp is essential for someone in a wheelchair. But it's also helpful for the person pushing a stroller, the delivery driver with a dolly, or someone rolling heavy luggage. By solving the core problem for one group, you've made the experience better and more convenient for all. The same is true for accessibility in learning design.

Why is Elearning Accessibility So Important?

I often see teams treat this as a "nice to have" until a legal or client complaint makes it a "must-have." Let's be proactive. There are three clear, compelling reasons to make accessibility a core part of your design process right now.

1. The Ethical Case (The "Right Thing to Do")

This is the most important reason. As educators and designers, we have a professional and moral responsibility to ensure the learning we create is inclusive. An equal opportunity to learn and grow within an organisation shouldn't depend on a person's physical abilities. Excluding a portion of your audience from training isn't just unfair; it's a failure of our primary goal as designers.

2. The Legal Case (The "Have to Do It")

This is what gets the compliance managers' attention. In the United States, laws like the Americans with Disabilities Act (ADA) (which prohibits discrimination based on disability) and Section 508 of the Rehabilitation Act (which requires federal agencies and their contractors to make electronic and information technology accessible) are legally binding.

Courts have increasingly applied the ADA to digital spaces, and accessibility-related lawsuits are a significant and growing risk. For organisations in other countries, similar legislation (like the European Accessibility Act) applies.

3. The Business Case (The "Smart Thing to Do")

This is how you get buy-in from stakeholders.

• A Larger Audience: You are expanding your content's reach. Globally, the World Health Organization estimates that 1.3 billion people (about 16% of the population) experience a significant disability. This is not a "niche" audience; it's a massive one.
• A Better User Experience (UX) for All: This is the "ramp" effect. The principles of accessible design—clear navigation, simple language, readable text, and captions—create a better, less frustrating, and more effective learning experience for everyone. A new employee for whom English is a second language, a user taking a course on a noisy train, or a "power user" who navigates quickly with a keyboard all benefit from accessible design.

Understanding the Standard: What is WCAG?

"Okay, I get it. I need to make my courses accessible. But... how?"

The answer is (WCAG) (pronounced "Wuh-KAG"). The Web Content Accessibility Guidelines are the globally recognized technical standards for digital accessibility. Think of it as the official rulebook or technical specification. It's published by the World Wide Web Consortium (W3C), the same group that standards HTML and CSS, and it's the benchmark that most laws and policies (including Section 508) point to.

When someone says a course needs to be "accessible," they almost always mean "it needs to conform to WCAG."

WCAG Versions and Levels

You'll hear about different versions, like WCAG 2.0, 2.1, and 2.2. Think of these like software updates. Each new version adds new guidelines to address modern technology (e.g., 2.1 added more for mobile accessibility). Your organisation should be targeting WCAG 2.1 or 2.2.

More importantly, WCAG is organized into three levels of conformance (success criteria):

• Level A (Basic): The most basic, "must-have" accessibility features. This is the bare minimum for functionality. Failing these criteria means your content is impossible for some groups to use.
• Level AA (Intermediate): This is the gold standard and the most common legal and corporate target. It addresses the most common and significant barriers to accessibility. When a contract or policy requires "accessibility," it almost always means WCAG Level AA.
• Level AAA (Advanced): This is the most stringent, highest level. This is often reserved for specialized audiences or specific parts of a site, as it can be very difficult (and sometimes not appropriate for all content) to meet.

As an instructional designer, your target should always be WCAG 2.1 Level AA.

The 4 Pillars of Accessibility: Understanding POUR

WCAG is a massive, technical document. To make it easier for designers and developers to understand, it's organized around four core principles. If you can remember this acronym—POUR—you'll understand the why behind every rule.

1. Perceivable

Can the user take in the information? This principle states that all content must be presentable to users in ways they can perceive. It's about providing alternatives for different senses.

• Example 1 (Vision): Adding alt text (alternative text) to all meaningful images. A screen reader can then describe the image ("A manager shakes hands with a new employee") to a user who is blind.
• Example 2 (Hearing): Providing closed captions for all videos. This ensures a user who is deaf or hard of hearing can perceive the spoken content.
• Example 3 (Color): Ensuring that color is not the only way information is conveyed (e.g., "Click the green button to continue" is bad design if one button is only marked green). You also need to ensure high color contrast between text and its background (4.5:1 ratio for normal text) so people with low vision or color blindness can read it.

2. Operable

Can the user navigate and interact with the content? This principle focuses on the user interface and navigation. The user must be able to operate all controls and interactive elements.

• Example 1 (Motor): Ensuring your entire course can be completed using only a keyboard. Many users with motor disabilities cannot use a mouse. They rely on the "Tab" key to move between buttons and the "Enter" key to select them.
• Example 2 (Time): Don't have "timing traps." If a quiz has a 30-second timer per question, a user with a motor or cognitive disability may not have enough time. You must provide a way to turn off or extend the timer.
• Example 3 (Safety): Do not use content that flashes more than three times per second, as this can trigger seizures (photosensitive epilepsy).

3. Understandable

Is the content clear, and is the navigation predictable? This principle covers both the clarity of the information and the predictability of the interface.

• Example 1 (Language): Using simple, clear language and avoiding unnecessary jargon. Write for your audience (a 9th-grade reading level is a good target for general content). Define acronyms on their first use.
• Example 2 (Navigation): Making the navigation consistent. The "Next," "Back," and "Menu" buttons should be in a predictable place on every slide and clearly labeled. Don't hide crucial navigation behind confusing icons.
• Example 3 (Error-Proofing): If a user fills out a form or quiz, error messages should be clear and specific (e.g., "Please enter your name in the 'Name' field," not just "Error.").

4. Robust

Can the content be reliably interpreted by a wide range of technologies, including assistive technologies? This is the most technical principle, but your authoring tool handles most of it for you.

• Example 1 (Clean Code): This means your tool must generate clean HTML5 code that follows standards. When you use your tool's built-in "button" function, it should create a real <button> in the code, not just a shape that looks like a button.
• Example 2 (Compatibility): This ensures your course will work with common assistive technologies like screen readers (JAWS, NVDA), screen magnifiers, and voice-to-text software without crashing or misinterpreting the content's structure.

Your Checklist for Creating Accessible Elearning Content

This is the practical part. When you start your next project, use this as your primary checklist for accessible elearning content. Getting these right will handle the vast majority of accessibility issues.

Use Proper Heading Structures (H1, H2, H3)

• How: Don't just make text big and bold to look like a heading. Use the actual, built-in text styles (Heading 1, Heading 2, etc.) in your authoring tool. Screen readers use this structure to build a "table of contents" for the page, allowing users to skip sections easily.

Provide Descriptive Alt Text for All Meaningful Images

• How: Every image that conveys information must have alt text. If an image is purely decorative (like a swoosh or border), use your tool's feature to mark it as "decorative" so screen readers will ignore it and not clutter the experience.

Ensure High Color Contrast

• How: Your text and background colors must be readable. Use a free contrast checker tool to ensure your color choices meet the WCAG AA standard (a 4.5:1 ratio for normal text). Provide Synchronized Closed Captions for All Videos
• How: This is non-negotiable. All spoken audio in a video must be captioned. Most modern authoring tools and video platforms (like YouTube) have built-in caption editors. Offer Audio Transcripts
• How: Provide a separate, downloadable text document (a transcript) for all audio-only content (like podcasts) and as a supplement to videos. This is essential for users who are deaf-blind (who use refreshable braille displays) and helpful for those who simply prefer to read.

Ensure Full Keyboard Navigability

• How: This is a critical test. Put your mouse away. Can you get to every single button, link, and interactive element using only the "Tab" and "Enter" keys? You must also check the "focus order" (the path the tab highlight takes) to ensure it's logical (e.g., left-to-right, top-to-bottom).

Use Simple, Clear Language

• How: Write for clarity. Use active voice, write in short sentences, and break up large walls of text with bullets and white space. Avoid jargon and define acronyms.

Make All Clickable Areas Clear and Obvious

• How: "Click here" is bad design. The link text itself should be descriptive.
  • Bad: To learn more, click here.
  • Good: Read the full 2025 Safety Report (PDF).

Which Authoring Tools Help with Accessibility?

The good news is you don't have to do this by hand-coding. Modern instructional design tools have these features built-in. Your job as a designer is to know what they are and how to use them.

It's not just about having the features; it's about how the tool helps you manage them.

Modern, cloud-based tools like Compozer are often built with accessibility at their core. Because Compozer is a block-based, responsive tool, it handles a lot of the "Robust" principle (clean HTML5) automatically. When you add an 'Image' block, the field for 'alt text' is right there, making it part of your natural workflow, not an afterthought. This "accessibility-first" approach simplifies the process, allowing you to focus on creating inclusive content from the very beginning.

Of course, no matter which tool you use, the features are only as good as the designer using them. The tool gives you the alt text field, but you have to write the meaningful alt text.

At the end of the day, elearning accessibility isn't a final step or an add-on. It's not a feature you add after the course is built. It's a fundamental part of the design process, right from the first storyboard.

By embracing accessible elearning content from the start, you're not just ticking a legal box. You're becoming a better designer and creating more inclusive, effective, and professional training experiences for everyone in your audience.