So what is the difference between a button and a link and why does it matters? Well semantics is important and especially assistive technology as for example screen-reader or voice command need correct semantics for it to work. But it is also useful for browsers and search engines.
It is technically doable to change all links to buttons and then add an event that redirects the user but in this case we loose the user experience and search engines will not be able to crawl our links. At the same time it is possible to use links for every action and add JavaScript code on them to trigger different actions but then we are causing a lot of confusion to assistive technology and search engines.
Links are for destinations and buttons are for actions
If we must navigate to an internal or external page, then we must use a link. The same goes for “same page navigation” – we can use anchors to move to sections on same page for example. There are many benefits of links but main benefits are:
- user can decide to open link in new window, so that it can be visited at a later time,
- user can save a link to bookmarks so that it can be visited at a later time from a central persistent location (that can also be synced between devices),
- user can be informed if link was visited before and therefore get better control over which links were visited and which were not,
- assistive technology can present users with list of only links and user can therefore get a better understanding about the page content as well,
- search engine can crawl all links we provide and then connect them in an map of links so that it can better understand what the content is about.
So if we are consistent and use links for locations then we provide good usability for users and assistive technologies alike.
We must make sure that link text is always providing meaning – also if link it taken out of context.
assistive technology can extract only links so they must be understandable also when missing surrounding context.
Buttons on the other hand should only be used for actions, especially when we have forms or other interaction elements on the page. A button will also be pronounced by assistive technologies, so users will expect it will make an action and not navigate to other page for example.
It is possible to style a link as a button and a button as a link, but be cautious
We are used of “call to action buttons” (CTA) and similar elements that can actually also be normal links that happen to look like buttons. It is OK if we use them strategically and if we adhere to all the rules for contrast, focus indicators and so on. Should we just make all links look like buttons then? No, I think that would do more harm than good. A single, strategically placed CTA button will be understandable, but we should keep the best practice of underlined links when links are a part of inline text.
It is smart to keep consistent patterns
If sighted user sees an underlined sentence in a paragraph then it is most probably a link and user expects to navigate to it when interacting with it. So it is wise to keep old and working patterns to lower the burden of thinking. We can use other visual styles if we respect the contrast and focus rules, but should we really? Personally I like to use underlined text for links as it does not make sighted users think. I do not like to break their expectations.
Single page applications must still follow rules
Sometimes it becomes a bit difficult to decide – should we use a button for navigating to next page in a single page application? As this is technically speaking not a real navigation? Well I really believe we should keep the same patterns as our users expect for a normal website. If we “navigate” then use a link and if we “do” – then use a button. There are some additional dilemmas for single page applications that are still being resolved when thinking of accessibility (like where to put the focus for example), but that will be a matter of some future post.
