• Success Criterion 4.1.2
  • Conformance level A

Button Built From a Link With No Real Destination

4.1.2 — Name, Role, Value

Scenario

Setting

A public library's catalog search

What’s wrong

Buttons implemented as <a href="#"> or <a> with no href (role wrong — keyboard semantics broken).

Example 

<a href="#" onclick="placeHold(bookId); return false;">Place hold</a>
<!-- styled and used as a button, but it's an anchor with a placeholder href -->

Why it matters

A screen reader user hears "Place hold, link" and expects to navigate somewhere, not trigger an action.

How to test

Inspect an <a> tag used as a button (no real href, or href="#"): check whether the role and keyboard behavior match a real link — if not, it fails.

How to fix

Use a real anchor with a genuine href only for navigation, and a button for anything that triggers an action.

<button type="button" onclick="placeHold(bookId)">Place hold</button>

Outcome

A patron places a hold on a book and hears it correctly announced as a button, not a link.

Who is affected

Screen reader users and keyboard users placing holds on library books get confusing link semantics for an action control.

Learn more

Related scenarios