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

690 scenarios

Continue learning →

Module · Perceivable

1.3.1 — Info and Relationships

Structure you can SEE (headings, lists, tables, labels, groups, required marks) must also exist in the code so screen readers perceive the same structure.

A 0 / 49 Open lesson

Tabular Data Placed Inside a Preformatted Text Block

1.3.1 A F48

Tabular data is shown inside a <pre> block (fixed-width text) instead of a real table — no headers or cell navigation for screen readers.

Table Cells Linked to the Wrong Header Cells

1.3.1 A F90

Table cells point to the wrong header cells (broken headers/id links (code linking data cells to their headers) wiring) — screen readers read incorrect column/row names for the data.

Table Header Cells Never Marked Up as Real Headers

1.3.1 A F91

Data table header cells are not marked up as headers — screen readers can't tell users which column/row a value belongs to.

Presentation Role Wrongly Applied to a Real Table or List

1.3.1 A F92

role="presentation" (code that strips an element's meaning) is put on real content (an actual table or list), stripping its structure — screen readers lose the table/list entirely.

Visible Label Text With No Matching Accessible Name

1.3.1 A F111

A control shows label text on screen but has no accessible name at all — screen readers announce nothing useful and voice control can't target it.

Duplicate Element IDs Breaking Form Label Connections

1.3.1 A F17 (legacy)

Two elements share the same id, so a label points at the wrong field (or none) — screen readers announce the wrong name. (Old WCAG 2.0 failure — still fails this rule when it breaks label associations.).

Bulleted List Built From Divs Instead of Real List Markup

1.3.1 A

Visual lists marked up as <div>/<br> sequences instead of list code (list code (ul/ol)/dl).

Heading Levels Skipped or Chosen Only for Font Size

1.3.1 A

Heading levels skipped or chosen for styling (h1→h4), or multiple unrelated h1s obscuring structure.

Form Fields With No Programmatic Label of Any Kind

1.3.1 A

Form inputs with no programmatic label (label, aria-label, aria-labelledby (code pointing to the element that names it), title) — placeholder used as the only label.

Form Label Not Correctly Linked to Its Input Field

1.3.1 A

label present but for/id pairing (code tying a label to its field) mismatch or duplicate ids breaking the association.

Checkpoint gate

Checkpoint 10: Scenarios 91–100

Practice scenarios 91–100 before continuing

Take checkpoint

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.