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.4.2 — Page Titled

Every page needs a title that says what the page is.

A 0 / 10 Open lesson

Page Title That Doesn’t Reflect the Current Step or State

2.4.2 A

Search/results/step pages not reflecting state ("Checkout" on all 5 steps).

Page Title Where the Distinguishing Word Gets Cut Off

2.4.2 A

Keyword-stuffed or truncated-first titles where the distinguishing part is unfindable (topic effectively absent at announce time).

Error or 404 Page Titled Like an Ordinary Page

2.4.2 A

Error/404 pages titled like normal pages.

PDF Published With No Document Title Set

2.4.2 A

PDFs without a Title entry (or showing filename) when served as web pages.

Embedded Document or Frame Used as a Page With No Title

2.4.2 A

Iframes aside: framesets/embedded documents relied on as pages lacking titles.

Module · Operable

2.4.3 — Focus Order

Keyboard focus must move through the page in an order that makes sense.

A 0 / 21 Open lesson

Tab Order That Jumps Around the Page Illogically

2.4.3 A F44

tabindex (keyboard-focus setting) values force a tab order that jumps around illogically, so keyboard users move through the page in a confusing sequence.

Dialog That Opens Far From the Button That Triggered It

2.4.3 A F85

A dialog or menu opens far away in the tab order from the button that opened it — keyboard users tab onward and never find it.

Visual Layout Order That Doesn’t Match the Keyboard Tab Order

2.4.3 A

Visual layout (CSS order/grid) diverges from page code (DOM) so Tab jumps around the page illogically.

Modal That Opens Without Moving Keyboard Focus Into It

2.4.3 A

Opening a modal without moving focus into it. Tab continues through background page.

Modal That Closes Without Returning Focus to Its Trigger

2.4.3 A

Closing a modal without returning focus to the trigger (focus dumped to body/top).

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.