WCAG A · 2.1.1, 2.4.1Checked on paid plansEU · US
Clickable things you can’t reach with the keyboard
Does everything on a website need to work with a keyboard?
Yes. Everything you can do with a mouse must work with a keyboard (WCAG 2.1.1, the web accessibility standard). On stores the usual misses are swatches, hover-only menus and quick-add buttons built from a plain <div>.
Why it matters
If a shopper can’t reach the size picker, they can’t buy. Keyboard access also underpins screen readers, switch devices and voice control, so one clickable <div> can block several groups of customers at once.
How to fix it
Shopify
- Check your theme first: current Shopify themes such as Dawn use real buttons. Problems usually come from apps or custom code.
- For swatch, quick-add or wishlist apps, ask the app’s support for a keyboard-friendly version or switch app.
- In custom sections (Edit code), replace clickable <div> or <span> elements with <button type="button">.
WooCommerce
- Variation swatch and quick-view plugins are the usual source; check their settings for a keyboard or accessibility option.
- Test with the default Storefront or Twenty Twenty-Five theme to see whether the theme or a plugin causes it.
- Make custom changes in a child theme so updates keep them.
In the code
- Use a real <button> or <a href> instead of a clickable <div> or <span>.
- If it must stay a <div>, add tabindex="0", a role and Enter/Space key handling.
- Point the skip link at an element that exists, e.g. href="#main" and <main id="main">.
- Give the target tabindex="-1" so focus really moves there.
Automated tools can’t open every menu, try every swatch or finish a checkout. They also can’t tell whether something reachable actually works with Enter and Space. Try your own key journey, from product to cart, by hand.
The standard behind this rule
A plain summary, not legal advice.