POUR for Instructional Designers: Applying WCAG 2.2 to Course Design

POUR for Instructional Designers: Applying WCAG 2.2 to Course Design

If you design courses, you make accessibility decisions on every slide, video, quiz, and LMS page, whether you plan to or not. The Web Content Accessibility Guidelines (WCAG) are organized around four principles: content must be Perceivable, Operable, Understandable, and Robust. Together they spell POUR. This post translates each principle into the choices instructional designers make every day.

What WCAG is and why it applies to your courses

WCAG is the international standard for accessible digital content, published by the World Wide Web Consortium (W3C). Version 2.2 was released in October 2023. Each guideline contains testable success criteria rated at three levels: A (minimum), AA (the usual legal and policy target), and AAA (enhanced).

Level AA is the benchmark most organizations are held to. The 2024 update to ADA Title II adopts WCAG 2.1 Level AA for the web content and mobile apps of state and local governments, which includes public schools, colleges, and universities. Designing to WCAG 2.2 AA meets that standard and adds newer protections.

The four principles at a glance

Use these questions as a quick review prompt for any course asset.

• Perceivable: Can every learner take in the content through at least one sense? Example: a lecture video has accurate captions and a transcript.
• Operable: Can every learner navigate and complete each interaction? Example: a drag-and-drop activity can also be completed with the keyboard alone.
• Understandable: Is the content clear and does the course behave predictably? Example: quiz feedback names the error and explains how to fix it.
• Robust: Does it work with the assistive technology learners use? Example: custom buttons in a module announce their name and state to a screen reader.

Perceivable

Information and interface components must be presented in ways learners can perceive. If content exists only as an image, only as sound, or only as color, some learners will miss it.

In your course

• Write alt text that conveys the purpose of each meaningful image, and mark decorative images as decorative so screen readers skip them (1.1.1, A).
• Caption all prerecorded video and provide transcripts for audio-only content such as podcasts (1.2.1 and 1.2.2, A).
• Use real heading styles, list styles, and table headers in your authoring tool instead of bold text or manual spacing (1.3.1, A).
• Keep text contrast at 4.5:1 or higher, or 3:1 for large text (1.4.3, AA). Icons, chart lines, and input borders need 3:1 (1.4.11, AA).
• Never rely on color alone. A quiz that marks answers green and red also needs a text label or icon for correct and incorrect (1.4.1, A).
• Make sure text can be resized to 200% without content being cut off or overlapping (1.4.4, AA).

Operable

Learners must be able to operate every control and navigate the course, whether they use a mouse, a keyboard, a switch device, or voice input.

In your course

• Test every slide and interaction with the keyboard only: Tab, Shift+Tab, Enter, Space, and arrow keys (2.1.1, A).
• Check that the focus order follows the visual order of the slide, and that a visible focus indicator shows where the learner is (2.4.3, A and 2.4.7, AA).
• Avoid timed quizzes and auto-advancing slides, or let learners turn off, adjust, or extend the time limit (2.2.1, A).
• Give slides, pages, and modules descriptive titles, and write link text that names the destination (2.4.2, A and 2.4.4, A).
• Offer a single-pointer alternative to drag-and-drop, such as select-then-place buttons (2.5.7, AA, new in 2.2).
• Make buttons and other click targets at least 24 by 24 CSS pixels, or space them so their target areas do not overlap (2.5.8, AA, new in 2.2).

Understandable

Learners must be able to understand both the content and how the course works. Plain language and consistent navigation reduce cognitive load for everyone.

In your course

• Set the language of each file and module so screen readers use the correct pronunciation (3.1.1, A).
• Keep navigation buttons, menus, and player controls in the same place and with the same labels on every slide (3.2.3 and 3.2.4, AA).
• Put help, such as a contact link or support button, in the same location on every page where it appears (3.2.6, A, new in 2.2).
• Give every form field and quiz input a visible label and clear instructions (3.3.2, A).
• When a learner makes an error, identify it in text and suggest how to correct it (3.3.1, A and 3.3.3, AA).
• Do not ask learners to re-enter information they already provided in the same process; fill it in or let them select it (3.3.7, A, new in 2.2).
• Do not make logins depend on memorizing or transcribing information. Allow password managers and copy-and-paste (3.3.8, AA, new in 2.2).

Robust

Content must work reliably with current and future browsers, LMS platforms, and assistive technologies. Much of this depends on your authoring tool, so test the published output, not only the source file.

In your course

