- Success Criterion 1.3.1
- Conformance level A
- W3C reference F42
Clickable Div Acting as a Link Button With No Real Role
1.3.1 — Info and Relationships
Scenario
Setting
An insurance company's claims form
What’s wrong
Something is made to act like a link or button using script only (a clickable div/span) — it isn't announced as a link/button and often can't be used by keyboard.
Example
An insurance company's claims form shows the problem clearly: something is made to act like a link or button using script only (a clickable div/span) — it isn't announced as a link/button and often can't be used by keyboard.
Why it matters
Screen-reader, braille, and reading-tool users who depend on coded structure rather than visual layout. In this case (an insurance company's claims form), they can't tell what's going on without extra effort.
How to test
Tab to the clickable div/span in DevTools: check the Accessibility Tree — if it has no role of link/button and no keyboard handler, it fails.
How to fix
Use a real <a href> or <button> (or add the correct role, tabindex (keyboard-focus setting) and key handling) so it works as a link/button for everyone.
Outcome
Once corrected, an insurance company's claims form 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)
- Technique Related technique (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
- Structural HTML Tags Used Purely for Visual Styling
- Layout-Only Table Wrongly Coded With Real Header Cells
- Tabular Data Placed Inside a Preformatted Text Block