WCAG 2.2 AA: the criteria most CMS sites still fail

WCAG 2.2 became a W3C Recommendation in October 2023. Eighteen months later, the majority of CMS sites we audit are failing at least one of its new success criteria. That's not unusual for a new version of the guidelines, but the failures we see are almost always the same three criteria — and all three are very fixable.

This article walks through each new 2.2 criterion, explains why CMS sites commonly fail it, and gives you concrete things to check and fix.

2.4.11 Focus Appearance (AA) — the most commonly failed

Every keyboard-focusable component must have a visible focus indicator that meets minimum size and contrast requirements. Specifically: the focus indicator must have an area of at least the perimeter of the component × 2 CSS pixels, and a contrast ratio of at least 3:1 between focused and unfocused states.

The vast majority of CMS themes either remove browser-default outlines (outline: none or outline: 0 in a reset stylesheet) or rely on browser defaults that can be invisible or very low-contrast in some browsers. Both fail 2.4.11.

• Check: Tab through every interactive element on every template. Is the focus indicator visible? Is it large enough?
• Fix: Define a global :focus-visible rule with a high-contrast outline (e.g., 2px solid #9DC20A with a 2px offset)
• Check: Test in Chrome, Firefox and Safari — default outlines differ significantly between browsers

2.5.7 Dragging Movements (AA)

Any functionality implemented using a dragging motion must be operable by a single pointer without dragging. This includes carousels (swipeable), sliders, drag-to-reorder components and any custom drag interaction.

Common fixes: add Previous/Next buttons to carousels, add keyboard arrow-key support to range sliders, add increment/decrement buttons to any draggable slider component.

2.5.8 Target Size Minimum (AA)

Pointer targets must be at least 24 × 24 CSS pixels. Target size includes the spacing around the element if that spacing is interactive. The most common failures: icon-only close buttons on modals (often 20 × 20 or smaller), small pagination dots, social icon links, and inline text links where only the text itself is clickable.

• Modal close buttons: min 44 × 44 CSS pixels (we recommend exceeding the minimum for common interactive controls)
• Pagination and stepper controls: ensure sufficient padding around small numerals
• Social icon links in footers: common offenders — add padding to meet the 24px minimum
• Text link target size: applies to the rendered hit area, not just the visible text

The WCAG 2.2 criteria that were already in 2.1 — and still fail

The new 2.2 criteria are not where most audit findings come from. The bulk of failures in a typical CMS site audit are still the perennial 2.1 issues: missing form labels, insufficient colour contrast, missing alt text, and inaccessible modals and dropdowns.

WCAG 2.2 is more important to pass than 2.1 from a legal and procurement standpoint, but it builds on 2.1 compliance rather than replacing it. Meeting the 2.2 AA standard requires meeting all of WCAG 2.1 AA plus the new criteria — so 2.1 failures are not waived because you're targeting 2.2.