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

301 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

Empty Heading Tags Cluttering the Page’s Structure

1.3.1 A

Empty heading elements (h1–h6 with no content) creating phantom entries in the heading structure.

Table Header Cells Left Completely Blank

1.3.1 A

Empty table header cells (header-cell code (th) with no text) leaving columns/rows unnamed for header–cell association.

Data Grid Built From Divs Instead of Real Table Markup

1.3.1 A

Data presented visually as a table (CSS grid / div rows and columns) with no table semantics — never announced as a table.

Table Semantics Wrongly Applied to Non-Tabular Layout Content

1.3.1 A

Table semantics applied to non-tabular content for layout, announcing a false data table.

Plain Text or Buttons Wrongly Wrapped in Heading Tags

1.3.1 A

Plain text, buttons, or links wrapped in heading tags — over-heading that fabricates structure (inverse of F2).

Single Item Wrongly Wrapped in List Markup

1.3.1 A

List markup wrapping non-list content (a lone logo, single paragraph) producing false "list, 1 item" announcements.

List Items Placed Outside Their Parent List Element

1.3.1 A

Malformed list structure: list items (li) outside list code (ul/ol), or lists containing non-li children, breaking item enumeration.

Multiple Data Tables With No Captions to Tell Them Apart

1.3.1 A

Multiple data tables on a page with no caption or accessible name to distinguish them where identification is needed.

Field Instructions Never Linked to the Field They Explain

1.3.1 A

Instruction text displayed near fields (e.g., 'Enter the 6-digit code from your SMS') is not programmatically linked to those fields, so a screen reader user focused on the field never hears the instruction.

List Item Count That Doesn’t Match What’s Actually Announced

1.3.1 A

A list is announced with the wrong item count because wrapper or decorative elements are coded as list items — screen reader users hear '6 items' when there are 3, and can't trust the structure.

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.