All articles

WCAG 2.2 for online shops: the six new criteria

Focus hidden under sticky bars, tiny buttons, passwords you cannot paste: what the six new WCAG 2.2 criteria mean for a shop, and how to check them.

WCAG 2.2 became a W3C Recommendation in October 2023. It keeps everything in WCAG 2.1 and adds nine success criteria, six of them at levels A and AA, the levels laws and contracts usually ask for. It also retires one: 4.1.1 Parsing, which browsers made obsolete. Here is what the six new criteria mean for an online shop, and how to check them.

Who asks for WCAG 2.2

The UK government's model accessibility statement measures against WCAG 2.2 AA. In the EU, the European Accessibility Act points to the standard EN 301 549, which still uses WCAG 2.1 AA and is being updated to 2.2. Meeting 2.2 now means you will not have to come back to it, and the six new criteria fix real problems customers meet every day.

2.4.11 Focus Not Obscured (AA)

When a link or button gets the keyboard focus, it must not be entirely hidden by something the shop put on top: a sticky header, a sticky "add to cart" bar, a cookie banner, a chat button. Keyboard users press Tab and see nothing move. The usual fix is CSS: scroll-padding-top and scroll-padding-bottom on the page, the height of the bars, so the browser scrolls the focused element clear of them.

2.5.7 Dragging Movements (AA)

Anything done by dragging must also work with single clicks or taps: a price range slider, a list to reorder, a map to move, a "swipe to see more" carousel. A price slider with number fields next to it passes; a slider alone fails.

2.5.8 Target Size (Minimum) (AA)

Buttons and links must be at least 24 by 24 pixels, or have enough space around them that a 24-pixel circle on each does not touch the next. Tiny "remove from cart" crosses, quantity arrows and social icons set close together are the usual failures. Links inside a sentence are exempt.

3.2.6 Consistent Help (A)

If the pages offer help — a contact link, an e-mail address, a phone number, a chat — it must sit at the same place, in the same order, on every page where it appears. A contact link in the footer of most pages but in the header of the checkout fails.

3.3.7 Redundant Entry (A)

What the customer already typed in a process must not be asked again, unless it is filled in or offered to pick. At checkout, "ship to the billing address" as a ticked box passes; asking for the same address twice does not.

3.3.8 Accessible Authentication (Minimum) (AA)

Logging in must not depend on remembering or transcribing something, unless something helps: customers must be able to paste their password and let a password manager fill it. A password field that blocks pasting, or that tells password managers to keep away with autocomplete="off", fails. Use autocomplete="current-password" on the login form and "new-password" when an account is created.

What software can check

Four of the six can be found automatically. Relyo checks target sizes (with axe-core) and password fields on every page for free; Relyo Pro also brings each element into view as the keyboard would and reports focus hidden under a sticky bar, and compares the pages with one another to find help that moves. Dragging movements and redundant entry need a person: Relyo lists them with what to check. Every problem shows its WCAG number, linked to W3C's explanation, next to the RGAA criterion when there is one.