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 · Perceivable

1.3.2 — Meaningful Sequence

The reading order in the code must match the order that makes sense visually.

A 0 / 20 Open lesson

Modal Dialog Placed at the End of the Page Code

1.3.2 A

Modal/dialog markup at end of page code (DOM) with no focus management, read after unrelated content (interacts with 2.4.3).

Mixed-Direction Text That Scrambles the Reading Order

1.3.2 A

RTL/LTR mixed text without direction handling, scrambling readable order.

Reading-Order Override That Contradicts the Actual Content Flow

1.3.2 A

aria-flowto/reading-order overrides that contradict comprehension.

Form Instructions Placed After the Fields They’re Meant to Explain

1.3.2 A

Multi-step forms where visually-first instructions come after the fields in page code (DOM).

Print or PDF Export That Produces a Scrambled Reading Order

1.3.2 A

Newspaper-style print stylesheets/PDF export producing wrong linear order.

Lazy-Loaded Content Injected Out of Its Visual Order

1.3.2 A

Infinite-scroll/lazy sections injected out of order relative to visual placement.

Tab Order Used as a Stand-In for the Real Reading Sequence

1.3.2 A

Tab order used as a proxy: sequence conveyed only by tabindex (keyboard-focus setting) while page code (DOM)/reading order contradicts it.

Heading or Sentence Split Into Disconnected Announced Fragments

1.3.2 A

A single logical text unit (heading, sentence) split across sibling elements/spans so screen readers announce it in fragments.

Separate Content Items Announced as One Run-On Block

1.3.2 A

Distinct content items run together into one announcement because structural separation is missing.

Hidden or Off-Screen Content Left in the Reading Order

1.3.2 A

Visually hidden or off-screen content (inactive carousel slides, skeleton states, stale views) left in the reading order, so the announced sequence diverges from the visible one.

Checkpoint gate

Checkpoint 15: Scenarios 141–150

Practice scenarios 141–150 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.