Stop Rebuilding Courses: WCAG Guidelines and Section 508 Compliance Fixes for Accessible E-Learning

When accessibility gaps get caught at the end of course development, it’s rarely a quick patch. It’s a rebuild.

Picture this: a course is finished. It looks sharp, the content is solid, and everyone involved is relieved to be done. Then it goes through an accessibility review—internal, client-side, or both—and what comes back isn’t a list of tweaks. It’s a list of structural problems. Color contrast fails throughout. Keyboard navigation breaks at the third interaction. Screen reader users hit a dead end in the middle of a scenario. Now the team that thought they were finished is essentially starting over.

This is where WCAG guidelines come in—not as the thing that caused the problems, but as the thing that would have prevented them. These standards exist to define what accessible digital content looks like. When teams work from WCAG guidelines, they build accessible e-learning courses that work for everyone from the start.

What We’re Actually Talking About: WCAG Guidelines and Section 508

WCAG stands for Web Content Accessibility Guidelines. They’re developed and maintained by the World Wide Web Consortium (W3C), and they’re the clearest, most comprehensive framework for making digital content accessible to people with a wide range of disabilities—visual, auditory, motor, cognitive.

Artisan Learning develops to WCAG 2.1 and WCAG 2.2 by default. Those aren’t the same version, and the difference matters. WCAG 2.1 added criteria that address mobile accessibility and cognitive load. WCAG 2.2 extended that work, with additional criteria around focus visibility and accessible authentication. Both versions are organized around four principles: content must be perceivable, operable, understandable, and robust—and every success criterion in the standard connects back to one of those four. For primary source information, start with the W3C’s documentation

Content Must Be:

Perceivable

Operable

Understandable

Robust

Section 508 is a federal law requiring U.S. federal agencies and organizations receiving federal funding to make their electronic and information technology accessible. When Section 508 guidelines were refreshed in 2018, they adopted WCAG 2.1 Level AA as their technical standard. That’s why private-sector L&D teams encounter Section 508 requirements even without having a federal contract. If their client does, or their client’s client does, Section 508 is on the table.

One distinction worth knowing: WCAG and the ADA are related but not interchangeable. The ADA has been applied to digital accessibility in legal contexts, but it doesn’t specify a technical standard the way WCAG does. When a compliance requirement names a specific standard, WCAG is almost always the one it means.

WCAG compliance is not something you layer on at the end. It’s something you design from the start.

Why Courses End Up Back on the Table

The rebuild problem is not usually a knowledge issue. We certainly hope that most L&D teams know, at some level, that accessibility matters. The problem is more of a timing issue.

When accessibility gets treated as a final-phase review item—something to check before launch—critical “fixes” are often challenging for workflow, schedules, and budgets. By the time a course is in QA, the visual design is done, the interactions are built, and the content is locked. An accessibility failure at that stage isn’t a flag on a planning document. It’s a structural change to work that’s already finished. Color contrast issues that look like a small fix cascade across every slide that uses that palette. A broken focus order means reworking the logic of an entire interaction sequence, not adjusting one element. Interactions that require mouse dexterity have to be redesigned. 

The process creates the cost. Accessibility decisions made in the middle of a build—or after it—are always harder and more expensive than decisions made at the beginning. This is true regardless of how a course was built or what tools were used to build it. WCAG compliance is not something you layer on at the end. It’s something you design from the start.

(If your team is weighing what’s worth remediating versus rebuilding or replacing, Artisan Learning’s resource on managing your learning library is a useful place to work through that question: Clean Up Your Learning Library).

A man sitting at a desk typing, leaned in to better see the computer screen.

How to Build Accessible E-Learning From the Start

It’s a shift in both mindset and strategy—from treating accessibility as a checklist to treating it as a set of build conditions.

blue keyboard icon Keyboard navigation and focus order

Every learner interaction in a course needs to be reachable and operable without a mouse. That means keyboard navigation has to be planned, not assumed. This actually starts in storyboarding, where engagements are conceived. Then in development, the focus order—the sequence in which keyboard focus moves through interactive elements—needs to follow the visual and logical flow of the content. When the interaction and the sequence are designed intentionally, screen reader users and keyboard-only users move through the course the same way sighted mouse users do. When it’s left to default behavior or added as an afterthought, it breaks.

Here’s a better approach: During a build, confirm each of the following for every interactive element:

  • The element is reachable by keyboard.
  • Focus moves in a logical sequence—top to bottom, left to right, in the order a learner would engage with the content.
  • Focus is always visible. Learners should be able to see where they are at any point.
  • No element traps focus. Learners should always be able to move forward or exit.

Note: “every interactive element” means buttons, links, interactive zones, form fields, and navigation controls—anything a learner is expected to engage with.

orange palette icon Color and visual design

Color contrast isn’t a design preference. WCAG guidelines specify minimum contrast ratios between text and its background: 4.5:1 for standard text, 3:1 for large text. Those ratios exist because text that doesn’t meet them is genuinely difficult to read for a significant portion of learners—including people with low vision and people viewing courses in less-than-ideal lighting conditions. Happily, many platforms now include contrast check functionality. The best approach is to use a contrast checker such as Adobe Color Contrast Analyzer or the WebAIM Contrast Checker

Many people get the importance of color contrast, but don’t realize another critical design requirement. Color cannot be the only indicator of meaning. If a button turning green means “correct” and red means “incorrect,” a learner who can’t distinguish those colors loses access to the feedback entirely. The design fix is pairing color with a second indicator—a label, an icon, a pattern or shape—so the meaning is never solely color-dependent.

