Forms & Controls

Link vs. Button

Guidance on when to use a hyperlink (navigation) versus a button (action) — the most common real-world defect.

Last verified against WCAG 2.2 and WAI-ARIA APG 1.2 on 2026-07-02.

Implementation

link-vs-button-pattern.tsx

<a href="/pricing">View pricing</a>

<button type="button" onClick={addToCart}>
  Add to cart
</button>

/* Both are fully accessible for free: correct role, correct name,
   Tab-focusable, and the native activation keys AT users expect. */

Live demo

View pricing

Required roles, states & properties

Required roles, states, and properties
Element	Attribute	Why
Navigation control	<a href> (native)	The browser provides link role, accessible name from text content, Tab focusability, and Enter-to-activate — no ARIA required.
Action control	<button type="button"> (native)	The browser provides button role, accessible name, Tab focusability, and both Enter- and Space-to-activate — no ARIA required.
Reimplemented link (if you must)	role="link" + tabIndex={0} + Enter keydown	Every one of these three pieces is required to match native <a> behavior; omitting any one silently breaks keyboard/AT access.
Reimplemented button (if you must)	role="button" + tabIndex={0} + Enter/Space keydown	A custom button must handle both Enter and Space — native <button> does, and testers should check for both, not just one.

Keyboard interaction model

Keyboard interaction model
Key	Behavior
`Enter (on a link)`	Activates a native <a href>, navigating to its destination. This is the only key a real link responds to.
`Enter or Space (on a button)`	Activates a native <button>, performing its action. Real buttons respond to both keys — testers should verify both, not just one.
`Tab / Shift+Tab`	Moves focus to/from links and buttons normally, since both are natively focusable elements.
`(any key, on a div/span with only onClick)`	Nothing happens — an element with no role, no tabIndex, and no keydown handler cannot receive focus or respond to any key at all.

Focus management rules

Both links and buttons must be reachable via Tab in the same order they appear visually — never skipped, never trapped.
Activating a link navigates the page; focus resets naturally to the top of the destination document.
Activating a button performs its action in place without moving focus away from the button, unless the action itself opens new content (e.g. a dialog) that should receive focus.

WCAG 2.2 success criteria mapping

WCAG 2.2 success criteria that apply to this component
SC	Name	Level	Why it applies
1.3.1	Info and Relationships	A	Structure and relationships conveyed visually are also programmatically determinable.
2.1.1	Keyboard	A	All functionality is operable through a keyboard interface with no specific timing.
4.1.2	Name, Role, Value	A	For all UI components, name, role, and value are programmatically determinable; states and changes are announced.

Find what you need, instantly