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.3 — Focus Order

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

A 0 / 21 Open lesson

Expanded Content That Never Receives Keyboard Focus

2.4.3 A

Focus not moved to revealed content (accordion/inline edit) when operation depends on sequence.

Hidden Navigation Items That Are Still Reachable by Tab

2.4.3 A

Off-screen/hidden nav items remain tabbable (focus disappears into invisible regions).

Looping Carousel Clones Creating Duplicate Tab Stops

2.4.3 A

Carousel clones (looping sliders) duplicating tab stops in nonsensical sequence.

Multi-Column Form With an Illogical Keyboard Tab Order

2.4.3 A

Multi-column forms tabbing across rows instead of down logical groups where order affects meaning (e.g., paired label/value entry).

Skip Link Injected at a Point That Breaks the Tab Order

2.4.3 A

Skip-to content injected at odd points making subsequent order contradictory.

Focus Jumping to the Page Top on Every Route Change

2.4.3 A

Focus jumping to top on every single-page app route change mid-task, or to arbitrary widgets on load.

Toolbar With a Broken Roving Tabindex Pattern

2.4.3 A

Toolbars where roving tabindex (a toolbar keyboard pattern) is broken, scattering stops.

Sticky Element Receiving Focus at the Wrong Point in the Flow

2.4.3 A

Sticky elements receiving focus at wrong point relative to reading flow when operation depends on it.

Background Page Still Tabbable Behind an Open Modal

2.4.3 A

Background page remains tabbable behind an open modal/overlay — focus not contained while the dialog blocks the view.

One Control Creating Two Separate Keyboard Tab Stops

2.4.3 A

One control generating multiple consecutive tab stops (anchor wrapping a button, duplicated tabindex (keyboard-focus setting)) so focus lands twice on the same element.

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.