• Make sure custom buttons, tabs, and toggles expose a name, a role, and their current state to assistive technology (4.1.2, A).
• Announce status messages, such as "Answer submitted" or "3 of 10 complete," without moving the learner's focus (4.1.3, AA).
• Test published modules with at least one screen reader, such as NVDA on Windows or VoiceOver on macOS and iOS.
• Choose authoring tools and LMS platforms whose vendors publish an Accessibility Conformance Report (ACR) based on the VPAT.

Authoring-tool tips

Each tool handles accessibility differently. These settings and habits cover the most common gaps. Always check the published output as well as the editor.

Articulate Storyline

• Open the Focus Order panel on every slide and arrange objects to match the visual reading order.
• Add alt text in the Accessibility panel for each object, and turn off "Object is visible to accessibility tools" for decorative shapes.
• Use the built-in text styles so headings and paragraphs are tagged correctly for screen readers.
• Give custom buttons and hotspots descriptive names, and provide a keyboard path for any drag-and-drop interaction.
• Enable closed captions in the player and check the player's color scheme for contrast.

Articulate Rise 360

• Add alt text in each image block, and mark purely decorative images as decorative.
• Use heading, list, and text blocks rather than images of text or styled paragraphs.
• Upload caption files (.vtt) for every video block.
• Test interactive blocks such as sorting, flashcards, and timelines with the keyboard, and offer an alternative for any that fail.
• Check your theme colors against contrast minimums before publishing.

LMS pages (Canvas, Moodle, Blackboard, D2L)

• Use the rich content editor's heading styles, starting at Heading 2 because the page title is the Heading 1.
• Run the built-in accessibility checker on each page, and resolve its flags before publishing.
• Upload accessible versions of attached files: tagged PDFs, and Word and PowerPoint files that pass the Microsoft Accessibility Checker.
• Keep module structure, navigation labels, and the location of help links consistent across the course.

What is new in WCAG 2.2

WCAG 2.2 adds nine success criteria. The six below are at Level A or AA and are the ones most likely to affect your courses. Success criterion 4.1.1 Parsing was removed.

• 2.4.11 Focus Not Obscured (Minimum), AA: Sticky headers, chat widgets, and cookie banners must not fully hide the element that has keyboard focus.
• 2.5.7 Dragging Movements, AA: Drag-and-drop, sliders, and sorting activities need a click or tap alternative.
• 2.5.8 Target Size (Minimum), AA: Clickable targets are at least 24 by 24 CSS pixels or have enough spacing around them.
• 3.2.6 Consistent Help, A: Help and contact options appear in the same relative location across pages.
• 3.3.7 Redundant Entry, A: Registration and multi-step forms reuse information the learner already entered.
• 3.3.8 Accessible Authentication (Minimum), AA: Logins avoid memory or puzzle tests and support password managers and pasting.

Pre-publish checklist

Run through these checks before any course, module, or document goes live.

• Every meaningful image has alt text; decorative images are marked decorative.
• Every video has accurate captions, and audio has a transcript.
• Headings, lists, and tables use built-in styles, with headings in order and no skipped levels.
• Text and meaningful graphics meet contrast minimums, and color is never the only cue.
• The whole course can be completed with a keyboard, with visible focus in a logical order.
• No time limits, or learners can adjust or extend them.
• Links describe their destination, and slides and pages have descriptive titles.
• Forms and quizzes have visible labels, clear instructions, and specific error messages.
• The document or module language is set.
• The published output has been tested with a screen reader and an automated checker.

Common mistakes

• Alt text that repeats the file name or starts with "image of." Describe what the image communicates in context.
• Auto-generated captions published without editing. Review them for accuracy, speaker names, and technical terms.
• Bold text used as headings. Screen reader users cannot navigate by it; apply real heading styles.
• "Click here" and "Learn more" links. Write link text that makes sense on its own.
• Text placed in images or screenshots without the same information in live text.
• Interactions tested only with a mouse. Keyboard and screen reader testing catch most blocking issues.
• Relying on an automated checker alone. Automated tools find only part of the issues; manual review is still required.

Where to learn more

• Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation
• Understanding WCAG 2.2, W3C explanations for each success criterion
• What's New in WCAG 2.2, W3C summary of the added criteria
• WebAIM Contrast Checker
• L'Etoile Education courses on accessible online content
• CourseAccessibility Self-Audit

Get expert feedback on your course

L'Etoile Education provides WCAG audits, remediation, accessible course design, and professional development for K-12, higher education, government, and corporate teams. Dr. Nicole L'Etoile is a CPACC-certified accessibility consultant and learning experience designer.

Book a consultation with Dr. Nicole L'Etoile or email nletoile@letoile-education.com.