The registration form marks required fields with an SVG icon, but the <svg> has no accessible name: no role="img", no aria-label, and no <title> referenced by aria-labelledby. A screen reader gets nothing that says the field is required (1.1.1).
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
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.
The live-chat status is an inline SVG with role="img" and a <title> of "Icon" referenced by aria-labelledby. That name is a placeholder, not an alternative for what the graphic shows, so a screen reader hears "Icon" instead of learning that an agent is typing (F30).
The delete control is a button that only contains an icon-font glyph (<i class="fa fa-trash">). The glyph conveys "delete" visually, but the button has no accessible name and the glyph is not hidden from assistive technology, so a screen reader may hear nothing useful, or a private-use character, instead of "Delete this filing" (1.1.1; also fails 4.1.2 for a nameless control).
The appointment scheduler draws doctor availability on a bare <canvas> with no accessible name and no fallback content. The chart exists only as pixels, so assistive technology gets nothing that says which days are open (1.1.1).
The settings hub is one old graphic used as an image map. The Privacy region (<area>) has no alt at all, and the Notifications region has alt="link", which says nothing about where it goes. Each clickable region is a link, so each needs its own text alternative naming its destination (1.1.1).
The review form's spam check is a visual-only CAPTCHA: an image of distorted characters with a text field, and no audio (or other) challenge for the same purpose. The image has an instructional alt, but 1.1.1 still requires another CAPTCHA modality so people who cannot see the image can pass the same check.
Emojis used as sole content carriers with no accessible name context (screen reader announces literal Unicode name that misleads).
alt text that is technically present but wrong: describes a different image (stale after CMS swap), or keyword-stuffed for SEO.
Redundant alt duplicating adjacent caption/link text, creating double announcements (fails the "equivalent purpose" intent and creates noise. F-adjacent).
Complex images (charts, diagrams, infographics) with only a short alt and no long description mechanism anywhere.
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.
Capstone audits
Practice spotting real issues (and ignoring correct implementations) in branded product flows.
CityLights (W3C Before & After Demo)
Audit This: CityLights — W3C’s real ‘Before and After Demonstration’ site
6 checks · 4 fails · 2 passes
Start audit →Animal Shelter Demo (codepo8 / Christian Heilmann)
Audit This: A real open-source ‘page with errors’ accessibility teaching demo
7 checks · 5 fails · 2 passes
Start audit →Atomic Accessibility Demo
Audit This: A real published ‘inaccessible web page’ demo, checked against its own accessible twin
4 checks · 4 fails · 0 passes
Start audit →Final exam
Comprehensive assessment
WCAG 2.2 Comprehensive Assessment
110 questions · pass at 80% · scored by WCAG principle with remediation links
Take the final examget in touch
Know where you stand. Know what to work on next.
Tell us what you’re working on and where you need support. Our accessibility specialists can help with audits, remediation, VPAT/ACR, accessible development, and ongoing compliance.
Free 30-minute consultation (opens in new tab)
Free 30-minute call: talk through where you stand, scope a project or get a quote.
Need technical answers now? Book the $100 one-hour consultation to walk through an audit, talk with a developer or review your site live.
Let’s find the barriers before your users do
Indicates a required field.
Your information is kept private and never shared with third parties.