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

0:00 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.

0:46 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.

1:27 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:08 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:55 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.

3:38 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.

4:23 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.

5:07 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.

5:45 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.

6:32 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.

7:21 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.

8:01 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.