Skip to content
StoreA11y

WooCommerce · 4.1.2 Name, Role, Value (Level A)

Focusable elements have no interactive role on WooCommerce

Some elements were made focusable with tabindex but are still announced as plain text or a generic group. The keyboard user lands on something the screen reader describes as nothing, with no indication of what pressing Enter would do.

Frequently litigated

Focusable elements with no role are pleaded as keyboard traps or dead ends.

Which WCAG criterion this fails

  • Does not meet 4.1.2 Name, Role, Value (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. Replace <div tabindex="0" onclick> with a real <button type="button"> — that gives you the role, the keyboard handling and the focus ring for free.
  2. If the element must stay a div, add the correct role (button, link, tab) and handle both Enter and Space in the JavaScript. Native elements handle both; div click handlers only fire on Enter.
  3. Remove tabindex="0" from elements that are not interactive at all — decorative wrappers should not be in the tab order.
  4. Never use a positive tabindex (tabindex="3"); it reorders the whole page unpredictably. Only 0 and -1 are safe.

Where this usually lives

Theme JS click handlers on divs, and page-builder clickable containers

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

<!-- Wrong -->
<div tabindex="0" onclick="openCart()">Cart</div>

<!-- Right -->
<button type="button" onclick="openCart()">Cart</button>

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: medium. Rule id: focus-order-semantics (axe-core).