WCAG 2.2 criteria, rules and manual checks

Find prerecorded audio-only media (podcast, sound clip) and video-only media (silent product clip, animation without sound). Pass: a text transcript or an equivalent text/audio alternative is linked directly next to each. n/a when the shop has no such media.

Play every prerecorded video that contains speech (product demos, brand films, embedded YouTube/Vimeo). Pass: captions are available via a CC control, a <track kind="captions"> or open captions, and they are accurate. Unreviewed auto-generated captions do not pass.

For each prerecorded video whose visuals carry information not in the audio (text on screen, product handling, steps shown but not spoken). Pass: an audio-described version or a full text alternative (a transcript that describes the visuals) is provided.

Only for live video with audio (live shopping events, streamed launches). Pass: real-time captions are provided during the stream. n/a for shops without live video.

For prerecorded video with informative visuals not covered by the soundtrack. Pass: an audio description track or an audio-described version of the video exists. A text alternative alone satisfies 1.2.3 but not this criterion.

Read the page top to bottom with the screen reader (arrow keys / browse mode) and compare with the visual order. Pass: product title, price, variant options and add-to-basket come in a sensible order; CSS-reordered grids, sidebars and mega-menus do not scramble the reading order. Screen reader: Windows: NVDA (free, nvaccess.org) + Chrome. Mac: VoiceOver (Cmd+F5) + Safari.

Search instructions and hints for references that rely only on shape, colour, size, position or sound: "click the green button", "the field on the right", "see the box below", "listen for the beep". Pass: each such instruction also names the control or gives a text cue.

On a phone or tablet (or dev tools device emulation), open the home page, a product page, the cart and the first checkout step, and rotate between portrait and landscape on each. Pass: content and controls stay available and usable in both orientations and nothing asks the visitor to rotate the device. Only content that needs one orientation to work may lock it, which is rare in a shop.

Check every place where colour carries meaning: selected variant swatch (needs a border, check mark or text, not only a colour change), form errors (icon or text, not only a red border), links inside body text (underline or a 3:1 contrast plus a hover/focus cue), stock indicators (green/red dot needs text). Pass: each meaning is also conveyed without colour.

Zoom to 400 % and look at hero banners, promo badges, "Sale" graphics and category tiles. Any text that turns blurry is an image of text. Pass: text is real text (logos and brand marks excepted) or the image is essential (e.g. a printed label shown as a product photo). If the shop generates PDF invoices or receipts, open one: it must be text-based (the text can be selected), not a scanned image.

Zoom to 400 % (Ctrl and + until 400 %, or a ~320 px wide viewport in dev tools). Pass: no horizontal scrolling to read content (data tables exempt); the menu, prices and add-to-basket are still present and usable; nothing overlaps or disappears; form labels stay attached to their fields. The automated vs-reflow check only detects horizontal scrolling.

Trigger every hover or focus popup: tooltips, mega-menus, size guides, mini-cart previews, product quick-view. Pass: it can be dismissed with Esc without moving the pointer, the pointer can be moved onto the popup without it closing, and it stays open until dismissed or hover/focus leaves.

Unplug or ignore the mouse; use only Tab, Shift+Tab, Enter, Space, arrows and Esc. Tab through the homepage top to bottom. Open and close every menu, burger and dropdown (Enter/Space opens, Esc closes). Open a product page, pick a variant (size/colour) and add to basket. Open the basket, change a quantity and remove an item. Pass: everything is reachable and operable and you always know where you are.

Open every modal and popup (newsletter, cookie banner, size guide, quick view, login). Pass: focus moves into it, Esc closes it, and focus comes back where you were. Fail hard if you can Tab to the page behind the modal. The cookie banner itself: reject and accept are both reachable and operable by keyboard alone, and nothing traps you inside.

With focus on the page body (not in a field), press single letters and punctuation such as /, s, k, ?. Pass: no single-character shortcut is active; or it can be turned off or remapped; or it only works while the related control has focus.

Watch every autoplaying video, animated banner, GIF, countdown timer and hover effect for 10 seconds. Pass: nothing flashes more than three times per second and no large area strobes. Also confirm any auto-playing carousel can be paused.

During the keyboard pass, watch where focus goes. Pass: the Tab order follows the visual layout; after closing a menu or modal, focus returns to the trigger; after a basket update, live search or carousel change, focus stays where you put it and does not vanish to the top of the page.

Confirm at least two ways to reach any page: site search plus the navigation menu, a sitemap, breadcrumbs or related-product links. Run one search and open a result. Pass: two independent routes work. Pages that are steps in a process (checkout) are exempt.

