Anchors used as buttons need button semantics and keyboard support

Rule anchor-is-button · Links & buttons · impact moderate · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

An <a> with an onclick but no href is not focusable or keyboard-operable and exposes no role. Anchors with a placeholder href ("#", "javascript:") are announced as links but act as buttons: Space does not activate them and "#" scrolls to the top of the page. Screen-reader and keyboard users can’t reliably reach or operate either.

How to fix#

Use a real <button> for actions. If you must use an anchor, add role="button", tabindex="0", and Enter/Space key handlers.

Example#

<a onclick="save()">Save</a>

<button onclick="save()">Save</button>

Example#

<a onclick="save()" role="button" tabindex="-1">Save</a>

<a onclick="save()" onkeydown="handleKey(event)" role="button" tabindex="0">Save</a>

role="button" alone is not enough: tabindex="-1" keeps the anchor out of the tab order, and without key handlers Enter/Space do nothing.

Example#

<a href="#" onclick="openMenu()">Menu</a>

<button type="button" onclick="openMenu()">Menu</button>

href="#" and javascript: anchors are buttons in disguise — announced as links, not activatable with Space.

WCAG success criteria#

4.1.2 Name, Role, Value — Level A#

Every UI component must expose a correct name, role, and (where relevant) state/value to assistive technology.

Understanding 4.1.2

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549

References#

• ARIA APG — Button