Skip to Main ContentSkip to Footer

Accessibility: Web Links Should Be Links, and Web Buttons Should Be Buttons

October 10, 2019

Mixing links and buttons is pretty common in the web-development world.

Many times you use a link but without an href, and you set custom onclick functions. Or you do the same with a button to create a button that acts as a link.

We will clarify the usage of links and buttons and provide you the tips to improve accessibility om your website — and also improve Google SEO quality.

Links Shouldn’t Be Buttons

Links are used to go somewhere else.

When the user is navigating to a new page on a website, you should use a link.

But screen readers, web browsers, and even Google don’t allow users to focus on <a> elements without an href attribute.

I will repeat this: Google can only follow links if they have an [<a>](https://support.google.com/webmasters/answer/9112205) tag with an href attribute.

The practice of having links without an href tag or using other tags that perform as links because of script events won’t work for SEO and accessibility.

Here are examples of links that Google and screen readers can and can’t follow.

This means that clicking on a link should not add, change, or delete any data on the back end (except for usage statistics, which is different). So a delete action shouldn’t be a link, nor should it be a save action.

Buttons Shouldn’t Be Links

Buttons are used to change the state of an application. They shouldn’t move you to a different page, except for submit buttons for forms.

They could be used on a dynamic page to change the state of settings of some information taken from the server without reloading or changing the website page.

ARIA Roles

With ARIA fields, the role attribute was introduced for all HTML elements.

This attribute aria-role can be used to transform an element from its type to a specific other type for the screen reader.

In this case, I created a div that became like a button for the screen reader and then I built a link that transformed into a button.

tabindex=”0”

tabindex="0" is required to let the user focus and select those elements with a screen reader. tabindex tells the browser to add those elements to the elements that can be selected by pressing the tab key.

Test your website for accessibility issues!

There are many custom product to do so like Husable that will provide you a real human test valuation of your website to discover real problems that automatic tools won’t find or discover cause you simply need a human!

References and Resources


Subscribe to my email list!

If you enjoy my work, you should definitely join my newsletter"Giorat Mails". It’s one email a week with everything interesting I’ve read or found, plus new articles and fresh tutorials.

Sign up for our newsletter