Fixing Name, Role, Value on Squarespace (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.
Squarespace — where to look
Components added through code blocks.
What to do
Use button rather than div in code blocks. Squarespace's built-in accordion block manages ARIA already — do not reimplement it.
Verification status
Not yet confirmed against a live installation. The paths and setting names below describe the general structure of Squarespace 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 Webflow
- Fixing Name, Role, Value on Wix
The full criterion
Read the full explanation of WCAG 4.1.2 Name, Role, Value, or the formal W3C definition.