Annex

Fixing Keyboard on Shopify (WCAG 2.1.1)

Everything a customer can do with a mouse must also be possible with a keyboard alone.

Why it matters

This is the failure that ends a sale outright. If the size selector, the cart drawer or the payment step cannot be reached with Tab and operated with Enter or Space, the customer does not get a degraded experience — they get no way to buy at all. It affects far more people than screen reader users: anyone with a motor impairment, anyone using voice control or a switch device, and anyone whose trackpad has failed. Keyboard support is also what makes the rest of accessibility testable, so a keyboard failure usually indicates several others.

Shopify — where to look

Theme JavaScript: the custom elements in assets/global.js — menu-drawer, modal-dialog, quantity-input, variant-selects.

What to do

Prefer native select and button elements for variant and quantity controls. For drawers and modals, move focus in on open, trap it while open, close on Escape and return focus to the trigger. Dawn ships helpers for exactly this; use them rather than writing new open/close logic.

Verification status

Checked by reading the platform’s own source code. Dawn implements trapFocus and removeTrapFocus, handles the Escape key, and builds its drawers and modals as custom elements around native details/summary. Keyboard failures on a Dawn-based store usually come from an app or a custom section that bypasses these helpers, not from the theme.

Source: https://github.com/Shopify/dawn/blob/main/assets/global.js

Reference themes change. If your store runs a different or older theme, confirm the file before editing it.

How to verify the fix

  1. Unplug the mouse. Genuinely — do not just decide not to use it.
  2. From the top of a product page, complete a purchase using only Tab, Shift+Tab, Enter, Space and the arrow keys.
  3. Open the cart drawer and confirm focus moves into it, that Escape closes it, and that focus returns to the control that opened it.
  4. Tab through the whole page once and confirm focus never gets stuck in an embedded widget.

Other platforms

The full criterion

Read the full explanation of WCAG 2.1.1 Keyboard, or the formal W3C definition.