Read the headings list (screen reader H key or the browser outline) and the form labels. Pass: headings describe their section (the PDP h1 is the product name, PLP headings name the category, no "Section 1" or placeholder text) and labels describe the field purpose ("Email address", not "Field" or "Enter"). Screen reader: Windows: NVDA (free, nvaccess.org) + Chrome. Mac: VoiceOver (Cmd+F5) + Safari.

Repeat the keyboard pass and look for the ring. Pass: every focused element shows a visible indicator (outline, ring, underline or a clear colour shift) so you can always point at the screen and say "focus is there" without guessing, and the indicator passes the squint test against its background. The automated vs-focus-visible check cannot judge how visible the change is.

Find multipoint or path-based gestures: pinch-zoom on product images, swipe carousels, swipe-to-delete in the basket, drag-to-scroll galleries. Pass: each has a single-pointer alternative (zoom buttons, next/previous controls, a remove button).

Press the mouse button on "Add to basket", "Remove" and "Place order" style controls, move the pointer off the control and release. Pass: nothing happens (actions fire on the up event) or the action can be undone.

With the screen reader, move to buttons and links that show visible text ("Add to basket", "Checkout", "Apply code"). Pass: the announced name contains the visible text; an aria-label such as "Buy now" over a visible "Add to basket" fails. Screen reader: Windows: NVDA (free, nvaccess.org) + Chrome. Mac: VoiceOver (Cmd+F5) + Safari.

Look for features driven by device motion: shake to undo, tilt to rotate a product, motion-controlled AR previews. Pass: a control on screen does the same and the motion trigger can be disabled. n/a for most shops.

Find passages in another language than the page: English slogans or product names on a German or Danish shop, English terms in legal pages, a language toggle listing languages in their own names. Pass: such passages carry a lang attribute (inspect in dev tools) and, if a language toggle exists, switching announces and works. Proper names and single loan words are exempt.

Tab through the whole page including search fields, selects and the cookie banner. Pass: merely focusing an element never opens a menu, submits a form, moves focus elsewhere or navigates to another page.

With the keyboard, change selects, radios and checkboxes: variant (arrow through the options), country, shipping method, quantity, sort order. Pass: changing a value does not auto-submit or navigate without warning; if the page updates, the user is told beforehand or a button triggers the change. Variant selects that navigate on arrow key are a common shop failure.

Compare home, category, product, cart and checkout. Pass: header, main navigation, search, breadcrumbs and footer appear in the same relative order on every page (checkout may reduce navigation but must not reorder what remains). Include the 404 page and an out-of-stock product page: both stay navigable and branded. The automated vs-consistent-help check covers only the help link position.

Check that the same function is labelled the same everywhere: "Add to basket" vs "Add to cart", the basket icon name, the search button, "Wishlist" vs "Favourites", the account link. Pass: identical functions have identical names and icons across templates.

With the screen reader on the checkout (and login/registration), submit an empty form and one with an invalid email and postcode. Pass: errors are announced when they appear, identify which field is wrong and say what is wrong. Screen reader: Windows: NVDA (free, nvaccess.org) + Chrome. Mac: VoiceOver (Cmd+F5) + Safari.

With the screen reader, Tab through every checkout, address, login and newsletter field. Pass: every field announces its label; required fields identify themselves as required (not by colour or an unexplained asterisk alone); format hints (date, postcode, phone) are given before input. Screen reader: Windows: NVDA (free, nvaccess.org) + Chrome. Mac: VoiceOver (Cmd+F5) + Safari.

Enter a malformed email, a postcode in the wrong format and an expired card date. Pass: each error message suggests how to fix it ("Enter a postcode like 10115", "Email must contain @"), not just "Invalid input", unless a suggestion would compromise security.

Go through checkout to the last step without paying. Pass: before the order is placed there is a review step showing items, quantities, totals, addresses and payment method, everything can be changed, and the final action is clearly labelled (e.g. "Buy now"). Also check account deletion or address deletion asks for confirmation.

Screen reader on the money path, starting from site search. Pass: the search field announces its purpose and the results are announced so you can reach a product; variant swatches announce name and selected state, quantity steppers and accordions announce their role and state, the basket announces contents, quantities and total in order, and iframe-based card fields (Stripe and similar) announce which is card number, expiry and CVC. You should be able to buy the right size and colour without looking. Screen reader: Windows: NVDA (free, nvaccess.org) + Chrome. Mac: VoiceOver (Cmd+F5) + Safari.

With the screen reader, trigger status changes without moving focus: "added to basket", basket count, search and filter result counts, price/stock change on variant selection, coupon applied, form saved, and finally the order confirmation. Pass: each is announced (live region) without moving focus; the customer must know they bought. The automated vs-live-updates check covers the product page only. Screen reader: Windows: NVDA (free, nvaccess.org) + Chrome. Mac: VoiceOver (Cmd+F5) + Safari.