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.1.1 — Non-text Content

Every meaningful image, icon, chart, or other non-text object needs a text alternative that serves the same purpose, while purely decorative images must be hidden from assistive technology.

A 0 / 34 Open lesson

Product Photo Added as a CSS Background With No Alt Text

1.1.1 A F3

An image that carries real information is added through CSS as a background image, so there is no alt text anywhere — screen reader users never know it exists.

Chart Alt Text That Never Explains What Each Color Means

1.1.1 A F13

The alt text describes the image but leaves out information that is shown only through colors in the image (e.g., which line on the chart is which).

Outdated Alt Text That No Longer Matches the Image

1.1.1 A F20

Content changes on screen but its alt text / accessible name is never updated, so screen readers announce old, wrong information.

Alt Text Left as a Filename Instead of a Real Description

1.1.1 A F30

The 'alt text' is not really a description — it's a filename (IMG_0234.jpg) or filler word like 'image', which tells the user nothing.

Decorative Image Not Hidden From Screen Reader Users

1.1.1 A F38

A purely decorative image is not marked as decorative, so screen readers stop on it and announce something useless.

Decorative Image Given Alt Text Instead of Being Marked Silent

1.1.1 A F39

A decorative image is given alt text like 'spacer' or 'image' instead of empty alt — screen readers announce meaningless words.

Images Published With No Alt Attribute at All

1.1.1 A F65

Images, image-map areas, or image buttons have no alt attribute at all — screen readers read the filename or say just 'image'.

Long Image Description That Skips the Image’s Actual Content

1.1.1 A F67

The long description provided for an image doesn't actually convey the same information as the image itself.

Fancy Unicode Letters Used Instead of Real, Readable Text

1.1.1 A F71

Fancy Unicode 'font' characters are used to imitate styled text — screen readers can't read them as normal words.

ASCII Art With No Text Description for Screen Readers

1.1.1 A F72

ASCII art (pictures drawn with characters) has no text alternative — screen readers read out streams of random punctuation.

Checkpoint gate

Checkpoint 1: Scenarios 1–10

Practice scenarios 1–10 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. Comes up directly in WCAG 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.
Alt text (text alternative): The written description of an image that screen readers read aloud instead of the image. Comes up directly in WCAG 1.1.1 Non-text Content: every meaningful image, icon, chart, or other non-text object needs a text alternative that serves the same purpose, while purely decorative images must be hidden from assistive technology.
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. Comes up directly in WCAG 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.
Contrast ratio: A measured difference between text (or a graphic) and what sits behind it; higher ratios are easier to see. Comes up directly in WCAG 1.4.3 Contrast (Minimum): normal text must meet at least 4.5:1 contrast against its background, and large text must meet at least 3:1.
Focus / keyboard focus: The single element currently 'selected' by the keyboard — where Enter/Space/typing will act. Moved with Tab. Comes up directly in WCAG 2.4.7 Focus Visible: keyboard focus must always be visible.
Focus indicator: The visible highlight that shows which element currently has keyboard focus. Comes up directly in WCAG 2.4.7 Focus Visible: keyboard focus must always be visible.
Focus order / tab order: The sequence elements are reached when pressing Tab repeatedly. Comes up directly in WCAG 1.3.2 Meaningful Sequence: the reading order in the code must match the order that makes sense visually.
Keyboard trap: A situation where keyboard focus moves into a component and cannot move out using standard keys. Comes up directly in WCAG 2.1.2 No Keyboard Trap: keyboard focus must never get stuck anywhere on the page.
Landmark: A page region such as banner, navigation, main, or contentinfo that screen-reader users can jump between. Comes up directly in WCAG 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.
Live region / status role: Markup (for example aria-live or role="status") that tells screen readers to announce updates without moving focus. Comes up directly in WCAG 4.1.3 Status Messages: status messages ('Saved', 'Loading', '3 results') must be announced by screen readers without stealing 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. Comes up directly in WCAG 1.3.2 Meaningful Sequence: the reading order in the code must match the order that makes sense visually.
Screen reader: Software such as NVDA, JAWS, VoiceOver, or TalkBack that speaks or brailles interface content and controls. Comes up directly in WCAG 1.1.1 Non-text Content: every meaningful image, icon, chart, or other non-text object needs a text alternative that serves the same purpose, while purely decorative images must be hidden from assistive technology.
Semantic markup: Using HTML elements that match meaning (headings, lists, tables, buttons) instead of generic styled containers alone. Comes up directly in WCAG 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.
Viewport: The visible browser area. Reflow testing often uses about 320 CSS pixels of width. Comes up directly in WCAG 1.4.10 Reflow: at 320px width (400% zoom on desktop) content must reflow into one column with no horizontal scrolling and nothing missing.