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
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.
With ARIA fields, the role attribute was introduced for all HTML elements.
aria-role can be used to transform an element from its type to a specific other type for the screen reader.
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