Fixing Name, Role, Value on WooCommerce (WCAG 4.1.2)
Every interactive element must expose a name (what it is), a role (what it does) and its state (expanded, selected) to assistive technology.
Why it matters
On a store this shows up in the cart, search and filter components. An Add to Cart control built from a div with a click handler cannot be focused with a keyboard and does not announce itself as a button — the customer simply cannot add the product. That is a lost sale, not a degraded experience.
WooCommerce — where to look
Theme templates and, more often, filter and variation plugins — this failure usually arrives with a plugin.
What to do
Audit plugin output; many filter plugins emit div-based controls. Prefer a plugin that uses native elements, or correct the markup through a filter hook.
Verification status
Checked by reading the platform’s own source code. Core uses native select and button elements, which expose name, role and state without any ARIA. That is why this failure almost always arrives with a filter or swatch plugin that emits div-based controls instead.
Reference themes change. If your store runs a different or older theme, confirm the file before editing it.
How to verify the fix
- Put the mouse aside and try to add a product to the cart using only Tab and Enter or Space.
- Open and close an accordion and watch aria-expanded change in the browser's accessibility inspector.
- Check the page for duplicate ids.
Other platforms
- Fixing Name, Role, Value on Shopify
- Fixing Name, Role, Value on Webflow
- Fixing Name, Role, Value on Wix
- Fixing Name, Role, Value on Squarespace
The full criterion
Read the full explanation of WCAG 4.1.2 Name, Role, Value, or the formal W3C definition.