And remember always to use properly-spaced simple and legible fonts. Sans-serif fonts like Verdana, Tahoma, Arial, Helvetica, and Calibri are best for screen readability

ABC in pink Alt text as a build decision

Alt text is not a description field to fill in just before launch. It’s a content decision that belongs in the design phase, and the right call depends entirely on the image’s purpose in the course.

Images that are purely decorative—visual texture with no informational value—should be identified as decorative in the content structure so screen readers skip them. Images as labels, such as icons, buttons, interface elements, need alt text that describes the function, not the appearance. Informational images like diagrams, charts, scenarios, or anything conveying meaning, need alt text that describes the takeaway, not the pixels.

That last point is worth sitting with. “A bar chart showing quarterly sales data” is a description of an image. “Sales increased 40% in Q3, driven by the Southeast region” is the information the chart is meant to communicate. Only one of those fully serves a learner who can’t see the image.

green form icon Form labels, instructions, and error messages

Accessible forms don’t happen by accident. Every field needs a label that’s structurally associated with it, not just positioned near it visually. Instructions need to appear before the interaction, not after. Error messages need to tell learners what went wrong and what to do about it, in plain language, in a way that doesn’t rely on color or position alone.

Stop and Think!

Before any course section moves to review, these six questions are worth a deliberate pass—not as a formal gate, but as a thinking check:

  1. Does every interactive element have a visible, associated label?
  2. Is focus order logical and complete?
  3. Are fonts simple and is there sufficient color contrast?
  4. Does the design have indicators other than color changes?
  5. Does every meaningful image communicate the takeaway, not just the content?
  6. Are all forms designed for full accessibility?

These aren’t last-minute concerns. They’re just some of the design conditions in play from the very start of the course inspiration.

Instructional design decisions made early in a project—how content is sequenced, how interactions are structured, what a learner is being asked to do—directly affect how accessible the course can be when it’s built. Artisan Learning’s resource on instructional design covers that upstream relationship in more depth: What Is Instructional Design.

The Gaps That Trigger Remediation

When courses come back for accessibility remediation, it’s rarely one issue. It’s a pattern of issues, and most of them trace back to decisions that were made without accessibility as a build condition.

A few of the most common remediation triggers:

Contrast and visual state failures

A color palette gets chosen for aesthetics. Nobody checks contrast ratios until QA or until a client audit. Then it’s not one fix. It’s every background-text combination across every slide, every button state, every visual indicator across every interaction. Button and selection states are a frequent blind spot: a button that reads as “pressed” only through a color shift fails contrast requirements and fails learners who rely on high contrast or who can’t distinguish colors.

Keyboard traps

A modal opens. Focus moves into it. There’s no way to exit without a mouse. For a keyboard-only user or a screen reader user, that’s not an inconvenience—it’s a complete stop. Fixing a keyboard trap after the fact means reworking the interaction’s behavior at a structural level. Building it correctly means thinking about entry and exit at the moment the interaction is designed.

Alt text at scale

A course launches with placeholder alt text, generic descriptions, or no alt text at all. The remediation request comes back: every image needs purposeful, context-aware alt text. Depending on the course, that can mean reviewing hundreds of images and writing purposeful descriptions for each one—work that would have taken a fraction of the time if it had been part of the development process from the start.

When accessibility requirements are treated as design inputs rather than audit criteria, the course that goes into review is structurally sound.

Accessibility Is a Build Decision, Not a Finish Line

Pattern those gaps long enough and a clear picture forms: none of them are mysteries. They’re the predictable result of thinking of accessibility as something that happens after the course is completed rather than as it’s being written and while it’s being built.

Fix accessibility issues early (or better yet, avoid them altogether!), and QA stays QA—not a redesign phase.

This is not an aspirational standard. It’s a description of what good development practice actually produces. When WCAG guidelines and Section 508 requirements are treated as design inputs rather than audit criteria, the course that goes into review is structurally sound. The feedback that comes back is about refinement, not reconstruction.

There’s a term for this kind of design: learner-proof. Not in the sense that nothing can go wrong, but in the sense that the design has already accounted for the full range of how learners will interact with the content—with a keyboard, with a screen reader, with low vision, with a mobile device. WCAG 2.1 and WCAG 2.2 define what that range looks like. Building to them isn’t the finish line. It’s the baseline.

Ready to Stop Rebuilding?

From storyboarding to build out, Artisan Learning develops to WCAG 2.1 and WCAG 2.2 by default. It’s not a compliance gesture; it’s because accessible design is better design. When accessibility is baked into the process from the start, projects are more efficient and cost effective, but more importantly, courses work for ALL learners.

If your team is navigating accessibility remediation, preparing for a compliance review, or looking to build accessibility into your development process before the next e-learning project launches, Artisan Learning is a good place to have that conversation.


Author
Mandy Boult headshot

Mandy Boult is an Accessibility and QA Specialist at Artisan Learning, where she tests custom e-learning courses for WCAG 2.1 and WCAG 2.2 compliance. She has a particular focus on screen reader behavior, keyboard navigation, and the kind of accessibility issues that only show up when someone actually tries to use the course. Before school drop-off, she can usually be found in high-stakes breakfast negotiations with her autistic, non-verbal nephew, who may not use words, but is crystal clear about what counts as an acceptable morning meal.

Share resource

LET'S BUILD
SOMETHING SPECIAL