WCAG 2.2 Level AA in Plain English

Why this needs translating at all

WCAG is written to be precise, testable and durable across technologies that did not exist when it was drafted. Those are the right goals for a standard and they produce sentences like “a mechanism is available to bypass blocks of content that are repeated on multiple web pages”. That is a skip link. It took nineteen words not to say so.

What follows is the same set of requirements grouped by what you would actually go and do, rather than by their numbering. The criterion numbers are kept so you can look up the normative text when you need to argue with someone about it.

The four principles, honestly summarized

Everything in WCAG hangs off four words: Perceivable, Operable, Understandable, Robust. Translated:

• Perceivable — if the information is only available one way, someone cannot get it. Text alternatives, captions, contrast.
• Operable — if the only way to work the thing is a mouse, or a fast reaction, or a precise drag, someone cannot work it. Keyboard, timing, targets, focus.
• Understandable — if the page changes under you, or the error says invalid input, someone cannot recover. Labels, language, consistency, error handling.
• Robust — if you built a control out of divs, assistive technology has no idea what it is. Names, roles, values, status messages.

Give everything non-text a text version

1.1.1 Non-text Content (A) — every image, icon, chart and control that conveys meaning needs a text equivalent. Decorative images get an empty alt so they are skipped rather than announced. This is the single most cited failure in ADA complaints; there is a whole guide on getting it right at how to write alt text.

The five time-based media criteria are easiest to read as one escalating rule about video and audio:

• 1.2.1 Audio-only and Video-only (A) — a prerecorded podcast or audio clip needs a transcript. A prerecorded silent video needs a text description or an audio track that carries the same information.
• 1.2.2 Captions, Prerecorded (A) — prerecorded video with speech needs captions. Auto-generated ones only count once a human has corrected them.
• 1.2.3 Audio Description or Media Alternative (A) — for prerecorded video, information that is only visible on screen must also exist as either an audio description or a full text alternative. At Level A you can pick either.
• 1.2.4 Captions, Live (AA) — live video with speech needs captions too. Webinars and streamed events are the usual gap.
• 1.2.5 Audio Description (AA) — at AA the choice in 1.2.3 hardens: prerecorded video needs the audio description, not just a transcript.

1.4.2 Audio Control (A) belongs with these in practice — any audio that starts automatically and plays for more than three seconds must be pausable, stoppable, or have its own volume control independent of the system volume. Autoplaying sound talks over a screen reader, which is why this is Level A.

Make the structure real, not just visual

1.3.1 Info and Relationships (A) — if it looks like a heading, it must be a heading. If it looks like a table of data, it needs header cells. Styling text to look big does not make it a heading to a screen reader, which navigates by the real ones.

1.3.2 Meaningful Sequence (A) — the reading order in the markup has to make sense, because that is the order it will be read in regardless of where CSS put things.

1.3.3 Sensory Characteristics (A)— instructions cannot rely on shape, color, size or position alone. “Click the green button on the right” means nothing to someone who cannot see the green or the right. Name the thing instead: “click Continue”.

1.3.4 Orientation (AA) — do not lock the page to portrait or landscape unless the orientation is essential to what it does. People with devices mounted to wheelchairs cannot rotate them.

1.3.5 Identify Input Purpose (AA) — common fields need the right autocomplete token, so that browsers and assistive tools can fill and label them.

Color, contrast and reflow

• 1.4.1 Use of Color (A) — color alone cannot be the only signal. A red field border with no message is not an error state.
• 1.4.3 Contrast Minimum (AA) — 4.5:1 for normal text, 3:1 for large text. Check any pair with the contrast checker.
• 1.4.4 Resize Text (AA) — text has to survive 200% zoom without loss.
• 1.4.5 Images of Text (AA) — use real text, not a picture of text. Pictures blur when zoomed and cannot be recolored or restyled by the person reading them. Logos are the standing exception.
• 1.4.10 Reflow (AA) — no two-dimensional scrolling at 320px wide. This is the criterion most “responsive” sites still fail on wide tables.
• 1.4.11 Non-text Contrast (AA) — 3:1 for the visual boundary of controls and meaningful graphics. Gray-on-white input borders fail here constantly.
• 1.4.12 Text Spacing (AA) — content must not break when a user overrides line height and letter spacing.
• 1.4.13 Content on Hover or Focus (AA) — tooltips and hover menus must be dismissible, hoverable and persistent.

Everything must work with a keyboard

2.1.1 Keyboard (A) and 2.1.2 No Keyboard Trap (A) — every function reachable with a mouse must be reachable with a keyboard, and you must always be able to get back out of a component. No automated tool can verify this; it takes ten minutes to check yourself and the method is in the keyboard guide.

2.1.4 Character Key Shortcuts (A) — if you bind single-character shortcuts (press s for search), the user must be able to turn them off or remap them, or the shortcut must only fire while the relevant control has focus. Voice control users dictate words; a page that treats every letter as a command executes their sentences.

2.4.1 Bypass Blocks (A) — a skip link, or real landmarks, so a keyboard user is not tabbing through the whole nav on every page.

2.4.3 Focus Order (A) — focus moves in an order that makes sense. Positive tabindex values are the usual culprit when it does not.

