learning hub

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

49 scenarios

Continue learning →

Module · Robust

4.1.2 — Name, Role, Value

User interface components must expose an accessible name, role, and current value or state that assistive technologies can determine and update.

A 0 / 33 Open lesson

Control Announcing a State That Contradicts Its Real Behavior

4.1.2 A

A control announces a false state that contradicts its actual behavior. 'read-only' on an interactive combobox, 'collapsed' while visibly expanded, 'disabled' while fully active, so assistive technology users skip or mistrust working controls.

Module · Robust

4.1.3 — Status Messages

Status messages ('Saved', 'Loading', '3 results') must be announced by screen readers without stealing focus.

AA 0 / 16 Open lesson

Live Region Whose Content Loads Before It’s Ready to Announce

4.1.3 AA

Live region present but broken: injected with content simultaneously with creation (missed by assistive technology), aria-live (code that makes screen readers announce updates) on element replaced wholesale, or display:none toggling that suppresses announcement.

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.

Capstone audits

Practice spotting real issues (and ignoring correct implementations) in branded product flows.

Final exam