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

121 scenarios

Continue learning →

Module · Understandable

3.1.2 — Language of Parts

Passages in another language must be marked with their own lang attribute.

AA 0 / 8 Open lesson

Language Switcher Link With No Language Tag of Its Own

3.1.2 AA

Language-switcher links written in their own language ("Deutsch", "日本語") without their own lang attributes.

Mixed-Language Legal or Product Text Left Entirely Unmarked

3.1.2 AA

Mixed-language product/legal content (e.g., French terms inside English page) unmarked.

Language Attribute Copy-Pasted Onto the Wrong Piece of Text

3.1.2 AA

Wrong part-level lang values inherited from copy-paste.

Bilingual Layout Where One Column’s Language Goes Unmarked

3.1.2 AA

Bilingual side-by-side layouts where one column is unmarked.

User-Generated Content in Another Language Never Tagged

3.1.2 AA

User-generated content areas known to be another language with no lang handling strategy.

Language Attribute Applied to the Wrong Element Entirely

3.1.2 AA

lang applied but to the wrong scope (marks the English wrapper, not the foreign phrase).

Module · Understandable

3.2.1 — On Focus

Merely focusing (tabbing to) an element must not cause big changes — no popups, no navigation, no focus jumps.

A 0 / 9 Open lesson

Element That Loses Focus the Instant It’s Reached

3.2.1 A F55

As soon as an element receives keyboard focus, a script throws focus away (blur) — keyboard users can never actually reach or use it.

Tabbing Into a Field That Opens a Modal Automatically

3.2.1 A

Focusing a field opens a modal/new window automatically.

Tabbing to a Menu Item That Auto-Navigates to Its Page

3.2.1 A

Tabbing to a menu item auto-navigates to its page.

Selecting an Option That Submits the Form Automatically

3.2.1 A

Focus on a select/radio submitting the form.

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.