• Success Criterion 2.1.1
  • Conformance level A
  • W3C reference F42

Clickable Element Acting Like a Link With No Real Keyboard Role

2.1.1 — Keyboard

Scenario

Setting

An online marketplace's seller dashboard

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="order-row" onclick="location.href='/orders/482'">
  Order #482 - Shipped
</div>

Why it matters

A seller navigating by keyboard cannot tab to the order row, and a screen reader announces it only as plain text.

How to test

Tab to a div/span styled as a link: check the Accessibility Tree in DevTools for role=link and confirm Enter activates it — missing either fails.

How to fix

A real anchor gets focus, keyboard activation, and an accessible name for free; a div with onclick gets none of it.

<a class="order-row" href="/orders/482">
  Order #482 - Shipped
</a>

Outcome

A seller reaches the order row with Tab and opens it by pressing Enter, just like a click.

Who is affected

Screen reader users and keyboard-only users lose access to an entire row of order data that a mouse user can click freely.

Learn more

Related scenarios