WCAG 4.1.2: Name, Role, Value
Level AQuick answer: Custom UI components need correct accessible names, roles, and state values so assistive tech can understand and operate them.
What This Means
On ecommerce sites, Name, Role, Value usually shows up in repeating storefront components such as product cards, PDP media, search results, cart drawers, checkout forms, and support content. If the live experience depends on patterns like custom accordions and tabs are built from divs with click handlers only. or quantity steppers expose no current value to screen readers., disabled shoppers can lose context or get blocked before purchase.
This criterion matters because D2C teams often fix the homepage but miss reusable app blocks, campaign pages, and mobile-specific UI. The practical standard is simple: build the same outcome for keyboard users, screen-reader users, low-vision users, and anyone relying on captions, labels, structure, or predictable behavior.
For Shopify, WooCommerce, and custom storefronts, the fastest remediation path is usually template-level work. Fix the repeated component once, then retest every place it appears across browse, buy, and post-purchase journeys.
Common Violations on Ecommerce Sites
- Custom accordions and tabs are built from divs with click handlers only.
- Quantity steppers expose no current value to screen readers.
- Wishlist toggles do not announce pressed or selected state.
- Custom selects hide native semantics without replacing them.
How to Fix It
Start with the live customer journey, not isolated components in Storybook or Figma. Audit the problem on category pages, product detail pages, quick views, cart, checkout, account, and help templates.
- Use native elements first; add ARIA only when custom UI is unavoidable.
- Expose current state with attributes like aria-expanded, aria-selected, or aria-pressed.
- Keep labels in sync with visual text and state changes.
- Audit every design-system widget before it is reused across templates.
On Shopify, fix the theme section or app block that repeats the defect. On WooCommerce and WordPress, update the template override or plugin output. In custom React or headless storefronts, move the fix into shared components so merchandisers cannot reintroduce the issue with every campaign.
Code Example
<!-- Before -->
<div class="accordion-toggle">Shipping details</div>
<!-- After -->
<button aria-expanded="false" aria-controls="shipping-panel">Shipping details</button>FAQ
What is WCAG 4.1.2?
Custom UI components need correct accessible names, roles, and state values so assistive tech can understand and operate them.
How does WCAG 4.1.2 affect ecommerce sites?
It affects ecommerce anywhere shoppers interact with custom accordions and tabs are built from divs with click handlers only. and quantity steppers expose no current value to screen readers. If those patterns are inaccessible, customers can miss product information, fail forms, or abandon checkout.
How to fix WCAG 4.1.2 violations?
Start by auditing the live storefront, then Use native elements first; add ARIA only when custom UI is unavoidable.; Expose current state with attributes like aria-expanded, aria-selected, or aria-pressed.; Keep labels in sync with visual text and state changes.. Prioritize templates and apps that repeat the issue across product, cart, checkout, and account pages.
Check if your store passes WCAG 4.1.2 → Free ADA Compliance Scan