---
title: "WCAG 2.2 in practice: the new criteria on real marketing…"
description: "What WCAG 2.2 changed, precisely WCAG 2.2 (W3C Recommendation, October 2023; approved as ISO/IEC 40500:2025 in October 2025) added nine success criteria…"
url: https://optimizeall.com/learn/ui-ux-design-basics-for-marketers/wcag-22-in-practice
updated: 2026-10-05
---

UI/UX Design Basics for Marketers · Accessibility essentials (WCAG basics) · lesson 16 of 21 · 9 min

# WCAG 2.2 in practice: the new criteria on real marketing pages

## What WCAG 2.2 changed, precisely

WCAG 2.2 (W3C Recommendation, October 2023; approved as ISO/IEC 40500:2025 in October 2025) added nine success criteria to WCAG 2.1 and removed one. Six of the new criteria are at Level A or AA — the levels most teams target — and several hit marketing pages directly: sticky banners, chat widgets, small icons, sliders, multi-step forms and logins.

| Criterion | Level | Plain-language requirement | Typical marketing-page failure |
|---|---|---|---|
| 2.4.11 Focus Not Obscured (Minimum) | AA | When an element gets keyboard focus, it isn't entirely hidden by author-created content | Cookie banner or sticky CTA bar covers the focused link |
| 2.4.12 Focus Not Obscured (Enhanced) | AAA | No part of the focused element is hidden | Same, stricter |
| 2.4.13 Focus Appearance | AAA | Focus indicator is large and high-contrast enough | Faint 1 px focus ring |
| 2.5.7 Dragging Movements | AA | Anything done by dragging can also be done with a single pointer without dragging | Before/after image slider, drag-to-reorder, price range slider |
| 2.5.8 Target Size (Minimum) | AA | Targets at least 24 × 24 CSS px, or enough spacing, with exceptions | Tiny social icons, close "×" buttons, carousel dots |
| 3.2.6 Consistent Help | A | Help mechanisms (contact, chat, FAQ link) appear in the same relative order across pages | Chat link moves between pages |
| 3.3.7 Redundant Entry | A | Don't make people re-enter information they already gave in the same process (auto-fill or let them select it) | Shipping address typed again for billing |
| 3.3.8 Accessible Authentication (Minimum) | AA | No cognitive function test (like remembering or transcribing) to log in, unless there's an alternative or assistance | Paste blocked in password fields; puzzle-only CAPTCHA |
| 3.3.9 Accessible Authentication (Enhanced) | AAA | Stricter: fewer exceptions | Object-recognition CAPTCHAs |

**Removed:** 4.1.1 Parsing is obsolete in WCAG 2.2, because modern browsers and assistive technologies handle markup errors in ways that make it unnecessary.

