Fixing Name, Role, Value on Shopify (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.
Shopify — where to look
Theme code: snippets/cart-drawer.liquid, sections/header.liquid, filter and variant picker components.
What to do
Use a real button element for anything clickable. Prefer the native details/summary disclosure pattern where it fits — the browser then manages the expanded state for you and there is no aria-expanded to keep in sync. Only manage aria-expanded by hand when you build the trigger from a plain button. Make ids unique per product in repeating lists.
Verification status
Checked by reading the platform’s own source code. Dawn uses native details/summary for the cart drawer rather than a hand-managed aria-expanded button, which is why its header carries no aria-expanded at all. Copying an aria-expanded pattern onto a details element would be wrong.
Source: https://github.com/Shopify/dawn/blob/main/snippets/cart-drawer.liquid
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 WooCommerce
- 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.