A WCAG checklist for most sites covers the 55 Level A and AA success criteria in WCAG 2.2 (4.1.1 Parsing was removed). Key checks: text contrast of at least 4.5:1 (3:1 for large text), full keyboard use, visible focus, labelled fields, captions, and targets at least 24 by 24 CSS pixels.
| Level | Criteria | Notes |
|---|---|---|
| A | 31 | Baseline barriers, such as missing alt text or keyboard traps |
| AA | 24 | The level most laws and policies point to |
| New in 2.2 (A and AA) | 6 | 2.4.11, 2.5.7, 2.5.8, 3.2.6, 3.3.7, 3.3.8 |
| Removed in 2.2 | 1 | 4.1.1 Parsing |
Updated
This is the working version of an accessibility review: every Level A and AA success criterion in WCAG 2.2, grouped by principle, each with what it means in plain words, how to test it in a few minutes, and a code fix where code helps. Tick items off as you go, filter by level or principle, and print the result.
| Criterion | Name | Level | What it means | How to test |
|---|---|---|---|---|
| 1.1.1 | Non-text Content | A | Images, icons and controls have a text alternative; decoration is hidden. | Check every img alt, icon button name and chart summary. |
| 1.2.1 | Audio-only and Video-only (Prerecorded) | A | Audio-only gets a transcript; silent video gets a transcript or audio track. | Find each podcast or silent clip and look for its alternative. |
| 1.2.2 | Captions (Prerecorded) | A | Recorded video with sound has synchronised captions. | Play videos with captions on; check accuracy, not just presence. |
| 1.2.3 | Audio Description or Media Alternative (Prerecorded) | A | Visual-only information in video is described or offered as text. | Watch with eyes closed; is anything important lost? |
| 1.2.4 | Captions (Live) | AA | Live streams with audio have captions. | Check the live player or service supports real-time captions. |
| 1.2.5 | Audio Description (Prerecorded) | AA | Recorded video has audio description where visuals carry meaning. | Look for a described version or narration that covers on-screen text. |
| 1.3.1 | Info and Relationships | A | Headings, lists, tables and labels are marked up, not just styled. | Inspect headings, lists, table headers and label associations. |
| 1.3.2 | Meaningful Sequence | A | Reading order in the code matches the meaning. | Turn off CSS or use a reader's browse mode and read top to bottom. |
| 1.3.3 | Sensory Characteristics | A | Instructions do not rely only on shape, colour, size, position or sound. | Search copy for phrases like the round button or on the right. |
| 1.3.4 | Orientation | AA | Content works in portrait and landscape unless one is essential. | Rotate a phone or emulate both orientations. |
| 1.3.5 | Identify Input Purpose | AA | Personal data fields declare their purpose so browsers can autofill. | Check name, email, phone and address fields carry autocomplete values. |
| 1.4.1 | Use of Color | A | Colour is never the only way to show meaning, state or a link. | View in greyscale; are errors and links still distinguishable? |
| 1.4.2 | Audio Control | A | Sound that plays on its own for over 3 seconds can be paused or muted. | Load each page with sound on. |
| 1.4.3 | Contrast (Minimum) | AA | Text contrast is at least 4.5:1, or 3:1 for large text. | Measure text and background pairs with the contrast checker below. |
| 1.4.4 | Resize Text | AA | Text can scale to 200 percent without loss of content or function. | Zoom to 200 percent; nothing clipped or overlapping. |
| 1.4.5 | Images of Text | AA | Real text is used instead of pictures of text, logos aside. | Look for banners and buttons that are images. |
| 1.4.10 | Reflow | AA | Content fits 320 CSS pixels wide without two-way scrolling. | Zoom to 400 percent at 1280 pixels wide. |
| 1.4.11 | Non-text Contrast | AA | Icons, field borders, focus rings and chart parts reach 3:1. | Measure borders and icons against their neighbours. |
| 1.4.12 | Text Spacing | AA | Nothing breaks when line, paragraph, letter and word spacing are increased. | Apply the text spacing bookmarklet or the CSS override below. |
| 1.4.13 | Content on Hover or Focus | AA | Tooltips can be dismissed, hovered and stay until moved away from. | Hover a tooltip, move into it, press Escape. |
| Criterion | Name | Level | What it means | How to test |
|---|---|---|---|---|
| 2.1.1 | Keyboard | A | Everything works with a keyboard alone. | Unplug the mouse and complete each task. |
| 2.1.2 | No Keyboard Trap | A | Focus can always move away from any component. | Tab into widgets, embeds and dialogs and tab back out. |
| 2.1.4 | Character Key Shortcuts | A | Single-key shortcuts can be turned off, remapped or only work on focus. | List shortcuts that use a letter or number without a modifier. |
| 2.2.1 | Timing Adjustable | A | Time limits can be turned off, adjusted or extended. | Find session timeouts and timed steps. |
| 2.2.2 | Pause, Stop, Hide | A | Moving, blinking or auto-updating content can be paused. | Look for carousels, tickers and animated backgrounds. |
| 2.3.1 | Three Flashes or Below Threshold | A | Nothing flashes more than three times a second. | Review video and animation for strobing. |
| 2.4.1 | Bypass Blocks | A | A skip link or landmarks let users jump past repeated blocks. | Press Tab once on load and look for Skip to content. |
| 2.4.2 | Page Titled | A | Each page has a title that describes it. | Read the browser tab titles across the site. |
| 2.4.3 | Focus Order | A | Focus moves in an order that keeps meaning and use intact. | Tab through and watch for jumps. |
| 2.4.4 | Link Purpose (In Context) | A | Link text, with its context, says where it goes. | List all links; flag bare Click here and Read more. |
| 2.4.5 | Multiple Ways | AA | There is more than one way to find a page, such as menu and search or sitemap. | Check for search, a sitemap or a full menu. |
| 2.4.6 | Headings and Labels | AA | Headings and labels describe their topic or purpose. | Read the heading outline alone; does it make sense? |
| 2.4.7 | Focus Visible | AA | The keyboard focus indicator is visible. | Tab through; you should always see where you are. |
| 2.4.11 | Focus Not Obscured (Minimum) | AA | A focused element is not fully hidden by sticky bars or banners. | Tab with a cookie banner and sticky header showing. |
| 2.5.1 | Pointer Gestures | A | Path or multipoint gestures have a single-pointer alternative. | Check pinch, swipe and draw interactions for buttons. |
| 2.5.2 | Pointer Cancellation | A | Actions fire on release, or can be aborted or undone. | Press, drag off, release; nothing should trigger. |
| 2.5.3 | Label in Name | A | The accessible name contains the visible label text. | Compare visible labels with computed names in dev tools. |
| 2.5.4 | Motion Actuation | A | Shake or tilt features have a button alternative and can be switched off. | Look for device motion features. |
| 2.5.7 | Dragging Movements | AA | Anything done by dragging can also be done with single clicks or taps. | Try sliders, sortable lists and maps without dragging. |
| 2.5.8 | Target Size (Minimum) | AA | Targets are at least 24 by 24 CSS pixels, or spaced so a 24 pixel circle does not overlap others, with exceptions. | Measure small icons and inline controls. |
| Criterion | Name | Level | What it means | How to test |
|---|---|---|---|---|
| 3.1.1 | Language of Page | A | The page declares its main language. | Check the lang attribute on the html element. |
| 3.1.2 | Language of Parts | AA | Passages in another language are marked with lang. | Find quotes or phrases in other languages. |
| 3.2.1 | On Focus | A | Focusing an element does not change context. | Tab onto every control; nothing should submit or navigate. |
| 3.2.2 | On Input | A | Changing a setting does not change context without warning. | Change selects and radios; watch for surprise navigation. |
| 3.2.3 | Consistent Navigation | AA | Repeated navigation keeps the same relative order. | Compare menus across several pages. |
| 3.2.4 | Consistent Identification | AA | Components with the same function are labelled the same way. | Compare search, cart and download controls across pages. |
| 3.2.6 | Consistent Help | A | Help options that repeat appear in the same relative order. | Compare where contact, chat or help links sit on each page. |
| 3.3.1 | Error Identification | A | Input errors are identified and described in text. | Submit forms empty and with bad data. |
| 3.3.2 | Labels or Instructions | A | Fields have labels or instructions where input is needed. | Check every field has a visible label and format hints. |
| 3.3.3 | Error Suggestion | AA | When a fix is known, the error message suggests it. | Read error text; does it say how to correct the entry? |
| 3.3.4 | Error Prevention (Legal, Financial, Data) | AA | Important submissions can be reversed, checked or confirmed. | Walk through checkout and account deletion. |
| 3.3.7 | Redundant Entry | A | Information already entered in a process is filled in or selectable. | Look for repeated address or email fields in one flow. |
| 3.3.8 | Accessible Authentication (Minimum) | AA | Login does not need a memory or puzzle test without an alternative, and paste is allowed. | Try pasting a password; check for a non-puzzle option. |
| Criterion | Name | Level | What it means | How to test |
|---|---|---|---|---|
| 4.1.2 | Name, Role, Value | A | Custom controls expose their name, role and state to assistive tech. | Inspect custom widgets in the accessibility tree. |
| 4.1.3 | Status Messages | AA | Status messages are announced without moving focus. | Trigger add to cart or search results and listen. |
Hidden until focused, then shown at the top. Press Tab inside the result to see it.
<style>
.skip { position: absolute; left: 8px; top: -40px; background: #111; color: #fff; padding: 8px 12px; }
.skip:focus { top: 8px; }
</style>
<a class="skip" href="#main">Skip to content</a>
<nav>Home · Shop · About</nav>
<main id="main" tabindex="-1">Main content</main>focus-visible shows the ring for keyboard users. The outline colour should reach 3:1 against the background.
<style>
button { padding: 10px 16px; border-radius: 8px; border: 1px solid #555; background: #fff; }
button:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
</style>
<button>Tab to me</button> <button>And me</button>scroll-padding reserves room so focused elements scrolled into view are not hidden under the bar.
html { scroll-padding-top: 80px; } /* height of the sticky header plus a little */
.site-header { position: sticky; top: 0; }Pad small icon buttons up to 24 by 24 CSS pixels. 44 pixels is the stricter AAA target and kinder on phones.
.icon-btn { min-width: 24px; min-height: 24px; display: inline-grid; place-items: center; }
@media (pointer: coarse) { .icon-btn { min-width: 44px; min-height: 44px; } }Paste this into dev tools. These are the values the criterion names; content must stay readable with them applied.
* {
line-height: 1.5 !important;
letter-spacing: 0.12em !important;
word-spacing: 0.16em !important;
}
p { margin-bottom: 2em !important; }The message is text, sits next to the field, says how to fix it and is linked with aria-describedby.
<label for="em">Email</label><br>
<input id="em" type="email" autocomplete="email" aria-invalid="true" aria-describedby="em-err" value="sam@">
<p id="em-err" style="color:#b91c1c">Enter a full email address, like [email protected]</p>A role=status region is announced politely when its text changes, without moving focus.
<div role="status" id="cart-msg"></div>
<!-- after adding an item, set the text: -->
<!-- document.getElementById("cart-msg").textContent = "Added to cart, 3 items"; -->Stopping autoplaying movement for people who ask for less motion also helps with Pause, Stop, Hide.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}Correct autocomplete values and no paste blocking let people log in without recalling a password.
<input type="email" autocomplete="username">
<input type="password" autocomplete="current-password">
<!-- never: onpaste="return false" -->WCAG groups its criteria under POUR: perceivable, operable, understandable and robust. The first covers what people can see and hear, the second what they can do with keyboard, pointer and time, the third whether content and forms make sense, and the fourth whether assistive technology can read the code.
Each criterion has notes, exceptions and definitions in the official text that a one-line summary cannot hold. When an item is borderline, read the Understanding document for that criterion on w3.org before deciding.
Conformance also applies to complete pages and complete processes. A checkout that fails on its last step fails as a whole, even if every earlier step passes.
Conforming to Level AA means meeting 55 criteria: 31 at Level A and 24 at Level AA. WCAG 2.2 has 86 criteria in total once the 31 Level AAA items are counted, after 4.1.1 Parsing was marked obsolete and removed.
Criterion 1.4.3 asks for 4.5:1 between normal text and its background, and 3:1 for large text, meaning at least 18 point (24 CSS pixels) or 14 point bold (about 18.66 CSS pixels). Criterion 1.4.11 asks for 3:1 for icons, input borders and focus indicators.
No checklist can promise that. Laws differ by country and sector, and some rely on WCAG 2.1 or their own standards. Use this page to find and fix barriers, and get legal advice for compliance questions.
WCAG 2.2 added nine criteria, six of them at A or AA: Focus Not Obscured (Minimum), Dragging Movements, Target Size (Minimum), Consistent Help, Redundant Entry and Accessible Authentication (Minimum). It also removed 4.1.1 Parsing.
Each colour is converted to relative luminance by linearising the red, green and blue channels and weighting them 0.2126, 0.7152 and 0.0722. The ratio is the lighter luminance plus 0.05, divided by the darker plus 0.05, giving a value from 1:1 to 21:1.
Related: Website accessibility checklist, HTML accessibility checker, Color contrast checker, aria-label examples, HTML images guide.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.