Name, Role, Value
Every UI component must expose a name, role, and (where relevant) value to assistive technology — typically through native HTML or ARIA attributes.
What it requires
A button needs a programmatic name ("Add to cart"), a programmatic role (`button`), and — if it is stateful — a value or state (`aria-pressed="true"`, `aria-expanded="false"`). Native HTML elements provide all three for free; custom widgets must explicitly declare them through ARIA.
Common failures: icon-only buttons with no aria-label, custom dropdowns with no role="combobox" or aria-expanded, tab panels with no role="tab" / role="tabpanel" connection.
Common Shopify failure
Theme cart-icon button at the top right is `<a href="/cart"><svg>...</svg></a>` with no accessible name. Screen readers announce "link" with no description.
How to fix it
Add `aria-label="Open cart"` to the link and `aria-hidden="true"` to the inner SVG. For icon-only buttons that toggle state (filter open/closed), add `aria-expanded` that updates with the state.
Primary source: W3C — WCAG 2.0 Understanding 4.1.2