WCAG 2.2 AA UX Audit Checklist: Touch Targets & Rules

Web accessibility has officially transitioned from an aspirational design guideline to an aggressive legal and commercial mandate. In 2026, enterprise procurement teams routinely reject SaaS vendors that lack a verified Voluntary Product Accessibility Template (VPAT), while digital accessibility lawsuits under Americans with Disabilities Act (ADA) Title III and European Accessibility Act (EAA) enforcement hit record volumes. The benchmark standard governing this compliance landscape is WCAG 2.2 Level AA.

Executive Accessibility & Legal Takeaways:

The New AA Criteria: WCAG 2.2 adds 6 new Level A & AA requirements, specifically targeting mobile touch targets (2.5.8), focus obscuration by sticky headers (2.4.11), and cognitive barriers in authentication (3.3.8).
The 24×24 CSS Pixel Hard Floor: Small icon buttons (like table action icons or close buttons) under 24px must now include guaranteed offset spacing to prevent mis-clicks.
The 4.1.1 Parsing Deprecation: Obsolete HTML syntax validation rules were officially removed, refocusing audits entirely on assistive technology interaction rather than markup trivia.
Enterprise Procurement Shield: B2B SaaS applications meeting verified WCAG 2.2 AA standards close Fortune 500 enterprise software contracts 30% faster by passing vendor risk assessments on Day 1.

The New WCAG 2.2 AA Success Criteria: Architectural Breakdown

Direct Legal & UX Answer:

WCAG 2.2 AA introduces mandatory requirements that directly impact interface design: Target Size Minimum (24x24px for all clickable items), Focus Not Obscured (sticky elements cannot hide keyboard focus), Dragging Movements (drag-and-drop must offer button alternatives), and Accessible Authentication (no CAPTCHA puzzles or memory tests).

Unlike previous updates that focused heavily on color contrast algorithms, WCAG 2.2 addresses modern interaction patterns—specifically single-pointer touch ergonomics, complex drag-and-drop kanban boards, and friction in multi-factor login flows:

Success Criterion	Level	Core UX Requirement	Common Production Violation	Engineering Fix
2.5.8 Target Size (Minimum)	AA	Targets must be at least 24x24px or provide sufficient perimeter spacing	16px inline table delete icons placed immediately beside edit buttons	Increase padding or enforce minimum 8px negative margin bounds
2.4.11 Focus Not Obscured (Min)	AA	Focused element cannot be completely hidden by sticky/fixed UI	Sticky navigation headers or bottom cookie banners covering inputs	Add scroll-padding-top and scroll-padding-bottom to the HTML root
2.5.7 Dragging Movements	AA	Any drag action must have a single-pointer alternative	Kanban boards or reorderable lists that only work via mouse drag	Provide ‘Move Up / Move Down’ or dropdown menu actions on cards
3.3.8 Accessible Authentication	AA	No cognitive function tests (memorizing passwords, puzzle CAPTCHAs)	Blocking password managers or copy-paste on OTP authentication inputs	Support WebAuthn passkeys, 1-click magic links, and unblocked paste
3.3.7 Redundant Entry	A	Do not make users re-enter previously entered information in a flow	Multi-step checkouts asking for shipping address, then billing address twice	Add ‘Same as Shipping’ auto-populate checkbox and session persistence

Target Size Ergonomics: How to Implement 2.5.8 in Production Design Systems

Criterion 2.5.8 (Target Size Minimum) causes the most friction between visual designers and accessibility auditors. Designers love delicate, minimalist 16px icons. However, users with motor impairments or those operating mobile touchscreens with one hand frequently miss targets under 24px.

To comply with 2.5.8 without sacrificing visual elegance, enterprise design systems use the “Visual Size vs. Hit Target Area” separation pattern:

The CSS Pseudo-Element Hit Expander: A button can render a visually compact 16x16px SVG icon, while expanding its clickable bounding box to 28x28px or 32x32px using a ::before pseudo-element:

.icon-button {
  position: relative;
  width: 16px;
  height: 16px;
}
.icon-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
}

The 24px Spacing Offset Exception: If an element is physically smaller than 24px, it passes WCAG 2.2 AA if the distance between its center and the center of any adjacent interactive target is at least 24px.

Focus Not Obscured (2.4.11): Eliminating the Sticky Header Trap

Direct Engineering Solution:

Add scroll-padding-top: [header_height]px; and scroll-padding-bottom: [footer_height]px; directly to your root CSS container. This instructs the browser’s native keyboard navigation engine to automatically scroll focused elements into clear view with comfortable clearance.

When a keyboard user tabs through a form on a page with a position: sticky; or position: fixed; header, the browser’s default focus() behavior scrolls the element to the very top edge of the window—landing it squarely underneath the opaque navigation bar. In WCAG 2.2, this is an explicit Level AA violation.

Implementing native CSS scroll padding solves this across all Chromium, WebKit, and Gecko browsers with zero JavaScript overhead, instantly resolving 2.4.11 compliance audits.

Principal Analyst’s Verdict:

WCAG 2.2 compliance is no longer a checklist for the QA department; it is core brand hygiene and legal risk management. In an era where opportunistic ADA Title III lawsuits target enterprise websites daily, proactive compliance with 2.2 AA standards is the single cheapest insurance policy a software company can purchase. By hardcoding 24px target boundaries, native scroll-padding, and passkey authentication directly into your shared component library, you permanently insulate your product from litigation while accelerating enterprise deal velocity.

The New WCAG 2.2 AA Success Criteria: Architectural Breakdown

Target Size Ergonomics: How to Implement 2.5.8 in Production Design Systems

Focus Not Obscured (2.4.11): Eliminating the Sticky Header Trap

People Also Ask