WCAG for Ecommerce
WCAG 4.1.2 Name Role Value — ARIA Done Right
Custom UI controls must expose an accessible name, role, and state so assistive technologies can understand and operate them.
For D2C teams, this is not just a standards question. It is a revenue-path question. When a WCAG criterion fails on a product page, filter interface, or checkout form, it creates both customer friction and legal exposure.
What this means in plain English
Custom UI controls must expose an accessible name, role, and state so assistive technologies can understand and operate them.
On ecommerce sites, this criterion matters because shoppers are rarely reading one clean article. They are evaluating products, interacting with filters, switching variants, reviewing shipping promises, and moving through forms under time pressure. When the underlying accessibility rule breaks, the buying journey breaks with it.
Why it matters for ecommerce
Variant selectors
accordion FAQs
filter chips
cart drawers and tabs
ADA complaints against online stores usually do not focus on abstract theory. They focus on failed tasks: a user cannot understand a product image, cannot interpret a discount, cannot complete a form, or cannot recover from an error. That is why even one overlooked success criterion can create outsized legal and commercial risk.
How to check if you comply
Manual test
Inspect custom controls with a screen reader or accessibility tree. Confirm each control has the right role, name, and changing state values.
Automated test
Automated tools catch some missing names and roles, but manual testing is required for state changes like expanded, selected, or pressed.
How to fix violations
Prefer native controls first. When custom UI is necessary, wire up ARIA names, roles, and state changes accurately.
<button aria-expanded="false" aria-controls="faq-1">Shipping details</button>The best fix is usually at the component level. If the problem lives in a reusable product card, accordion, swatch selector, or form field, repair the shared component once instead of chasing the same violation page by page.
Common mistakes stores make
- Custom buttons built from spans
- missing aria-expanded on accordions
- swatches with no accessible name
- tabs missing selected state
These mistakes recur because ecommerce teams optimize for speed, visual merchandising, and third-party integrations. Accessibility gets treated as cleanup work instead of release quality, so the same defect reappears with every new campaign or theme update.
Why this matters legally
In 2025, 8,667 ADA lawsuits were filed across federal and state courts. Plaintiff firms do not need every WCAG failure to build pressure. They only need enough reproducible barriers to show that disabled shoppers cannot access the same buying journey. That makes criteria like WCAG 4.1.2 Name Role Value — ARIA Done Right commercially and legally material, not academic.
Related reading
FAQs
What does 'name role value' mean in plain English?
Assistive technology must know what a control is, what it is called, and what state it is currently in.
Is ARIA always needed?
No. Native buttons, inputs, and links are better when they can do the job.
Where do ecommerce teams fail most often?
Variant pickers, filter panels, tabs, and custom dropdowns are the usual hotspots.