A Roadmap to WCAG 2.2 for Instructional Designers

Designing for Everyone: A Step-by-Step WCAG 2.2 Guide for eLearning Accessibility

As instructional designers and e-Learning developers, your job is to make learning meaningful. But how can you make sure your course is also accessible to learners with disabilities? Enter: the Web Content Accessibility Guidelines (WCAG) 2.2. A comprehensive, internationally recognized set of standards developed by the W3C Web Accessibility Initiative (WAI). Let’s break it down into a practical, step-by-step roadmap to help you apply these standards in your design and development work.

Step 1: Understand What WCAG 2.2 Is All About

At its core, WCAG 2.2 is based on four guiding principles: Perceivable, Operable, Understandable, and Robust (POUR). If your learning experience meets these principles, it is accessible to a wide range of users, including those with visual, auditory, motor, and cognitive disabilities.

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” Tim Berners-Lee, Inventor of the World Wide Web

W3C Resource: Introduction to WCAG

Step 2: Audit What You’ve Already Built

Before redesigning or rebuilding, assess your current content:

• Are all videos captioned and did you include a transcript?
• Can a learner navigate using only a keyboard?
• Do you provide text image descriptions for more complex images?
• Are your interactions usable without relying solely on drag-and-drop or color?
  

WebAIM Resource: WebAIM's WCAG 2 Checklist

Step 3: Focus on Key WCAG 2.2 Criteria for Online Learning

While WCAG has many guidelines, here are a few especially relevant to eLearning:

1.1.1 Non-text Content (A)

• What it means: Create alternative text descriptions for all non-decorative images. Use alt="" for purely decorative images.
• Why it matters: Screen reader users rely on alt text to understand visual content.
• W3C Resource: Understanding SC 1.1.1

1.1.1 – 1.2.3 Multimedia Alternatives (A)

• What it means: Provide transcripts and/or closed captions for all multimedia. Include all spoken dialogue, identify speakers, describe important visual elements, and include background sounds that support the message.‍
• Why it matters: Users who are Deaf, hard of hearing, or rely on text need access to the full content and context.
• W3C Resource: Understanding SC 1.2.3

1.4.5 Images of Text (AA)

• What it means: Do not use images of text unless essential.‍
• Why it matters: Images of text don’t resize well, don’t reflow, and aren’t accessible to screen readers.‍
• W3C Resource: Understanding SC 1.4.5

2.2.1 Timing Adjustable (A)

• What it means: Don’t set time limits for activities or assessments unless it’s absolutely necessary for the activity.‍
• Why it matters: Time limits create barriers for users with disabilities who may need more time to complete tasks.
• W3C Resource: Understanding SC 2.2.1

2.4.4 Link Purpose (In Context) (A)

• What it means: Use meaningful, descriptive link text. Avoid vague phrases like “Click here.” For image links, the alt text must convey the link’s purpose (e.g., “Link to FAQ”).
• Why it matters: Clear links improve navigation, especially for screen reader users who may skip from link to link.
• W3C Resource: Understanding SC 2.4.4

Step 4: Design With Accessibility in Mind

Start incorporating accessibility into your storyboarding and content creation:

• Use descriptive headings (H1, H2, H3) to structure content.
• Add meaningful alt text to all non-decorative images.
• Avoid using color alone to convey meaning.
• Ensure high contrast between foreground and background.
• Label all form elements and interactive components clearly.

“Design with accessibility in mind from the beginning—it’s more efficient, more inclusive, and ultimately more effective.” W3C

WebAIM Resource: Color Contrast Checker

Step 5: Test and Iterate

You can't fix what you don’t know is broken. Test early and often:

• Use a screen reader like NVDA (free) or VoiceOver (Mac/iOS).
• Try navigating your course without a mouse.
• Test on various screen sizes and devices.

Even better—include users with disabilities in your testing cycle. Their feedback is invaluable.

Step 6: Bake Accessibility Into Your Workflow

Accessibility shouldn't be an afterthought. Create a sustainable process:

• Include accessibility in your design checklists.
• Train your team on WCAG 2.2 principles.
• Build reusable accessible templates and components.
• Document accessibility decisions for consistency.
  

Resources to Keep You Going

From W3C

• WCAG 2.2 Quick Reference Guide
  
• How People with Disabilities Use the Web
  
• WAI Tutorials
  
  

From WebAIM

• WCAG 2.2 Checklist
• Creating Accessible e-Learning‍
• Screen Reader Survey Results
  

Final Thoughts.

Embracing accessibility isn't just about meeting a standard. It’s about reaching every learner with empathy and intention.

“Accessibility is not a feature. It’s a foundation.” Dr. Sharron Rush, Knowbility

As an instructional designer or learning developer, you have the power to make digital learning experiences more inclusive and ultimately more human. So start small, stay curious, and let WCAG 2.2 be your guide. Need a WCAG audit of your current course or LMS? Want help training your team? Reach out. We’re here to support your journey to accessible learning.