• Success Criterion 4.1.2
  • Conformance level A

Toggle Button Showing State Only Through Color or Icon Change

4.1.2 — Name, Role, Value

Scenario

Setting

A used-car marketplace's listing filter

What’s wrong

Toggle buttons using color/icon change only, no aria-pressed (the pressed state in code).

Example 

<button class="filter-chip active" onclick="toggleFilter('noAccidents')">No accident history</button>
<!-- the chip fills solid blue via a CSS class when active, but the button has no aria-pressed at all -->

Why it matters

A shopper using a screen reader cannot tell whether the no-accident-history filter is currently applied, since the only signal is the chip's fill color.

How to test

Inspect a toggle button in DevTools: check for aria-pressed (or role="switch" with aria-checked) reflecting its state — missing fails.

How to fix

Any two-state filter toggle needs aria-pressed kept in sync with its visual state, updated in the same function that flips the CSS class.

<button class="filter-chip" aria-pressed="true" onclick="toggleFilter('noAccidents')">No accident history</button>
<!-- flip aria-pressed in toggleFilter() alongside the "active" CSS class -->

Outcome

A shopper hears "pressed" and knows the no-accident-history filter is already active before adjusting their search.

Who is affected

Screen reader users narrowing used-car listings by filter chips cannot confirm which toggles are currently applied.

Learn more

Related scenarios