WCAG 2.2 Accessibility Scenario Learning Hub

A guided course for learning accessibility through realistic, industry-grounded product scenarios. Each scenario carries a unique real-world example, plain-language explanation, and a direct reference to the official WCAG 2.2 Understanding document.

Progress 0 / 690

219 scenarios

Continue learning →

Module · Operable

2.2.1 — Timing Adjustable

Any time limit must be removable, adjustable (10x), or extendable with at least 20 seconds' warning.

A 0 / 13 Open lesson

Time-Limited Status Message That Vanishes Before It Can Be Read

2.2.1 A

Toast/status messages carrying essential info auto-dismissing on a timer with no way to extend/recall.

Auto-Advancing Quiz Timer With No Essential Reason for the Limit

2.2.1 A

Auto-advancing quizzes/steppers with per-question timers not essential to validity.

Kiosk-Style Inactivity Timeout With No Warning or Extension

2.2.1 A

Kiosk-style inactivity resets embedded in web flows without warning/extension.

Re-Login Flow That Also Discards the User’s Entered Data

2.2.1 A

Re-login loops that also discard entered data (compound with 2.2.5 AAA, but base timing fail here).

Module · Operable

2.2.2 — Pause, Stop, Hide

Anything that moves, blinks, or auto-updates for more than 5 seconds needs a pause/stop/hide control.

A 0 / 14 Open lesson

Auto-Scrolling Ticker or Slider With No Pause Button

2.2.2 A F16

Scrolling or moving content (ticker, marquee, slider) runs automatically with no pause/stop/hide button.

Embedded Animation That Blinks for Over 5 Seconds Nonstop

2.2.2 A F7

An embedded object or animation blinks for more than 5 seconds and there is no way to pause or stop it.

Script-Driven Blinking Content With No Way to Stop It

2.2.2 A F50

A script makes content blink continuously and nothing stops it within 5 seconds.

Content That Blinks Past 5 Seconds With No Stop Control

2.2.2 A F112

Content blinks for more than 5 seconds and there is no way to stop it.

Auto-Rotating Carousel Running Past 5 Seconds With No Pause

2.2.2 A

Auto-rotating carousels/hero sliders, >5s total motion, no pause/stop control (or control only on hover).

Autoplaying Background Video With No Way to Pause It

2.2.2 A

Auto-playing background/inline video (muted counts as movement) with no pause.

Glossary

Accessible name: The short name assistive technology uses for a control — often from a label, aria-label, or associated text.
Alt text (text alternative): The written description of an image that screen readers read aloud instead of the image.
ARIA: A set of HTML attributes that explain roles, names, and states to assistive technologies when native HTML is not enough.
Assistive technology (AT): Tools people with disabilities use to operate software: screen readers, magnifiers, voice control, switch devices.
Contrast ratio: A measured difference between text (or a graphic) and what sits behind it; higher ratios are easier to see.
Focus / keyboard focus: The single element currently 'selected' by the keyboard — where Enter/Space/typing will act. Moved with Tab.
Focus indicator: The visible highlight that shows which element currently has keyboard focus.
Focus order / tab order: The sequence elements are reached when pressing Tab repeatedly.
Keyboard trap: A situation where keyboard focus moves into a component and cannot move out using standard keys.
Landmark: A page region such as banner, navigation, main, or contentinfo that screen-reader users can jump between.
Live region / status role: Markup (for example aria-live or role="status") that tells screen readers to announce updates without moving focus.
Programmatically determinable: Available in code so software — not only human eyes — can read the information reliably.
Reading order: The order assistive technology reads content, which follows the DOM sequence rather than pure visual placement.
Screen reader: Software such as NVDA, JAWS, VoiceOver, or TalkBack that speaks or brailles interface content and controls.
Semantic markup: Using HTML elements that match meaning (headings, lists, tables, buttons) instead of generic styled containers alone.
Viewport: The visible browser area. Reflow testing often uses about 320 CSS pixels of width.