Skip to content
StoreA11y

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

ARIA attributes used where they are forbidden on WooCommerce

Some elements carry an ARIA attribute that their role explicitly forbids — most often aria-label on a plain <div>, <span> or <p>. A label on an element with no role is ignored by some screen readers and read instead of the visible text by others, so the same page is announced differently depending on the software.

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. Remove aria-label and aria-labelledby from generic elements: <div>, <span>, <p>, <li> without a role.
  2. If the element needs a name, give it a role that supports one — role="region" with aria-label, role="group", or a real landmark element — but only if it genuinely is one of those.
  3. If the intent was extra context for a control, put the text in the control itself, or use aria-describedby on the control instead.
  4. This most often appears where an aria-label was added to a wrapper <div> hoping it would be announced. It will not be; wrap the meaningful content in a real element instead.

Where this usually lives

Page-builder blocks and theme wrappers that carry an aria-label

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

<!-- Forbidden: a plain div cannot take a name -->
<div aria-label="Product card">…</div>

<!-- Either drop it -->
<div class="card">…</div>

<!-- or give it a role that supports a name -->
<div role="group" aria-label="Wool Runner, £95">…</div>

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: aria-prohibited-attr (axe-core).