Why this test is worth more than any score
People with motor impairments, many screen-reader users, and anyone with a broken trackpad navigate by keyboard. If your cart drawer traps focus or your variant picker cannot be reached, those customers cannot buy — regardless of how many automated checks pass. This sits under WCAG 2.1.1 (Keyboard), 2.1.2 (No Keyboard Trap) and 2.4.7 (Focus Visible).
The test
Put the mouse away — physically, if that helps. Then, using only Tab, Shift+Tab, Enter, Space and arrow keys:
- Open your home page and press Tab repeatedly from the very top.
- Reach the main navigation and open a menu.
- Get to a collection, then into a product page.
- Choose a variant — size, colour — with the keyboard.
- Add to cart, and notice whether anything announces that it worked.
- Open the cart drawer, then close it — and see where focus lands.
- Proceed to checkout.
The one thing to watch: at every moment you must be able to see where you are. If the focus outline is invisible, the test is already failing, even if every step technically works.
Where Shopify themes usually break
| Component | Typical failure |
|---|---|
| Cart drawer | Focus stays behind the drawer, or after closing it jumps to the top of the page instead of returning to the button that opened it |
| Modals and pop-ups | Newsletter and age-gate modals that cannot be closed with Esc, or that let Tab escape behind them |
| Variant pickers | Swatches built from div elements, so they are not focusable at all |
| Filters on collection pages | Custom dropdowns that respond to click but not to Enter or Space |
| Carousels | Slides reachable only by dragging, with no keyboard controls |
| Focus outline | Removed globally with outline: none for aesthetics — a single line of CSS that breaks the whole flow |
| Skip link | Missing, so every page starts with tabbing through the entire menu |
The fixes, in order of value
- Restore focus visibility. If your theme kills outlines, add a clear focus style instead. This one change makes every other problem findable.
- Fix the cart drawer. Focus should move into the drawer when it opens, stay inside while it is open, close on Esc, and return to the trigger afterwards.
- Make custom controls real controls. A swatch should be a
buttonor an input, not a styleddiv. - Add a skip link so keyboard users can jump past navigation.
What to do with the result
Write down what you found and what you changed, with dates. Automated scans give you the measurable half; this test gives you the half that actually decides whether someone can buy from you. Both belong in the record you keep.
See where your store stands — free
Check your storefront against WCAG 2.1 AA and EN 301 549 in about 30 seconds. No install, no account.
Run the free checkThis guide is information, not legal advice, and does not guarantee compliance with the EAA, the BFSG or any national law. Automated testing detects only a portion of accessibility issues and does not replace an expert audit or testing with people who use assistive technology.