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.5.3 — Label in Name

What a control SAYS on screen must be part of what it's CALLED for assistive tech.

A 0 / 10 Open lesson

Link’s Accessible Name Missing the Words Shown on Screen

2.5.3 A

Link visible text "Pricing" with name "Learn more about our product tiers page" — label text absent from name.

Module · Operable

2.5.4 — Motion Actuation

Shake/tilt/motion features need a normal on-screen control and an off switch.

A 0 / 6 Open lesson

Shake or Tilt Control With No Way to Turn It Off

2.5.4 A F106

A shake/tilt-controlled feature can't be switched off — users with tremors trigger it accidentally, and users who can't move the device can't use it.

Shake-to-Undo Feature With No On-Screen Button Equivalent

2.5.4 A

Shake-to-undo / shake-to-report as the only route to that function, no UI control equivalent.

Tilt-Based Scrolling With No Conventional Control Option

2.5.4 A

Tilt-based scrolling/parallax input without a conventional control.

Onboarding Mini-Game Requiring Device Motion With No Alternative

2.5.4 A

Device-orientation mini-games in onboarding gates with no alternative and no disable.

Motion Input Triggered Accidentally by Hand Tremors

2.5.4 A

Motion input that can be triggered accidentally (tremor) with no setting to turn it off.

Wave-to-Advance Camera Gesture With No Button Alternative

2.5.4 A

Camera-gesture (wave to advance) features lacking button equivalents or disable toggle.

Module · Operable

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.