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

690 scenarios

Continue learning →

Module · Understandable

3.3.7 — Redundant Entry

Don't make users re-enter information they already gave in the same process.

A 0 / 9 Open lesson

Unnecessary ‘Confirm Email’ Field Duplicated Without Real Need

3.3.7 A

"Confirm email" style duplicates *are allowed as exception only when essential* — using them for ordinary fields (confirm address, confirm name) fails.

Module · Understandable

3.3.8 — Accessible Authentication (Minimum)

Logging in must not require memorizing/transcribing (no blocked paste, no puzzles) — password managers and copy-paste must work.

AA 0 / 10 Open lesson

Password Field That Blocks Pasting or Splits the Code Up

3.3.8 AA F109

The password or code field blocks pasting (or splits the code into boxes that break paste) — users are forced to memorize and retype, which is exactly what this rule forbids.

Password Field Scripted to Block Paste Entirely

3.3.8 AA

Password fields with onpaste="return false" or JS paste blocking — memorization/transcription cognitive test with no alternative.

Password Manager Autofill Blocked by the Login Form

3.3.8 AA

Blocking password managers (autocomplete off, fake fields, dynamic name randomization) with no other non-cognitive method.

Visual CAPTCHA Required With No Non-Visual Alternative

3.3.8 AA

Visual CAPTCHAs (distorted text) required with no object-recognition-exempt alternative or non-cognitive alternative path.

Puzzle CAPTCHA Gating Login With No Alternative Method

3.3.8 AA

Puzzle CAPTCHAs (rotate image, slide to fit, math problems) gating login with no alternative.

One-Time Code Split Into Boxes That Reject a Pasted Code

3.3.8 AA

one-time password (OTP) split into 6 single-character inputs that reject paste of the full code.

Displayed Code Required to Be Retyped With Copying Disabled

3.3.8 AA

Requiring transcription of codes displayed in-page (type the characters you see) without copy support.

Security Question Requiring an Exact Memorized Answer

3.3.8 AA

Security questions demanding recalled exact strings as the only second factor with no alternative (memorization test).

Login PIN Entered Only via a Randomized On-Screen Keypad

3.3.8 AA

Log-in flows requiring memorized PIN entry on a randomized on-screen keypad (blocks assistive entry) with no alternative method.

Checkpoint gate

Checkpoint 64: Scenarios 631–640

Practice scenarios 631–640 before continuing

Take checkpoint

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.