• 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 

<div class="btn-submit" onclick="submitClaim()">Submit Claim</div>

Why it matters

A keyboard-only claimant tabbing through the form skips right past this div, since it can never receive focus.

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

A real button element is focusable and announced automatically; a styled div needs extra code just to catch up.

<button type="submit" onclick="submitClaim()">Submit Claim</button>

Outcome

A claimant tabs to Submit Claim and presses Enter, filing the claim without touching a mouse.

Who is affected

Keyboard users and screen reader users trying to file a claim have no way to reach or activate this control.

Learn more

Related scenarios