All coverage
wcag 2.1.1, level a

Keyboard

Everything works with a keyboard alone: menus, drawers, variant pickers, filters and add to cart.

Who it affects

Screen reader users, people with tremors, and anyone who can't use a mouse move through the store with the Tab and Enter keys.

What a scan checks

  • Elements that respond to a click but can't be reached with the Tab key, on every page.
  • Menus, drawers and filters opened with the keyboard on one page of each kind, to find ones that only open with a mouse.

How it gets fixed

  • Clickable elements join the Tab order and work with Enter and Space, mouse-only openers open with Enter, and hover menus open on keyboard focus using your theme's own hover rules.

Every change is shown before it is applied, recorded with the code it replaced, and reverts in one click.

Before and after, on real stores

Found by our scanner on live Shopify stores and fixed in a test browser with the same change the app makes. The stores are described rather than named, and their names are taken out of the code.

Product tabs that only a mouse can switch

A tire inflator brand on a customized Debut theme

Before
<div class="sec3_tab-col active" id="tab_col_1">
<div class="sec3_tab-col" id="tab_col_2">
After
<div data-sr-keys role="button" tabindex="0" class="sec3_tab-col active" id="tab_col_1">
<div data-sr-keys role="button" tabindex="0" class="sec3_tab-col" id="tab_col_2">

Each tab listened for clicks but couldn't be reached with Tab. Now it takes focus, says it is a button, and SiteRemora's script turns Enter and Space into the click the theme already handles.

Attach a remora to your shop

Install from the App Store. The first scan is free, takes about a minute, and tells you exactly where you stand.