The standard

Guidelines, alive

These aren't definitions of accessibility — they're the standard, running. The criteria are arranged along WCAG's timeline, so you can watch the standard grow as the web changed. Each card is a real working piece of this foundation; flip break this rule to switch the compliant behavior off and feel what the criterion actually prevents. Eleven criteria are demoed here — a deliberate sample of recent ones this foundation itself implements, not the full standard; the complete set lives in W3C's quick reference. Accessibility isn't a feature added on top; it's the baseline these guidelines keep formalizing — and they keep POUR at the core: Perceivable, Operable, Understandable, Robust.

1. WCAG 2.0 2008

   The bedrock — the four POUR principles everything since still rests on.

   2.4.1 Bypass Blocks

   • Operable
   • Level A
   • WCAG 2.0

   A mechanism exists to skip blocks of content repeated across pages — the classic skip link. A WCAG 2.0 (2008) original at level A: without it, keyboard and switch users pay a tab stop for every navigation link on every single page.

   Focus the demo — 2.4.1 Bypass Blocks

   Tab into this mock page. Compliant, the very first tab stop is a skip link — one Enter and you're past the whole navigation block. Broken, the skip link is gone: count the tab stops to reach the content, then imagine paying them on every page of a site.

   Skip to content

   Main content

   The skip link lands you here — focus and all. Carry on reading

   Break this rule

   Meets 2.4.1 — the first tab stop is a skip link; one keystroke bypasses the whole navigation block. This site’s own header works the same way.

   • WCAG: Understanding 2.4.1 (opens in a new tab)

2. WCAG 2.1 2018

   The mobile and low-vision era — small screens and heavy magnification forced the standard to grow.

   1.4.10 Reflow

   • Perceivable
   • Level AA
   • WCAG 2.1

   Content reflows into a single column at 320 CSS pixels (≈400% zoom on a 1280px screen) with no loss of information and no two-dimensional scrolling. Added in WCAG 2.1 (2018) — for low-vision users who magnify heavily.

   Focus the demo — 1.4.10 Reflow

   This panel is ~340px wide — like a phone, or a 1280px desktop zoomed to 400%, which is the width 1.4.10 targets. Scroll it.

   Account overview

   Your subscription renews next month. Everything below should stay readable in one column, with only vertical scrolling.

   • 1,284Active sessions
   • 96%Uptime
   • $420Monthly spend

   Break this rule

   Meets 1.4.10 — the layout reflows to one column and fits the narrow viewport. Only vertical scrolling, however tight the space.

   • WCAG: Understanding 1.4.10 (opens in a new tab)

   1.4.11 Non-text Contrast

   • Perceivable
   • Level AA
   • WCAG 2.1

   The visual boundaries and states of UI components (and meaningful graphics) need at least 3:1 contrast against adjacent colors. Added in WCAG 2.1 (2018) — so controls stay perceivable for low-vision users and in glare or poor lighting.

   Focus the demo — 1.4.11 Non-text Contrast

   These controls are outlined only by their borders. Below 3:1 those boundaries melt into the background — the inputs are still there, but can you see where they are?

   Filter

   • Unread
   • Starred

   Break this rule

   Meets 1.4.11 — the control borders sit at ~3.5:1 against the background, so every field, button, and chip is clearly delineated.

   • WCAG: Understanding 1.4.11 (opens in a new tab)

   2.3.3 Animation from Interactions

   • Operable
   • Level AAA
   • WCAG 2.1

   Motion animation triggered by interaction can be turned off, unless the motion is essential. Added in WCAG 2.1 (2018) at level AAA — large transitions trigger nausea and vertigo for people with vestibular disorders.

   Focus the demo — 2.3.3 Animation from Interactions

   Reload the panel to replay its entry motion. Then turn on the simulated preference and reload again: compliant goes still, broken keeps sliding. (Your real OS reduced-motion setting works too.)

   Simulate: I prefer reduced motion

   Message sent

   Your changes are saved.

   Reload panel

   Break this rule

   Meets 2.3.3 — when reduced motion is preferred (the toggle, or your OS setting), the panel just appears; the slide is removed.

   • WCAG: Understanding 2.3.3 (opens in a new tab)

   1.3.4 Orientation

   • Perceivable
   • Level AA
   • WCAG 2.1

   Content does not lock to a single display orientation — portrait or landscape — unless essential. Added in WCAG 2.1 (2018) — people whose device is mounted in a fixed orientation (e.g. on a wheelchair) can’t just rotate it.

   Focus the demo — 1.3.4 Orientation

   A little app inside a device frame. Rotate it. Compliant works either way; broken demands landscape and walls off portrait — locking out anyone whose device is fixed in one orientation (a tablet mounted to a wheelchair, say).

   Today

   7,204 steps

   3 reminders

   2 messages

   ⟳

   Please rotate your device to landscape to continue.

   Rotate device (portrait)

   Break this rule

   Meets 1.3.4 — the app works in both portrait and landscape. Rotate the device and the content simply adapts.

   • WCAG: Understanding 1.3.4 (opens in a new tab)

   1.3.5 Identify Input Purpose

   • Understandable
   • Level AA
   • WCAG 2.1

   Fields that collect information about the user — name, email, address — expose their purpose programmatically, in practice through autocomplete tokens. Added in WCAG 2.1 (2018): it turns autofill from a guess into a guarantee, for people for whom every keystroke is expensive and every transcription is a chance to get it wrong.

   Focus the demo — 1.3.5 Identify Input Purpose

   If your browser has your details saved, click into each field and watch what it offers. The two states look identical — only one of them tells the browser what it's asking for.

   Full name Email Street address

   <input type="email" autocomplete="email">

   Full name Email Street address

   <input type="email">

   Break this rule

   Meets 1.3.5 — every field names its purpose with an autocomplete token (name, email, street-address). The browser can fill them with certainty, and tools that overlay familiar icons on fields have something to read. This site’s own demo forms carry the same tokens.

   • WCAG: Understanding 1.3.5 (opens in a new tab)
   • MDN: autocomplete (opens in a new tab)

