R&D notes

Button and link confusion

Jonathan Robert Pool

If you are not sure how buttons and links differ on the web, you’re not to blame. Web pages often confuse them with each other. When they do, you can be misled.


User interfaces usually contain elements that let users do things. Two of the most common are links and buttons. But confusion and error can arise from links pretending to be buttons and buttons pretending to be links. Making the distinction clear is part of digital accessibility.

Nonetheless, one of the most common decisions made by creators of user interfaces is to create a link that looks like a button or create a button that looks like a link.

How they differ

Links and buttons look different

Links and buttons behave differently

What goes wrong

So, transvestite links and buttons mislead users not only by their appearance, but also by their behavior. Users who listen to the page with a screen reader, too, can be misled by code that assigns a role of button to a link or link to a button. Then the screen reader will tell them it’s one thing when it’s really the other.

Worst case: A button that takes an irreversible action (Yes, I confirm that I am waiving my rights.) pretends to be a link, so the user presses SPACE or SHIFT-SPACE when trying to scroll the page but unexpectedly presses the button instead. Web Content Accessibility Guidelines 2.1 Success Criterion 3.3.4 seeks to protect users from such involuntary actions.

For authoritative advice on treating buttons and links distinctly, see WAI-ARIA Authoring Practices 1.1. Others, such as Nils Lauk, Patrick H. Lauke, and qutax, have explained this, too.


Real button

Link claiming to be a button

Surprise me

Real link

Real link to this blog (in a new tab)

Button claiming to be a link