2.4.7 Focus Visible (AA) — you can always see what is focused. Removing the browser outline without replacing it is one of the most common and most damaging single lines of CSS on the web.

2.4.11 Focus Not Obscured, Minimum (AA — new in 2.2) — the focused element must not be completely hidden behind a sticky header, cookie bar or floating widget.

Help people find things and know where they are

• 2.4.2 Page Titled (A) — every page has a <title> that says what the page is. It is the first thing a screen reader announces and the only thing visible on a browser tab.
• 2.4.4 Link Purpose, In Context (A) — a link’s text, or its immediately surrounding sentence, must say where it goes. A page of links that all read “Read more” is a list of identical mysteries to someone navigating by links alone.
• 2.4.5 Multiple Ways (AA) — more than one route to any page: navigation plus a search, a sitemap, or a linked table of contents. Any two will do.
• 2.4.6 Headings and Labels (AA) — headings and form labels describe their topic or purpose. Not a quality bar on prose, just a demand that “Details” actually introduce details.

Pointers, timing and motion

• 2.2.1 Timing Adjustable (A) — time limits can be turned off, adjusted or extended.
• 2.2.2 Pause, Stop, Hide (A) — anything moving or auto-updating for more than five seconds can be paused. Carousels, tickers, animated backgrounds.
• 2.3.1 Three Flashes (A) — nothing flashes more than three times a second.
• 2.5.1 Pointer Gestures (A) — anything needing a multi-point or path-based gesture needs a single-pointer alternative.
• 2.5.2 Pointer Cancellation (A) — actions fire when the pointer is released, not when it is pressed, so a slip can be aborted by dragging away before letting go. Native buttons already behave this way; custom mousedown handlers are how it breaks.
• 2.5.3 Label in Name (A) — the accessible name must contain the visible label text, so voice control users can say what they see.
• 2.5.4 Motion Actuation (A) — anything triggered by shaking or tilting the device needs an on-screen alternative and a way to switch the motion trigger off, for people with tremor and people whose device is mounted.
• 2.5.7 Dragging Movements (AA — new in 2.2) — anything you drag needs a non-drag alternative. Sliders, kanban boards, reorderable lists.
• 2.5.8 Target Size, Minimum (AA — new in 2.2) — 24 by 24 CSS pixels, with exceptions for inline links and spaced targets.

Forms, errors and authentication

• 3.3.1 Error Identification (A) — errors are described in text, not just color.
• 3.3.2 Labels or Instructions (A) — every field has a real label. A placeholder is not a label: it disappears the moment someone types.
• 3.3.3 Error Suggestion (AA) — where you know what is wrong, say what would be right.
• 3.3.4 Error Prevention (AA) — legal, financial and data-deleting submissions are reversible, checked or confirmed.
• 3.3.7 Redundant Entry (A — new in 2.2) — do not make people re-type information they already gave you in the same process.
• 3.3.8 Accessible Authentication, Minimum (AA — new in 2.2) — no cognitive function test as the only way to log in. Puzzle CAPTCHAs and “type the third character of your memorable word” fail this. Password managers must be allowed to work.

Be predictable, and offer help consistently

• 3.1.1 Language of Page (A) — declare it, or a screen reader reads English with a French voice.
• 3.1.2 Language of Parts (AA) — when a passage switches language, mark it with its own lang attribute so the voice switches with it. A French quotation read with English pronunciation is noise.
• 3.2.1 On Focus (A) / 3.2.2 On Input (A) — focusing or changing a field does not spring a new context on the user unannounced.
• 3.2.3 Consistent Navigation (AA) / 3.2.4 Consistent Identification (AA) — the same things appear in the same places with the same names.
• 3.2.6 Consistent Help (A — new in 2.2) — if help exists, it is in the same relative place on every page.

Tell assistive technology what things are

4.1.2 Name, Role, Value (A)— the criterion custom components fail. An icon button with no accessible name is announced as “button”. A div acting as a dropdown is announced as nothing at all. If you build a control, you own its name, its role, its state and its keyboard behavior.

4.1.3 Status Messages (AA)— “3 results found”, “added to basket” and “saved” have to be announced without moving focus, which means a live region.

4.1.1 Parsing was removed in WCAG 2.2. If a tool still reports it as a failure, that tool has not been updated.

Where to start if this is a lot

It is a lot. The good news is that the failures which actually get pleaded in complaints are a short subset: alt text, form labels, control names, contrast, captions, keyboard operability. Do those and you have removed most of both the real barriers and the real exposure.

Run the scan to see which of the machine-checkable ones you have, then do the keyboard pass by hand for the rest.

Frequently asked questions

Keep reading

• ADA Website Compliance, Explained Without the Legalese — There is no federal web rulebook, yet thousands of suits get filed every year. Here is what is actually being enforced, and against whom.
• Why Accessibility Overlay Widgets Do Not Work — One line of JavaScript, compliance solved. Except the lawsuit numbers went up, and the FTC fined the biggest vendor $1M.
• How to Write Image Alt Text That Actually Helps — The most-cited failure in ADA complaints, and the one most often "fixed" in a way that makes things worse.

Nothing here is legal advice. Accessibility obligations vary by jurisdiction and by how a site is used. If you have received a demand letter, talk to a lawyer.