Sagar Gadaily
Back to Blog
Instructional DesignOctober 3, 20264 min read

Accessible eLearning: A WCAG 2.2 Checklist for Course Designers

Accessibility isn't a final QA pass. It's a set of design decisions you make from the storyboard onward. Here is the WCAG 2.2 checklist I use for eLearning, written for designers rather than developers.

Accessible eLearning: A WCAG 2.2 Checklist for Course Designers

Accessible eLearning is training that people with disabilities can perceive, operate and understand, including people who use screen readers, keyboards instead of a mouse, captions, magnification or extra time. The most widely used benchmark is the W3C's Web Content Accessibility Guidelines (WCAG). The current version, WCAG 2.2, became a W3C Recommendation in October 2023, and Level AA is the usual target.

Accessibility also has a legal edge. In the US, Section 508 applies to federal agencies and their content. In the EU, the European Accessibility Act began applying to many digital products and services in June 2025. But the better reason is practical: accessible design is clearer design for everyone.

💡
Key takeaways: Plan accessibility in the storyboard, not at the end. Every interaction must work with a keyboard alone. Provide captions and transcripts for all audio and video. Don't use color as the only signal. Test with an actual screen reader before launch.

Why designers own this, not just developers

Many accessibility failures are baked in at the design stage: a drag-and-drop activity with no keyboard alternative, a "click the red items" instruction, a video with critical information only in the visuals. By the time a developer sees these, fixing them means redesign. That's why I keep this checklist next to the storyboard template.

The checklist

Perceivable

  • Alt text for every meaningful image, describing its purpose in context. Decorative images get empty alt text so screen readers skip them.
  • Captions for every video with audio, and transcripts for audio-only content.
  • Audio description or a described transcript when visuals carry information the narration doesn't mention.
  • Color contrast of at least 4.5:1 for body text and 3:1 for large text and key interface elements.
  • No color-only signals. Pair color with icons, text or patterns ("correct ✓" not just green).

Operable

  • Keyboard access for every button, link, menu, quiz option and interaction, in a logical tab order.
  • Visible focus indicators, and WCAG 2.2's newer criterion that focused items aren't hidden behind sticky headers or overlays.
  • Alternatives to dragging. WCAG 2.2 added a criterion requiring a single-pointer alternative for drag movements. A drag-and-drop sort needs a click or keyboard method too.
  • Adequate target size. WCAG 2.2 sets a minimum target size of 24×24 CSS pixels for Level AA, with some exceptions.
  • Time controls. If a quiz or activity is timed, learners can turn off, adjust or extend the limit.
  • No flashing content above three flashes per second.
Close-up of keyboard keys, a reminder that every eLearning interaction must work without a mouse. Photo: Sam Albury / Unsplash
Close-up of keyboard keys, a reminder that every eLearning interaction must work without a mouse. Photo: Sam Albury / Unsplash

Understandable

  • Plain language and consistent navigation from screen to screen.
  • Clear instructions that don't depend on shape, position or color ("select Next" rather than "click the round button on the right").
  • Helpful error messages in quizzes and forms that explain what to fix.
  • No redundant entry. WCAG 2.2 asks that information already entered in a process is auto-filled or selectable rather than retyped.

Robust

  • Proper semantics: real headings, lists and buttons rather than styled text boxes.
  • Tested output: authoring tools vary; check the published course, not the editor preview.

How I test before launch

  1. Unplug the mouse and complete the whole course using only the keyboard.
  2. Run through it with a screen reader (NVDA on Windows or VoiceOver on Mac).
  3. Check contrast with a contrast checker on every color pair in the theme.
  4. Watch every video with sound off and captions on.
  5. Zoom the browser to 200% and confirm nothing is cut off or overlaps.

These five checks take an afternoon and catch most issues automated scanners miss.

Design patterns that make it easier

  • Prefer scenario choices with standard buttons over custom drag-and-drop activities.
  • Put critical information in text and narration, not only in an image or animation.
  • Build one accessible template and reuse it across courses so you solve problems once.
  • Design with Universal Design for Learning in mind: multiple ways to engage, represent and express learning.

Sources

All Posts