Loading
Not all of WCAG. The subset that actually fails in the components you build, each with its number, its level, the plain-English question you ask when checking it, and where it predictably breaks. Every number links to its Understanding document, because the point of citing a criterion is that the other person can go and read it.
Levels are stated for the version noted. Where nothing is noted the criterion exists in WCAG 2.1 at the level shown; entries marked WCAG 2.2 only do not exist in 2.1 at all, so they are out of scope for a note targeting 2.1 AA. Two entries appear specifically because they are misquoted more often than they are used: 2.4.13 Focus Appearance, which is AAA, and 2.5.5 Target Size, which is AAA in 2.1 while its weaker 2.2 successor is AA.
The two contrast criteria are not interchangeable, and the second one covers everything that is not text.
1.4.3 Contrast (Minimum)Level AA
Is every piece of text at 4.5:1 against its background — or 3:1 if it is at least 18pt, or 14pt bold? Text in an inactive control, pure decoration, and logotypes are exempt.
Usually fails on: Secondary and helper text set in a light grey token. Placeholder text. Any label that a designer deliberately de-emphasised.
1.4.11 Non-text ContrastLevel AA
Is the visual information needed to identify a control — and to identify its state, including focused and selected — at 3:1 against adjacent colours? Inactive components are exempt, and a boundary is only required when nothing else identifies the control.
Usually fails on: Hairline input borders. Unchecked checkboxes and unselected radios. Focus rings. Status chips whose whole meaning is a pale fill. Toggle tracks in the off state.
1.4.10 ReflowLevel AA
At 320 CSS pixels wide, does anything require scrolling in two dimensions? Content that genuinely needs a two-dimensional layout is exempt.
Usually fails on: Dense data tables, side-by-side diff and comparison views, and any panel with a hardcoded min-width — which is most review interfaces.
1.4.12 Text SpacingLevel AA
With line height forced to 1.5×, paragraph spacing to 2×, letter spacing to 0.12× and word spacing to 0.16× the font size, is any content or functionality lost?
Usually fails on: Fixed-height chips, badges and buttons; single-line truncation with overflow hidden; anything where the type was fitted to the box rather than the box to the type.
Four separate criteria that all get described as “keyboard accessibility” in review comments, which is exactly why naming the number matters.
2.1.1 KeyboardLevel A
Is every function operable through a keyboard interface without requiring specific timings for individual keystrokes? Exempt only where the function genuinely depends on the path of the movement, not just its endpoints.
Usually fails on: div-and-onClick controls. Drag-to-reorder with no keyboard equivalent. Canvas and SVG surfaces built for pointer input.
2.1.2 No Keyboard TrapLevel A
If focus can get into a component with a keyboard, can it get out with a keyboard — and if that needs more than Tab or arrow keys, is the user told how?
Usually fails on: Embedded editors and third-party iframes. Note that a modal containing its own tab sequence does not fail this, as long as the user can dismiss it.
2.4.3 Focus OrderLevel A
Does the focus sequence preserve meaning and operability? The order being readable by a machine is not the test — whether it makes sense is.
Usually fails on: Content injected at the end of the DOM but rendered near the top. Anything positioned with CSS order or grid placement. Panels that open without moving focus into themselves.
2.4.7 Focus VisibleLevel AA
Is there a visible keyboard focus indicator? That is the whole criterion — it specifies no size, no thickness and no contrast. Contrast of the indicator falls under 1.4.11.
Usually fails on: A CSS reset with a blanket outline rule. Custom controls that style :hover and forget :focus-visible. Anything where a designer asked for the ring to be removed.
2.4.11 Focus Not Obscured (Minimum)Level AA · WCAG 2.2 only
When a component takes keyboard focus, is it entirely hidden behind author-created content? Partially covered still passes at this level.
Usually fails on: Sticky headers and footers. Cookie banners. Persistent agent-status bars pinned to the viewport — chrome added late, after anyone last tabbed the page.
2.4.13 Focus AppearanceLevel AAA · WCAG 2.2 only
Does the indicator meet the minimum area and change-of-contrast rules? Listed here because it is the most misquoted criterion in the 2.2 set — it is AAA, so there is no AA rule about how a focus ring looks beyond 1.4.11.
Usually fails on: Nothing, at AA. Cite it only when someone has explicitly chosen to exceed AA, and never as though it were the AA bar.
The cleanest illustration in the standard of why a conformance note has to name a version: the same buttons pass or fail depending on which one you targeted.
2.5.8 Target Size (Minimum)Level AA · WCAG 2.2 only
Is the target at least 24×24 CSS pixels — or does it meet the Spacing exception, where a 24px-diameter circle centred on each undersized target’s bounding box does not intersect another target or another such circle? Equivalent, Inline, User Agent Control and Essential are the other four exceptions.
Usually fails on: Icon-only actions packed into table rows. Close buttons on chips. Pagination controls. Approve-and-reject pairs sitting shoulder to shoulder, which fail the circle test even when each one is individually near the threshold.
2.5.5 Target SizeLevel AAA · WCAG 2.1, at 44×44
Is the target at least 44×44 CSS pixels? Level AAA — which means a conformance note targeting WCAG 2.1 AA carries no target-size obligation at all.
Usually fails on: Nothing you are obliged to fix at 2.1 AA. Worth raising as a usability finding, worth never raising as a conformance failure against that target.
The distinction that decides which ticket gets written: an error is something the user did, a status message is something the system did.
3.3.1 Error IdentificationLevel A
When an input error is automatically detected, is the item in error identified and the error described to the user in text? Colour and icons are permitted in addition to the text, never instead of it.
Usually fails on: A field border that turns red. A bare exclamation icon. Toast notifications that vanish before anyone reads them.
3.3.2 Labels or InstructionsLevel A
Are labels or instructions provided wherever content requires user input?
Usually fails on: Placeholder-as-label. Icon-only inputs such as a bare search field. Format requirements only discoverable by getting them wrong.
3.3.3 Error SuggestionLevel AA
Where a correction is known, is it offered — unless offering it would jeopardise the security or purpose of the content?
Usually fails on: “Invalid input.” Any message that reports the rejection without naming the rule it broke.
4.1.3 Status MessagesLevel AA
Can status messages be programmatically determined through role or properties, so assistive technology presents them without the message taking focus? A status message reports success or results, a waiting state, progress, or the existence of errors.
Usually fails on: Everything asynchronous. Extraction confidence chips, run progress, “saved”, retry counts, and every token of a streamed response. axe-core has no rule for this criterion — it is checked by a person or by nobody.
The criteria that go wrong the moment a div starts behaving like a control. None of these are visible in a screenshot.
4.1.2 Name, Role, ValueLevel A
For every UI component, can the name and role be programmatically determined, can user-settable states and values be programmatically set, and is notification of changes available to user agents? Standard HTML controls used to specification already satisfy this.
Usually fails on: Every hand-built combobox, tree, tab set and toggle. The criterion the ARIA-patterns module exists to service.
1.3.1 Info and RelationshipsLevel A
Is information, structure and relationship conveyed through presentation either programmatically determinable or available in text?
Usually fails on: Headings styled with font-size instead of marked up. Layout tables. Grouped form controls with no fieldset. A visual hierarchy of run steps expressed only through indentation.
1.1.1 Non-text ContentLevel A
Does all non-text content have a text alternative serving the equivalent purpose? A tool can check the attribute exists; only a person can check it says something true.
Usually fails on: Source-image crops in an extraction gate. Charts and sparklines. Decorative icons that should have been hidden instead of described.
1.4.13 Content on Hover or FocusLevel AA
Is additional content triggered by hover or focus dismissible without moving the pointer or focus, hoverable without disappearing, and persistent until dismissed or no longer valid?
Usually fails on: Custom tooltips, popovers and submenus — especially any that disappear the moment the pointer leaves the trigger to travel toward them.
2.4.4 Link Purpose (In Context)Level A
Can the purpose of each link be determined from its text alone, or from its text plus its programmatically determined context?
Usually fails on: “View”, “Open”, “Details” repeated down a table column. An accessible name is present, so no rule fires; the name just does not distinguish one row from another.
One criterion, listed on its own because it is the one nobody applies to an agent run and it applies squarely.
2.2.2 Pause, Stop, HideLevel A
For auto-updating information that starts automatically and is presented in parallel with other content, is there a mechanism to pause, stop or hide it, or to control the update frequency? Exempt only where the auto-updating is essential to the activity. There is no five-second grace period for auto-updating, unlike the moving-and-blinking clause.
Usually fails on: A streamed response rendering token by token. A live run log. A progress panel that rewrites itself every few hundred milliseconds while the rest of the page stays usable.
Give the number, the exact name, the level, and the version if the level depends on it. “That fails 1.4.11 Non-text Contrast at AA; the unchecked state is carried entirely by a border at roughly 1.8:1 and the requirement is 3:1” is a sentence somebody can price. A level quoted without a version, or a criterion described without its number, is the same opinion the room already had.
When you cannot remember a level, say so and look it up rather than guessing. Being wrong about a level is worse than not knowing one, because it is the specific mistake that gets a whole finding dismissed.
Every criterion number on these pages links to the success criterion or its Understanding document. If a number or a level looks wrong, check the resource list and tell your teaching agent — a course about citing the spec correctly has no excuse for citing it wrongly.