• Success Criterion 1.3.1
  • Conformance level A

Custom Toggle Control Built With No Role or State at All

1.3.1 — Info and Relationships

Scenario

Setting

A dating app's profile setup

What’s wrong

Custom checkboxes/toggles as styled divs with no role/state (also 4.1.2).

Example 

<div class="toggle-switch off" onclick="toggleDiscovery(this)"></div>
<span>Show me on Discovery</span>

Why it matters

A screen reader user tabbing to this control hears nothing at all, since a bare div announces no role, name, or state.

How to test

Focus a custom checkbox/toggle with a screen reader: it should announce role checkbox/switch and its checked state — a styled div with no role/aria-checked fails.

How to fix

A custom toggle needs role, a name, and a checked state in code; none of that comes free from styling alone.

<button role="switch" aria-checked="false" aria-label="Show me on Discovery" onclick="toggleDiscovery(this)" class="toggle-switch off"></button>

Outcome

A user hears Show me on Discovery, off and can turn it on with a single keypress.

Who is affected

Screen reader and switch users can't tell the control exists, let alone whether Discovery is on or off.

Learn more

Related scenarios