Skip to content Skip to footer

When a button shouldn’t be a button.

Article Content
  • Why purpose of a link dicatates its formatting (even if it looks like a button)
  • How buttons are associated with particular actions (messages, modals)
  • Why you should be careful of deviating too far from a links default styling.
  • Why styling links is all about considering user’s expectations.

Buttons are something of a thorny subject within the world of accessibility, particularly when it comes to the relationship between buttons and links.  Buttons look modern and are used extensively across the interface of mobile apps. Therefore, it makes a lot of sense to a web designer, who wants to make their design mobile-friendly to use buttons equally extensively and why not use them as containers for links? Buttons are interactive, and links are interactive it makes sense for them to be together, right? When it comes to buttons and links, looks can be deceptive. Really like with all semantic code it boils down to the meaning purpose, and function of the code.

The purpose of a button and a link

Put simply, even if a link is designed to look in a particular way (in this case look like a button) it is still primarily a link. (There is an argument that even just styling links to look like buttons is bad practice, read more on this issue of button styling in this article from Axe here) What a screen reader wants to know is what particular action any part of your code is going to perform. The function of a link is to link the user to another piece of content, such as a web address or an internal page on your website. Mixing links together with buttons can be confusing to screen readers.  Buttons are associated with certain actions. As Adrian Roselli has described (the best explanation I have found) “If when activated, the user is not moved from the page (or to an anchor within the page) but is instead presented with a new view (messages, boxes changes in layout etc)…” then a button should be used. These popup messages are sometimes called modal dialogues. (Read Roselli’s blog on button and links here)

If your head is starting to hurt, I sympathise. It is one of the areas of accessibility that can easily become quite confusing. In terms of the semantics, I would format it as a link even if you were styling it to look like a button. (There are methods on how to do that in this CSS Tricks article you can read here). Bear in mind that there are strong arguments against doing this, namely that it can lead to confusion over function. You are effectively styling something to look like something semantically it is not, which could be considered problematic for accessibility and general user experience. (I think there is some middle ground here based on the context of where the link is but I can see the argument, especially for links that are in the main body text.)

The value of considering user’s expectations

My general advice would be to always start from the point of the default styling of links and make small changes in each development of the design.  Users like to predict the behaviour of a website, one of the key reasons people become frustrated is that we have certain expectations of what a link should look like.  Everyone can immediately recognise a link if it is blue and underlined. (A styling from the early days of the web). Once you start to deviate too far from this, you lose that immediate recognition from the user over what to do next, and they may be unsure of what will happen when they click on the link.

This advice may seem odd if you are from a generation well used to mobile apps and tapping or clicking on anything that looks remotely interactive. However, not all users will have the same level of confidence when interacting with the website. In the context of accessibility, you also need to consider that many users will not be navigating a website visually, so how a website is coded is vitally important for ease of navigation. (Read more about semantic code in this article here).

Accessibility is all about empathising with users from all backgrounds, and the design decisions you make when styling and formatting links and buttons should be reflective of this.

Leave a Reply

Your email address will not be published. Required fields are marked *