WCAG 2.2 Quick Reference Card

What is inside

The 20 failures we catch most often in real audits, with a copy-paste fix for each. The headings map to WCAG 2.2 success criteria; the fix examples are the ones that actually pass in practice.

A sample of the checks

Missing focus indicator (2.4.7)

:focus-visible {
  outline: 2px solid #4F46E5;
  outline-offset: 2px;
}

Form fields with no label (1.3.1, 3.3.2)

Fail: <input type="text" placeholder="Email"> Pass: <label for="email">Email</label><input id="email" type="email" required> Placeholders disappear when typing. They are not labels.

Auto-playing video with sound (1.4.2)

Fail: Hero video starts with sound on page load. Pass: Auto-play is muted by default, or there is a clearly visible pause control before the audio begins, or the content is under 3 seconds total.

Status messages not announced (4.1.3)

<div role="status" aria-live="polite">Saved</div>
<div role="alert" aria-live="assertive">Error: connection lost</div>

Get all 20 checks with fail/pass examples and code snippets below.