Fixing Name, Role, Value on Webflow (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.
Webflow — where to look
Designer, Custom attributes on an element; accordions built with Interactions.
What to do
Build clickable elements from the Button element rather than a Div Block. For Interactions-driven panels, update aria-expanded through a custom attribute and a small script.
Verification status
Not yet confirmed against a live installation. The paths and setting names below describe the general structure of Webflow and menu names vary by version, theme and plugins. Where we have checked a step against the platform's own source, this box says so and links to 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 WooCommerce
- 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.