Designing for Access: How WCAG and UDL Work Together

WCAG and UDL: A Shared Foundation for Access

Accessibility is a design responsibility. And when we skip it? We aren’t just risking legal trouble. We’re leaving people behind.

This is why strongest designs are grounded in a shared framework. The Web Content Accessibility Guidelines (WCAG) and Universal Design for Learning (UDL) aren’t separate checklists. They’re complementary frameworks that, when combined early in the design process, help us build learning environments that are both compliant and inclusive.

While WCAG and UDL come from different origins (technical standards vs. educational philosophy), they converge in purpose: removing barriers and supporting diverse learners.

Gronseth (2018) argues that learner variability is the norm, not the exception. Both frameworks aim to address this diversity:

• WCAG focuses on technical accessibility: ensuring content is perceivable, operable, understandable, and robust (POUR) for people with disabilities.
• UDL targets instructional flexibility: designing experiences that offer multiple means of engagement, representation, and expression for all learners.

The overlap is clear:

• WCAG’s “Perceivable” aligns with UDL’s “Multiple Means of Representation.”
• WCAG’s “Operable” maps to UDL’s “Multiple Means of Action and Expression.”
• WCAG’s “Understandable” and “Robust” intersect with UDL’s goals of empowering learners to manage their learning and access content through various modalities.

Access Is a Design Responsibility

Integration of these two frameworks is often underutilized. Many treat WCAG as a compliance checklist and UDL as a pedagogy toolbox, when in fact, combining them leads to proactive, inclusive design.

• Shift thinking from “accommodation” to design for all.
• Bridge gaps between technical and pedagogical teams.
• Provide practical strategies that elevate both access and learning outcomes.

As instructional designers, we don’t just shape learning objectives, we shape who gets to participate. Designing for the "average" learner doesn’t serve today’s diverse learners. It creates misalignment and exclusion.

“The conception of an average learner rarely characterizes the complex make-up of varying combinations of characteristics in any learners.” (Gronseth, 2018)

If we want to reach all learners, across sensory, cognitive, physical, linguistic, and emotional differences, we have to stop designing for the middle.

Why “Fixing It Later” Fails

Accessibility issues are designed in from the start, through the templates we use, the tools we choose, and the assumptions we make. Too often, accessibility is treated as a bolt-on. But it’s far more effective (and less expensive) to build it in from the beginning.

That’s where the WCAG and UDL connection becomes powerful. When we apply both frameworks upfront, we reduce barriers, support learner variability, and create experiences that actually work.

WCAG + UDL in Practice

Let’s look at how the POUR principles align with UDL and what that means for real-world design. WCAG ensures access; UDL ensures engagement and growth. Together, they offer a full blueprint for inclusive digital learning.

Perceivable → Multiple Means of Representation

Can learners access your materials if they can’t see, hear, or process standard text?

• WCAG says: provide alt text, captions, meaningful color contrast, and avoid relying on color alone.
  
• UDL says: offer multiple ways to present content; visual, auditory, and tactile.
  

“Quality captions benefit not just students with hearing impairments but also language learners and those in noisy environments.” (Gronseth, 2018).

Operable → Multiple Means of Action and Navigation

Not all learners use a mouse. Some navigate by keyboard, voice, or switch devices.

• WCAG says: ensure full keyboard access, avoid hover-only triggers, and support alternatives to dragging.
  
• UDL says: give learners flexible ways to interact with content.
  

“Consistent navigation and page structure enable learners to self-manage and self-regulate.” (Gronseth, 2018)

Understandable → Clear Instructions, Predictable Layouts

Confusing instructions or scattered design create barriers for everyone.

• WCAG says: use plain language, avoid jargon, and keep layouts predictable.
  
• UDL says: reduce cognitive load and support executive functioning.
  

If your learners are spending energy figuring out how to engage, they won’t have much left for what you’re teaching.

Robust → Compatibility with Assistive Tech, Now and Later

If your content doesn't work with a screen reader or on a mobile device, it’s not robust.

• WCAG says: use proper semantic HTML (like heading tags and landmarks), and ensure your code follows standards that assistive technologies can interpret correctly.
• UDL says: provide multiple ways for users to engage with and express information; using tools, technologies, and formats that support varied needs and preferences.
  

Gronseth recommends testing your content with a screen reader or mobile device, as it reveals gaps fast.

Where to Start: Three High-Impact Moves

Gronseth (2018) outlines three practical places to start that pay off quickly:

• Consistent navigation: Use clear page structure, heading styles, and meaningful links.
  
• Flexible content formats: Provide videos and transcripts, visuals and descriptions. Always offer a second way in.
  
• Varied ways to show learning: Let learners demonstrate mastery through videos, voice memos, infographics, or other formats that align with their strengths.
  

WCAG 2.2: What Designers Can’t Ignore

Recent updates to WCAG  include criteria that impact everyday learning design:

• 2.4.11 Focus Not Obscured (Level AA): Tabbing through content? The element in focus must stay visible, not hidden behind sticky headers or popups.
  
  
• 2.4.3 Focus Order (Level A): Keyboard focus should follow a logical, top-to-bottom, left-to-right flow.
  
  
• 2.5.7 Dragging Movements (Level AA): Drag-and-drop tasks need alternatives like dropdowns, buttons, or keyboard-compatible options.
  
  
• 2.5.8 Target Size (Level AA): Clickable elements must be at least 24x24 pixels or spaced to avoid misclicks.

These aren't "technical problems." They’re learner experience problems.

Inclusion Is a Design Choice

Designing with WCAG and UDL is about choosing to create learning that reaches more people, in more contexts, with fewer barriers.

Join me in July for the next cohort of Making Online Content Accessible for All
This hands-on, project-based course helps you audit content, apply WCAG 2.2, and build inclusive experiences. We don’t just talk about accessibility, we practice it.

👉 Reserve your seat. Next cohort starts the week of July 14. Sessions are recorded. Spots are limited.

References: 

• Gronseth, S. (2018). Inclusive Design for Online and Blended Courses: Connecting Web Content Accessibility Guidelines and Universal Design for Learning. Educational (Re)naissance, 7(1), 14–22.
  ‍
• WCAG (Web Content Accessibility Guidelines) offers the technical standards through the POUR principles.
  ‍
• UDL (Universal Design for Learning) offers the instructional design framework through its three principles: Engagement, Representation, and Action & Expression. 

‍