- 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
Here's a real case from a dating app's profile setup: custom checkboxes/toggles as styled divs with no role/state (also 4.1.2).
Why it matters
Screen-reader, braille, and reading-tool users who depend on coded structure rather than visual layout. In this case (a dating app's profile setup), they can't tell what's going on without extra effort.
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
Build custom checkboxes/toggles with the proper role and aria-checked (the on/off state in code) state.
Outcome
Once corrected, a dating app's profile setup lets them navigate the content in a sensible order.
Who is affected
Screen-reader, braille, and reading-tool users who depend on coded structure rather than visual layout.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Text Styled to Look Like a Heading Instead of Coded as One
- Text Columns Faked With Spaces Instead of Real Table Markup
- Table Layout Faked With Spaces Instead of Real Table Code
- Clickable Div Acting as a Link Button With No Real Role
- Structural HTML Tags Used Purely for Visual Styling
- Layout-Only Table Wrongly Coded With Real Header Cells