The power of links

The buttons vs. links debate is so prevalent in the accessibility community that it's almost a joke at this point. Articles like H. Locke's Links vs. Buttons go into a lot of details about some of the issues that come about when styling links as buttons (and vice versa).

It all comes down to the matter of what the user expects when they see the element on the page.

Rather than trying to solve this debate, I'll dive into the point of expectations a little bit more. When a user sees something that looks like a link, what goes through their mind?

What do you expect when you see a link?

1. You can activate it with the enter key

Links and buttons can both be activated with the enter key. Buttons, however, can also be activated by the space key.

If you try to use the space key when a link is focused, you'll find yourself scrolling down the page.

There is even a bit of a difference between how the space and enter keys activate buttons.

• space will activate the button on key up; you could even cancel out of the button by tabbing out before you release the space key
• enter will activate the button on key down

2. You can right click it to open it in a new tab

Buttons and links have entirely different context menus. When a link is right clicked, depending on the browser that you are using, you may see options to:

1. Open the link in a new tab
2. Open the link in a new window
3. Copy the link URL
4. Bookmark the link

3. You can see what the URL is by hovering over it

In most browsers, when you hover over a link, you'll see the full (or truncated, if it's long) URL in the bottom left of your browser window on a light gray background.

This can be helpful for users who are not sure that they want to visit the page. If it's another page on the same site or a page on a site that they've visited before, they may be more inclined to click it.

4. If it's purple, it's a page that you've visited

It's pretty crazy that there's a way to style links based on the user's entire browsing history. By default, in all browsers, unvisited links are underlined and blue, while visited links are underlined and purple.

While this is a possibility and a simple CSS selector away from employing, it's criminally underused: outside of GOV.UK, I haven't really seen it on any large sites.

Why does this matter?

Styling links as buttons is so common on the web that users aren't really surprised when it's happening. But by doing this (and the inverse, styling buttons as links), we're losing out: keyboard users could run into some trouble, or some of the utilities inherent to links for sighted users (context menu, viewable URL) could be hidden away.