**Target size exceptions** (2.5.8) include: enough spacing around an undersized target (a 24 px circle centered on it doesn't overlap other targets or their circles), an equivalent control elsewhere that meets the size, links inside sentences, targets whose size is determined by the browser and not modified, and cases where the presentation is essential or legally required.

## Hands-on: fix the four most common 2.2 failures on a landing page

**1. Sticky elements hiding focus (2.4.11).** Tell the browser to leave room for sticky headers and footers when it scrolls focused elements into view, and give focus a strong, visible style:

```css
html {
  scroll-padding-top: 80px;     /* height of the sticky header */
  scroll-padding-bottom: 72px;  /* height of the sticky CTA bar */
}
:focus-visible {
  outline: 3px solid #1D4ED8;   /* check >= 3:1 against adjacent colors */
  outline-offset: 2px;
}
```

For cookie banners and chat widgets, make sure they don't cover focused content — for example, a non-modal banner placed so it doesn't overlap, or a banner that must be dismissed first and keeps focus inside itself until then.

**2. Tiny targets (2.5.8).** Enlarge the clickable area without changing the icon's look:

```css
.social-links a,
.modal-close,
.carousel-dot {
  min-width: 24px;               /* WCAG 2.2 AA minimum */
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.primary-cta { min-height: 44px; }   /* comfortable touch size for key actions */
```

**3. Drag-only controls (2.5.7).** Give every slider or drag interaction a click/tap alternative, such as "before" and "after" buttons on an image-comparison slider, number inputs beside a range slider, or "move up/move down" buttons for reordering.

**4. Login and checkout friction (3.3.7 and 3.3.8).** Allow paste and password managers, support passkeys or email magic links where you can, offer a "billing same as shipping" checkbox, and avoid puzzle-only CAPTCHAs.

```html
<!-- Allow password managers and paste: never block paste -->
<label for="current-password">Password</label>
<input id="current-password" name="password" type="password" autocomplete="current-password">

<label><input type="checkbox" name="billing_same" checked> Billing address same as shipping</label>
```

## A WCAG 2.2 acceptance checklist for campaign pages

```text
[ ] Tab through the page: focused element never fully hidden by banners, chat or sticky bars (2.4.11)
[ ] Every icon button, close button and carousel dot >= 24x24 CSS px or adequately spaced (2.5.8)
[ ] Any drag interaction has a click/tap alternative (2.5.7)
[ ] Help/contact/chat link in the same place on every page of the flow (3.2.6)
[ ] No re-typing of info given earlier in the same process (3.3.7)
[ ] Login/checkout: paste allowed, password managers work, no puzzle-only CAPTCHA (3.3.8)
[ ] Plus existing AA basics: contrast, alt text, captions, labels, keyboard access, visible focus
```

## Worked example: a Black Friday landing page

A retailer's Black Friday page uses a sticky countdown bar, a floating chat bubble, a before/after drag slider showing a product, tiny "×" buttons on promo cards and a checkout that blocks paste in the discount-code field. Against the checklist: focus disappears under the sticky bar and chat bubble; the slider is drag-only; the close buttons are 16 px; the discount code must be typed from an email. Fixes: scroll padding and a repositioned chat bubble, previous/next buttons on the slider, larger close targets, paste allowed. None of the changes alter the visual design noticeably. (Illustrative scenario.)

## How to measure success

Add the WCAG 2.2 checklist to your pre-launch QA and track the pass rate for new campaign pages. Monitor keyboard-only task completion in your accessibility testing, and watch for reduced complaints about logins, checkouts and pop-ups.

## Video lecture: WCAG 2.2 in practice: the new criteria on real marketing pages

Lecture coming soon · 12 chapters · about 9 minutes. Read the full transcript below.

1. WCAG 2.2 in practice
2. Why 2.2 matters to marketers
3. What changed
4. 2.4.11 Focus Not Obscured (AA)
5. 2.5.8 Target Size (AA)
6. 2.5.7 Dragging Movements (AA)
7. Forms, help and logins
8. Worked example 1: newsletter pop-up
9. Worked example 2: Black Friday page (illustrative)
10. Watch me do it: fix and re-test
11. Common mistakes and measures
12. Recap and try this now

## Lecture transcript

### WCAG 2.2 in practice

Here's a test you can try right now. Open a landing page with a cookie banner, a sticky call to action bar and a chat bubble. Put your mouse away and press the tab key. Watch the focus move down the page. At some point, it vanishes. It's still there, but it's hidden underneath the banner or the chat bubble, and a keyboard user has no idea where they are. That exact problem became a named requirement in WCAG two point two. In this lecture, you'll learn the new criteria that matter most for marketing pages, and exactly how to fix the four most common failures.

### Why 2.2 matters to marketers

Why focus on two point two specifically? Because it targets the patterns marketers love. Sticky bars. Chat widgets. Tiny icon buttons. Image sliders. Multi-step forms. Login screens. And because WCAG two point two is now referenced widely, including as ISO standard forty five hundred colon twenty twenty-five, it's increasingly what contracts, procurement and regulators point to. Think of it like a building code update. The old code covered doors and stairs. The update adds rules for the new things everyone started building: glass walls, automatic doors, rooftop terraces. Same principles, applied to modern designs.

### What changed

WCAG two point two added nine success criteria and removed one. Six of the nine are at Level A or AA, the levels most teams target. At AA: focus not obscured, minimum. Dragging movements. Target size, minimum. And accessible authentication, minimum. At Level A: consistent help, and redundant entry. The other three are at AAA: an enhanced focus not obscured, focus appearance, and enhanced accessible authentication. And the one removed is four point one point one, parsing, which modern browsers and assistive technology made unnecessary. Let's take the ones that hit marketing pages hardest.

### 2.4.11 Focus Not Obscured (AA)

First, focus not obscured, minimum, criterion two point four point eleven. When an element receives keyboard focus, it must not be entirely hidden by content you created, like a sticky header, a cookie banner or a chat bubble. The fix has two parts. In your CSS, add scroll padding at the top and bottom of the page, equal to the height of your sticky elements. That tells the browser to leave room when it scrolls a focused element into view. Then give focus a strong, visible style, like a three pixel outline with good contrast. And position chat bubbles and banners so they don't cover focused content.

### 2.5.8 Target Size (AA)

Second, target size, minimum, criterion two point five point eight. Interactive targets should be at least twenty-four by twenty-four CSS pixels, or have enough space around them. There are exceptions, such as links inside a sentence, or an equivalent control elsewhere that meets the size. The usual failures on marketing pages are tiny social icons, little close buttons on pop-ups, and carousel dots. The fix is often invisible. Enlarge the clickable area with a minimum width and height, without changing how the icon looks. And for your key actions, go bigger. Around forty-four pixels tall is comfortable for thumbs.

### 2.5.7 Dragging Movements (AA)

Third, dragging movements, criterion two point five point seven. Anything you can do by dragging must also be possible with a single pointer, without dragging. Think of before and after image sliders, price range sliders, and drag to reorder lists. Some people can't hold and drag, because of tremors or because they use a head pointer or voice control. The fix: add a tap alternative. Before and after buttons on the comparison slider. Number inputs beside a price range. Move up and move down buttons on a reorderable list. Keep the drag for people who like it. Just don't make it the only way.

### Forms, help and logins

Fourth, the form and login criteria. Consistent help, at Level A: if you offer help, like a contact link, chat or FAQ, put it in the same relative place across the pages of a process. Redundant entry, also Level A: don't make people type information they've already given in the same process. Offer billing same as shipping, or let them select earlier answers. And accessible authentication, minimum, at AA: logging in shouldn't depend on a memory or puzzle test without an alternative. In practice, allow paste in password fields, support password managers, and consider passkeys or email magic links. Avoid puzzle-only CAPTCHAs.

### Worked example 1: newsletter pop-up

Worked example one, simple. A newsletter pop-up. The close button is a sixteen pixel cross. Keyboard focus lands behind the pop-up instead of inside it. And the pop-up covers the focused link beneath. The fixes: enlarge the close button's target to at least twenty-four pixels, move focus into the pop-up when it opens, let escape close it, and return focus to where the person was. Four small changes to a single component, and the pop-up now passes several criteria at once, including focus not obscured and target size.

### Worked example 2: Black Friday page (illustrative)

Worked example two, a business scenario with illustrative details. A retailer's Black Friday page has a sticky countdown bar, a floating chat bubble, a before and after drag slider, tiny close buttons on promo cards, and a checkout that blocks pasting the discount code. Running the checklist: focus disappears under the sticky bar and chat bubble. The slider is drag-only. The close buttons are sixteen pixels. And customers must retype a code from an email. The fixes: scroll padding and a repositioned chat bubble, previous and next buttons on the slider, larger close targets, and paste allowed. The page looks almost identical. It just works for far more people.

### Watch me do it: fix and re-test

Watch me do it. I open the campaign page and press tab from the top. Focus disappears under the sticky bar at the fourth link. I open the stylesheet and add scroll padding at the top for the header and at the bottom for the bar, and a three pixel focus visible outline. I tab again. The focused link now stops above the bar. Next, I measure the footer social icons: eighteen pixels. I add a minimum width and height of twenty-four pixels to their links. Then I check the slider, add before and after buttons, and try checking out with a password manager. Paste works. I tick each line on the checklist.

### Common mistakes and measures

Common mistakes. Adding a sticky bar without tabbing through the page. Shrinking icons to look minimal, so they fail target size. Launching drag-only sliders. Moving the help link to different places on each page. Blocking paste in password or code fields for security theater. And relying on puzzle CAPTCHAs. How do you measure success? Add the WCAG two point two checklist to your pre-launch QA and track the pass rate for new campaign pages. Watch keyboard-only task completion in your testing. And look for fewer complaints about logins, checkouts and pop-ups.

### Recap and try this now

Let's recap. WCAG two point two added nine criteria and removed parsing. The ones that hit marketing pages hardest: focus not obscured, target size, dragging movements, consistent help, redundant entry and accessible authentication. Use scroll padding and strong focus styles for sticky elements. Enlarge hit areas to at least twenty-four pixels. Add tap alternatives to drag. Keep help in one place. Don't make people retype. And allow paste and password managers. Try this now. Take one campaign page. Tab through it with every sticky element showing, measure the small targets, find any drag-only controls, and log in or check out with a password manager. Fix or ticket every failure.

## Key takeaways

- WCAG 2.2 added nine success criteria (six at A/AA) and removed 4.1.1 Parsing; it is also ISO/IEC 40500:2025.
- Sticky bars, cookie banners and chat bubbles must not fully hide keyboard focus (2.4.11); use scroll padding and careful placement.
- Targets need at least 24 × 24 CSS px or enough spacing (2.5.8); aim larger for key touch actions.
- Drag interactions need a single-pointer alternative (2.5.7); help must be consistent (3.2.6).
- Don't make people re-enter information (3.3.7) or pass memory/puzzle tests to log in; allow paste and password managers (3.3.8).

## Try it

Run the WCAG 2.2 acceptance checklist on one campaign page: tab through with sticky elements visible, measure small targets, find drag-only controls and try logging in or checking out with a password manager. Fix or ticket every failure.

- [Previous: WCAG principles, levels and why they matter](https://optimizeall.com/learn/ui-ux-design-basics-for-marketers/wcag-principles)
- [Next: A practical accessibility checklist for marketers](https://optimizeall.com/learn/ui-ux-design-basics-for-marketers/accessibility-checklist-for-marketers)
- [All lessons of UI/UX Design Basics for Marketers](https://optimizeall.com/learn/ui-ux-design-basics-for-marketers)