Skip to content
StoreA11y

Shopify · 2.1.1 Keyboard (Level A)

Scrollable areas cannot be reached by keyboard on Shopify

Some regions scroll but contain nothing focusable, so a keyboard-only shopper can never scroll them. On a store this is usually a horizontally scrolling product carousel or an overflowing size-chart table — the content past the first screenful is simply unreachable without a mouse.

Which WCAG criterion this fails

  • Does not meet 2.1.1 Keyboard (Level A)

How to fix it on Shopify

Everything below is done from Online Store > Themes > Edit code. Take a copy of the theme before editing.

  1. Add tabindex="0" to the scrolling container so it can receive focus and be scrolled with the arrow keys.
  2. Give it an accessible name as well — role="region" with aria-label="Size chart" — otherwise it is announced as an unlabelled group.
  3. Add a visible focus outline on the container; without one, sighted keyboard users cannot see where focus went.
  4. If the region already contains links or buttons, this rule does not fire; prefer real focusable content over tabindex where you can.

Where this usually lives

assets/component-slider.css, snippets/slider.liquid, sections/main-product.liquid (size-chart tables), .rte table wrappers

Paths given for Dawn and its derivatives (Sense, Craft, Refresh, Studio). A heavily customised theme may differ; the CSS selector in your scan report points at the exact element.

Code

<div class="table-scroll"
     tabindex="0"
     role="region"
     aria-label="Size chart">
  <table>…</table>
</div>

.table-scroll { overflow-x: auto; }
.table-scroll:focus-visible { outline: 2px solid #1a4f8b; outline-offset: 2px; }

How to confirm it is fixed

Re-run the scan. This rule should drop out of the findings entirely. If the instance count falls but does not reach zero, the same defect exists in another template — product cards and quick-view modals are the usual second home for it.

Effort: low. Rule id: scrollable-region-focusable (axe-core).