Name, Role, Value — interactive state announcement
When an interactive component changes state (expanded/collapsed, pressed/unpressed, checked/unchecked), the new state must be programmatically announced to assistive technology — typically via aria-expanded, aria-pressed, aria-checked.
What it requires
A more focused subsection of WCAG 4.1.2. Visual state changes are useless to screen-reader users without programmatic state. A "Show details" disclosure button that visually rotates an arrow icon must announce its expanded/collapsed state via `aria-expanded` so screen-reader users hear "Show details, collapsed" → click → "Show details, expanded".
Standard ARIA pattern set: `aria-expanded` for disclosures, `aria-pressed` for toggle buttons, `aria-checked` for custom checkboxes, `aria-selected` for tabs/listbox options, `aria-current="page"` for current navigation item.
Common Shopify failure
Theme accordion / FAQ widget toggles open/closed visually with arrow icon rotation but ships without `aria-expanded` on the toggle button. Screen-reader users have no way to know whether the section is currently expanded.
How to fix it
AccessComply audits toggle buttons + adds `aria-expanded` paired to the open/closed state managed by theme JavaScript. The button stays visually identical; the accessibility tree gains the state declaration.
Primary source: W3C — WCAG 2.0 Understanding 4.1.2 (state)