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.7 — Focus Visible

Keyboard focus must always be visible.

AA 0 / 11 Open lesson

Focus Indicator That’s Just a Subtle, Hard-to-See Color Shift

2.4.7 AA

Indicator relies on subtle color change alone effectively invisible (crosses into 1.4.11 for ratio, base "no visible indicator" here).

Focus Style That Only Appears on Hover, Never on Tab Focus

2.4.7 AA

Focus visible on hover-styled state only (:hover styles never mapped to:focus).

Focus Indicator Hidden Behind an Overlapping Sticky Element

2.4.7 AA

Focus indicator hidden behind overlapping elements/sticky bars (visibility defeated — see also 2.4.11).

Keyboard Focus Landing on an Unstyled, Invisible Target

2.4.7 AA

Focus moved to containers with no styling (div tabindex="-1" (code removing it from the Tab order) targets flashing nothing).

Focus-Visible Polyfill Misconfigured to Show Nothing at All

2.4.7 AA

Component libraries with:focus-visible (keyboard-focus styling) polyfill misconfigured so keyboard focus matches mouse and shows nothing.

Focus Indicator That Disappears in Windows High Contrast Mode

2.4.7 AA

Indicator removed on Windows High Contrast / forced-colors mode via outline: none + box-shadow trick (box-shadow stripped by forced colors).

Focus Indicator That’s Only Partially Visible When Clipped

2.4.7 AA

Focus indicator only partially visible — clipped by overflow:hidden (style that clips overflowing content) ancestors or drawn on only one edge of the component.

Module · Operable

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.