3. WCAG 2.2 2023

   The fine-motor and cognition era — focus visibility, drag alternatives, target sizes.

   2.5.8 Target Size (Minimum)

   • Operable
   • Level AA
   • WCAG 2.2

   Pointer targets are at least 24×24 CSS pixels, unless spacing or an equivalent alternative makes them easy to activate. Added in WCAG 2.2 (2023) — small targets hurt people with motor impairments and anyone on a moving bus.

   Focus the demo — 2.5.8 Target Size (Minimum)

   A formatting toolbar — toggle each control. With the rule off, the same buttons shrink and crowd together: try hitting them now.

   BIU

   Break this rule

   Meets 2.5.8 — comfortably sized (44px here; the AA floor is 24px) and spaced, so the controls are easy to hit.

   • WCAG: Understanding 2.5.8 (opens in a new tab)

   2.4.11 Focus Not Obscured (Minimum)

   • Operable
   • Level AA
   • WCAG 2.2

   When an element receives keyboard focus, it is not entirely hidden by author-created content like a sticky header. Added in WCAG 2.2 (2023) — sticky bars routinely swallow the focused control, stranding keyboard users.

   Focus the demo — 2.4.11 Focus Not Obscured (Minimum)

   Tab through the links below. A sticky bar sits at the top of this scrolling panel — when the rule is broken it overlaps whatever you tab to near the top, so keyboard users lose sight of their own focus.

   Sticky toolbar

   Break this rule

   Meets 2.4.11 — scroll-margin keeps each focused link clear of the sticky bar, so the focus ring is always visible.

   • WCAG: Understanding 2.4.11 (opens in a new tab)

   2.4.13 Focus Appearance

   • Operable
   • Level AAA
   • WCAG 2.2

   The keyboard focus indicator is large enough and contrasts enough to be easily seen. Added in WCAG 2.2 (2023) at level AAA — a focus ring that technically exists but is faint still fails real keyboard users.

   Focus the demo — 2.4.13 Focus Appearance

   Tab onto these buttons. Compliant, the focus indicator is thick and high-contrast — unmistakable. Broken, it shrinks to a faint 1px line you have to hunt for.

   SaveDuplicateArchiveDelete

   Break this rule

   Meets 2.4.13 — a thick, offset, high-contrast ring (the project’s focus tokens) that’s impossible to miss.

   • WCAG: Understanding 2.4.13 (opens in a new tab)

   3.3.7 Redundant Entry

   • Understandable
   • Level A
   • WCAG 2.2

   Information the user already entered in the same process is auto-populated or available to select — not asked for again, unless re-entering is essential (like a password) or the data has expired. Added in WCAG 2.2 (2023) — re-typing taxes memory and motor effort, and for people with cognitive or motor disabilities it can end the task.

   Focus the demo — 3.3.7 Redundant Entry

   Step 1 already asked for the delivery address. Watch what step 2 does with that information — and what it costs you when the shortcut is gone.

   Step 1 · Delivery — done

   Name

   Alex Muster

   Street

   Musterstraße 12

   City

   10115 Berlin

   Step 2 · Billing

   Use my delivery address

   Full name Street address City

   Break this rule

   Meets 3.3.7 — billing reuses the delivery address through one pre-checked choice, so nothing is asked twice. The fields also carry autocomplete tokens, so the browser can fill them for you if you do switch addresses.

   • WCAG: Understanding 3.3.7 (opens in a new tab)

   3.2.6 Consistent Help

   • Understandable
   • Level A
   • WCAG 2.2

   If a page offers help — a contact detail, a support link, a chat, a glossary — it appears in the same relative order on every page that has it, unless the user moves it themselves. Added in WCAG 2.2 (2023). Help that relocates has to be re-found on each page, and the people most likely to need it are the ones least able to hunt.

   Focus the demo — 3.2.6 Consistent Help

   Three pages from the same site. Follow the highlighted help link across them — the question is not whether help exists, but whether you have to hunt for it again on every page.

   ProductsHelp

   Help

   AboutHelpTerms

   PricingHelp

   Help

   AboutHelpTerms

   AccountHelp

   Help

   AboutHelpTerms

   Break this rule

   Meets 3.2.6 — help sits in the same place in the footer on all three pages. Found once, and from then on it is simply known. Note the criterion asks for the same relative order, not identical pixels: a narrow layout may reflow, as long as help keeps its place in the sequence.

   • WCAG: Understanding 3.2.6 (opens in a new tab)

4. You are here 2026

5. WCAG 3.0 draft

   The next chapter — a new conformance model: one bar of core requirements, with supplemental requirements and assertions as extras you report, not higher levels.

   Still a working draft, years from done, and it will not replace WCAG 2: pages that meet 2.2 AA are expected to meet most of its core bar, so 2.2 AA stays the target here.

   • W3C: WCAG 3.0 working draft, September 2026 (opens in a new tab)
   • Alastair Campbell, draft editor: the conformance model explained (opens in a new tab)

One standard, many laws

WCAG isn't just guidance — it's the technical core that accessibility law around the world points to. The map below shows how different jurisdictions wrap legal force around the same standard.

The bar, set. Chapter 02 is how the platform clears it.