Skip to content
StoreA11y

WooCommerce · 2.1.1 Keyboard (Level A)

Scrollable areas cannot be reached by keyboard on WooCommerce

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 WooCommerce

Everything below is done from Appearance > Theme File Editor, or your child theme over SFTP. 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

Product gallery slider markup and any .table-responsive wrapper in the child theme

Paths given for Storefront, Astra, Flatsome and other WooCommerce themes. 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).