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.1.4 — Character Key Shortcuts

Single-key shortcuts (letters, numbers, symbols) must be off-able, remappable, or active only when the control has focus.

A 0 / 7 Open lesson

Shortcut Off-Switch Hidden Behind the Very Barrier It Fixes

2.1.4 A

"Turn off" setting hidden behind the very interaction pattern users can't perform.

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

Page Auto-Redirects on a Timer With No Way to Stop It

2.2.1 A F40

The page uses a timed auto-redirect (meta refresh) — users are moved to another page before they may have finished reading.

Page That Auto-Reloads and Resets the User’s Position

2.2.1 A F41

The page auto-reloads itself on a timer — screen reader and keyboard users lose their place every time it refreshes.

Server Redirect Timeout With No Warning or Way to Extend It

2.2.1 A F58

The server automatically redirects the user to another page after a timeout, with no warning and no way to extend the time.

Session Expiring With No Warning and No Way to Extend It

2.2.1 A

Session expiry with no warning and no extend option (form data lost) — no exception applies.

Session Warning That Gives Users Less Than 20 Seconds to Respond

2.2.1 A

Warning shown but with <20s to respond, or requiring complex re-auth as the "simple action".

Session Extension Allowed Fewer Than the Required 10 Times

2.2.1 A

Extension allowed fewer than 10 times when the extend route is relied on.

Timeout Adjustment Option Set Below the Required 10x Default

2.2.1 A

Adjust option offering less than 10× the default.

Artificial Countdown Timer Used to Create False Urgency

2.2.1 A

Countdown timers on checkout/booking not truly real-time-essential (artificial scarcity timers) with no adjust/extend.

One-Time Passcode That Expires Too Quickly to Use

2.2.1 A

one-time password (OTP)/2FA codes with very short validity and no re-request path within the flow.

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.