WCAG 2.1 vs 2.2: What Changed and Do You Need to Update Your Site?

When a user tabs to a focusable element — a button, a link, an input — the browser moves focus to it and renders a visible focus indicator. If your site has a sticky header, a sticky footer, a cookie consent banner, or any position-fixed element that covers the page, that element can completely hide the focused component from view. The criterion requires that the focused component is at least partially visible — not entirely obscured.

Who is affected: Any site with a sticky navigation bar, a "back to top" button pinned to the corner, or a cookie consent overlay. If you have a 70px sticky header and a focused button sits at the very top of the content area, keyboard users may not see which element has focus.

How to fix it: Add scroll-margin-top (or scroll-padding-top on the container) equal to the height of your sticky header. This offsets the browser's scroll position so focused elements are revealed below the fixed element:

/* Assuming a 70px sticky header */
:focus {
  scroll-margin-top: 80px; /* a bit more than the header height */
}

For cookie banners that appear at the bottom of the viewport, test that tabbing into form inputs at the bottom of the page doesn't hide them behind the banner. Most modern cookie-consent scripts handle this correctly — verify with keyboard-only navigation.

Every interactive component must have a target size of at least 24×24 CSS pixels. There's an exception: if the target is smaller than 24×24, it must have enough spacing around it so that a 24×24 bounding box centered on the target doesn't overlap any adjacent target. Inline text links are also exempt (the criterion doesn't expect you to make every word in a paragraph a large clickable zone).

Who is affected: Sites with icon-only buttons below 24px (hamburger menu, close X, social share icons, search icon), small pagination dots or arrows, or densely packed navigation link lists where link padding is minimal.

How to fix it: Padding is your friend — you don't need to change the icon size itself. Adding padding increases the clickable area without changing the visual design:

/* Icon button: 20px icon becomes a 40px target */
.icon-btn {
  padding: 10px;       /* 20px icon + 10px padding × 2 = 40px target */
  line-height: 0;
  display: inline-flex;
  align-items: center;
}

/* Social icon row: space them out so 24px offset zones don't overlap */
.social-link {
  padding: 8px;
  min-width: 24px;
  min-height: 24px;
}

Use browser DevTools to verify: right-click any small button → Inspect → check the computed height and width in the Layout panel. Numbers below 24px need padding added.

If any feature on your site requires a dragging gesture — sliding a range input, reordering items in a list, dragging-to-scroll a carousel, resizing a panel — that same action must also be achievable with a single pointer action (a click or tap) without any dragging path. Users with motor disabilities may not be able to maintain a pressed drag without releasing accidentally.

Who is affected: Sites with drag-to-sort lists, range sliders, custom carousel scroll areas, split-pane resizers, or any custom drag-and-drop UI. Standard HTML <input type="range"> sliders satisfy this automatically (keyboard arrow keys work). Custom drag-to-reorder requires an alternative: arrow buttons, a keyboard interface, or a dropdown for selecting position.

Who is not affected: Most marketing sites, documentation sites, and SaaS tools without drag-and-drop interactions pass this criterion automatically — nothing to do.

If a multi-step process (a checkout flow, a multi-page form, an onboarding wizard) asks the user to enter information they already provided in a previous step, that information must be auto-populated or available for the user to select. Re-typing an email address on step 3 when you entered it on step 1 is a failure. The criterion applies within a single process, not across sessions.

Who is affected: Sites with multi-step checkout, onboarding flows, or multi-page forms. Shipping address pre-filling from a billing address (or the "same as billing" checkbox) is the canonical fix pattern. Single-page forms are not affected — the criterion only applies when the user has to move to a new page or step.

Who is not affected: Password confirmation fields are explicitly excluded — re-entering a password for confirmation purposes is permitted. Single-step forms, landing pages, and tools without multi-step processes don't need to do anything.

If your login or authentication flow includes a cognitive function test — solving an image puzzle, identifying objects from photos, transcribing distorted text (classic CAPTCHA) — you must either provide an alternative that doesn't require a cognitive function test, or the page must provide an object recognition tool or a personal content recognition mechanism.

In practice: reCAPTCHA v2 (the "I'm not a robot" checkbox with an image challenge fallback) may fail this criterion unless the audio alternative is enabled and working. reCAPTCHA v3 (invisible, score-based with no user-facing challenge) satisfies the criterion. Email magic links, passkeys, and SMS codes satisfy it by design — they don't require cognitive function tests. Password entry (even with copy-paste) is permitted.

Who is not affected: Sites with no login, no form-gating, and no CAPTCHA. This criterion doesn't apply to content without authentication.

If your site provides a help mechanism — a contact form link, a phone number, a live chat widget, an FAQ link — and it appears on multiple pages, it must be in the same relative position in the layout on each page. A help chat pinned bottom-right on the homepage but absent on product pages would be a failure; so would a contact link in the footer on most pages but in the header nav on one page only.

Who is not affected: Sites without any help mechanism, and sites whose help links are consistently placed in the footer or header on every page. Most sites already satisfy this by convention — the footer "Contact" link appears on every page in the same footer position.