WCAG 2.2: The 9 New Success Criteria for Your Shop

On October 5, 2023, the W3C published the Web Content Accessibility Guidelines (WCAG) 2.2 as an official web standard. For online shops, this update is particularly relevant: with 9 new success criteria, WCAG 2.2 addresses exactly the barriers that customers with cognitive, motor, and visual impairments experience during the purchase process. EN 301 549 - the harmonized standard behind the European Accessibility Act - is expected to be updated to WCAG 2.2 in early 2026 (ETSI). In this article, we analyze each new criterion with practical code examples for technical implementation.

WCAG 2.2 vs. 2.1: What Has Changed?

WCAG 2.2 is backwards compatible with WCAG 2.1 - meaning all existing success criteria remain intact. The key differences: WCAG 2.2 contains 86 instead of 78 success criteria (9 new, 1 removed). The removed criterion 4.1.1 Parsing is considered obsolete, as modern browsers now reliably correct HTML errors.

Current State: Websites and Accessibility

The reality is sobering: most websites fail to meet even basic accessibility requirements. According to the WebAIM Million Report 2025, 96.3% of the top 1 million websites have automatically detectable WCAG errors. On average, 51 errors per homepage are found (WebAIM). For e-commerce operators, this means: the need for action is significant - and WCAG 2.2 adds further requirements.

Particularly relevant: 69% of all accessibility lawsuits in the US target online shops (UsableNet). With the European Accessibility Act, regulatory pressure is also increasing in the EU. Those already working on EAA compliance should integrate the new WCAG 2.2 criteria promptly.

The 6 New AA Criteria in Detail

For most online shops, Level AA is the relevant compliance standard. WCAG 2.2 introduces 6 new AA criteria (2 at Level A, 4 at Level AA), which we present below with concrete implementation examples.

1. Focus Not Obscured (Minimum) - SC 2.4.11 (AA)

When an element receives keyboard focus, it must not be entirely hidden by other content. Common problem areas in online shops include sticky headers, cookie banners, and chat widgets that overlay focused elements. The checkout process is particularly susceptible when fixed navigation elements cover form fields.

/* Sticky header: scroll padding for focus visibility */
html {
  scroll-padding-top: 80px; /* Height of sticky header */
}

/* Cookie banner: don't cover focused elements */
.cookie-banner {
  position: fixed;
  bottom: 0;
  z-index: 1000;
}

/* Ensure focused elements remain visible */
main :focus-visible {
  scroll-margin-top: 100px;
  scroll-margin-bottom: 120px;
}

2. Dragging Movements - SC 2.5.7 (A)

Functions that require dragging movements must also be operable with a single pointer input. For online shops, this typically affects image galleries with swipe gestures, price sliders in filters, and sortable shopping carts. People with motor impairments or tremors often cannot perform drag gestures.

<!-- Price slider with drag + input field alternative -->
<div class="price-filter">
  <label for="price-range">Price up to:</label>
  <input type="range" id="price-range"
         min="0" max="500" value="250"
         aria-valuetext="250 Euro">

  <!-- WCAG 2.5.7: Simple pointer alternative -->
  <div class="price-inputs">
    <label for="price-min">From:</label>
    <input type="number" id="price-min"
           min="0" max="500" value="0"> &euro;
    <label for="price-max">To:</label>
    <input type="number" id="price-max"
           min="0" max="500" value="250"> &euro;
  </div>
</div>

3. Target Size Minimum - SC 2.5.8 (AA)

Interactive elements must have a minimum size of 24 x 24 CSS pixels. WCAG 2.1 only had this criterion at AAA level with 44px. The new AA requirement is a practical compromise that affects many shop elements: quantity selectors, color swatches, pagination, and filter checkboxes are often too small. Exceptions apply for inline links within text and unmodified browser default elements.

/* WCAG 2.5.8: Minimum target size 24x24px */
button,
a:not(p a), /* Inline links in text are exempt */
input[type="checkbox"],
input[type="radio"],
select,
.interactive-element {
  min-width: 24px;
  min-height: 24px;
}

