Some people cannot use a mouse, because of a motor disability, a tremor or because they are blind and use a screen reader with keyboard commands. Automated scanners can't tell you whether your store actually works without a mouse, but you can check it yourself in about 10 minutes.
The Department of Justice lists "mouse-only navigation (lack of keyboard navigation)" as an example of a website barrier (Guidance on Web Accessibility and the ADA (ADA.gov, U.S. Department of Justice, March 18, 2022)), and WCAG 2.1 asks that all functionality be available from a keyboard (WCAG 2 at a Glance (W3C WAI)).
The keys you need
| Key | What it does |
|---|---|
| Tab | Move to the next link, button or field |
| Shift + Tab | Move back |
| Enter | Follow a link or press a button |
| Space | Press a button, tick a checkbox |
| Arrow keys | Move inside drop-downs, radio buttons and some menus |
| Esc | Close a pop-up or menu |
On a Mac using Safari, you may need to turn on keyboard navigation for links in Safari's settings first.
The 10-minute test
Put your mouse aside, open your store's homepage and press Tab.
- Can you see where you are? Every time you press Tab, something on the page should be clearly highlighted. Shopify's theme guidance says all interactive elements should have a clear visual indicator when they have keyboard focus (Accessibility for themes (Shopify Help Center)).
- Is there a "Skip to content" link? It is often the first thing that appears when you press Tab. It saves keyboard users from tabbing through the whole menu on every page.
- Pop-ups: if a newsletter or cookie pop-up appears, can you reach its close button with Tab and close it with Enter or Esc? Does focus return to the page afterwards?
- Main menu: can you open drop-down menus and reach every item?
- Search: can you open search, type, and reach the results?
- Collection page: can you use filters and sorting, and open a product?
- Product page: can you choose size and color options, change quantity, and press Add to cart? Can you browse the image gallery?
- Cart: can you open the cart (including slide-out cart drawers), change quantities, remove an item and reach Checkout?
- Does focus ever get stuck or disappear? If pressing Tab stops moving, or the highlight vanishes into hidden content, note where.
What to do with the results
- Write down each place you got stuck, with the page address and what you were trying to do.
- Problems are often caused by a specific app (pop-ups, reviews, chat, quick view). Try temporarily disabling the app on a copy of your theme to see whether it is the cause.
- Don't remove the browser's focus outline in your theme's CSS without replacing it with something equally visible (Accessibility for themes (Shopify Help Center)).
Our free scan covers the automated side. This keyboard test covers something it can't, and together they give a much clearer picture.
Check your own store in a minute or two. Our free scanner opens your homepage, a collection page, a product page and your cart in a real browser and lists the problems it can detect automatically, in plain English.
Technical fixes, not legal advice. This guide explains website accessibility from a technical point of view. We are not a law firm, and nothing here is legal advice. No scan, fix or guide can guarantee legal compliance, the outcome of any demand letter or lawsuit, or protection from future claims. If you have received a legal claim, please consult a qualified attorney about it.
Sources
- Guidance on Web Accessibility and the ADA (ADA.gov, U.S. Department of Justice, March 18, 2022)
- WCAG 2 at a Glance (W3C WAI)
- Accessibility for themes (Shopify Help Center)