/* Icon buttons: padding for 24px click target */
.icon-btn {
  padding: 4px; /* 16px icon + 2x4px padding = 24px */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Shop: quantity field in cart */
.quantity-btn {
  min-width: 36px;
  min-height: 36px;
  font-size: 18px;
}

/* Primary actions: comfortable 44px recommended */
.btn-add-to-cart,
.btn-checkout {
  min-height: 44px;
  padding: 12px 24px;
}

4. Consistent Help - SC 3.2.6 (A)

Help mechanisms repeated across multiple pages must appear in the same relative order. This means: if your contact information is in the footer, it must be in the footer on every page - not in the header on one page and the sidebar on another. For e-commerce websites, this is particularly relevant for live chat widgets, phone numbers, FAQ links, and contact forms.

5. Redundant Entry - SC 3.3.7 (A)

Information the user has already entered must not be requested again - it must be pre-filled or selectable. In the checkout process, this is particularly critical: if a customer has entered their billing address, the shipping address must be adoptable via checkbox. This criterion especially helps people with cognitive impairments who have difficulty remembering information.

<!-- WCAG 3.3.7: No redundant entry -->
<fieldset>
  <legend>Shipping Address</legend>

  <!-- Option to adopt previous data -->
  <label>
    <input type="checkbox" id="same-address" checked>
    Shipping address = Billing address
  </label>

  <!-- Fields pre-filled when checkbox active -->
  <label for="shipping-street">Street:</label>
  <input type="text" id="shipping-street"
         autocomplete="shipping street-address"
         value="123 Example Street">

  <label for="shipping-city">City:</label>
  <input type="text" id="shipping-city"
         autocomplete="shipping address-level2"
         value="Berlin">
</fieldset>

6. Accessible Authentication (Minimum) - SC 3.3.8 (AA)

A cognitive function test must not be required for any step in the authentication process. Specifically, this means: customers must not be required to memorize passwords, solve CAPTCHAs, or transcribe codes from one device to another - provided alternatives exist. Browser autofill and password managers must work (paste-blocking is a violation). Modern approaches like passkeys fulfill this criterion optimally - see our guide on passwordless authentication for details.

<!-- WCAG 3.3.8: Accessible Authentication -->
<form method="post" action="/login">
  <!-- autocomplete enables password managers -->
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"
         autocomplete="username"
         inputmode="email">

  <label for="password">Password:</label>
  <input type="password" id="password" name="password"
         autocomplete="current-password">
  <!-- NO paste-blocking! -->

  <button type="submit">Sign in</button>

  <!-- Alternative: Passwordless (Passkey / WebAuthn) -->
  <button type="button" id="passkey-login">
    Sign in with Passkey
  </button>

  <!-- Alternative: Magic Link -->
  <a href="/login/magic-link">
    Send login link via email
  </a>
</form>

The 3 New AAA Criteria

Level AAA is typically not legally required, but offers additional improvements that are especially recommended for shops targeting sensitive audiences (e.g., healthcare, seniors). If you are unsure which level your e-commerce project requires, a professional accessibility audit provides clarity.

7. Focus Not Obscured (Enhanced) - SC 2.4.12 (AAA)

While the AA variant (2.4.11) only requires that focus remains partially visible, the AAA variant demands complete visibility of the focused element and its focus indicator. No pixel of the focus ring may be covered by overlays, sticky elements, or other content.

8. Focus Appearance - SC 2.4.13 (AAA)

The focus indicator must have a contrast ratio of at least 3:1 between the focused and unfocused states and a minimum thickness of 2 CSS pixels. The W3C recommends technique C40: a two-color focus indicator that works on any background.

/* WCAG 2.4.13: Two-color focus indicator (W3C C40) */
*:focus-visible {
  outline: 2px solid #ffffff; /* Light inner line */
  outline-offset: 1px;
  box-shadow: 0 0 0 4px #004d43; /* Dark outer line */
}

/* Forced color mode: box-shadow is suppressed */
@media (forced-colors: active) {
  *:focus-visible {
    outline: 3px solid CanvasText;
    outline-offset: 2px;
    box-shadow: none;
  }
}

/* Fallback for older browsers */
@supports not selector(:focus-visible) {
  *:focus {
    outline: 2px solid #ffffff;
    outline-offset: 1px;
    box-shadow: 0 0 0 4px #004d43;
  }
}

9. Accessible Authentication (Enhanced) - SC 3.3.9 (AAA)

The stricter variant removes two exceptions from the AA version: object recognition (e.g., "select all traffic lights") and personal content (e.g., "which image did you upload?") may no longer serve as authentication methods. Only text-based copy/paste options and passwordless methods are allowed.

All 9 Criteria at a Glance

Testing: Verifying WCAG 2.2 Conformance

Verifying the new criteria requires a combination of automated and manual testing. Automated tools typically detect only about 57% of WCAG issues (Deque/axe-core). The new WCAG 2.2 criteria like Consistent Help or Redundant Entry can only be verified manually or semi-automatically.

• Focus Not Obscured: Tab through all pages, check sticky elements
• Dragging Movements: Test all drag functions for alternative input
• Target Size: Measure interactive elements with DevTools for 24x24px minimum
• Consistent Help: Compare help mechanisms across different pages
• Redundant Entry: Check multi-step forms for repeated queries
• Accessible Authentication: Test login with password manager and paste

Implementation Roadmap for Online Shops

Integrating WCAG 2.2 criteria into an existing online shop should follow a structured approach. We recommend the following prioritization:

1. Immediate (Quick Wins): Focus Not Obscured, Consistent Help, and Target Size - these criteria typically only require CSS adjustments and template reviews
2. Short-term (1-2 Sprints): Redundant Entry in checkout, dragging alternatives for filters - requires JavaScript adjustments and form logic
3. Medium-term (Roadmap): Accessible Authentication with passkey support - requires backend development and infrastructure changes
4. Optional (AAA): Focus Appearance and Enhanced criteria - recommended for shops in healthcare or senior market segments

SEO and Accessibility: Synergy Effects

Accessibility optimizations have a positive impact on SEO. Clean heading structure, meaningful labels, and semantic HTML improve crawling and indexing. Good keyboard navigation and fast interaction times strengthen Core Web Vitals - particularly the INP metric. For WordPress shops and other CMS platforms, this means: accessibility to WCAG 2.2 and search engine optimization go hand in hand.