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

Help make the web better for everyone

Riccardo Giorato
Oct 10 · 2 min read

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: 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 for the screen reader and then I built a that transformed into a button.

tabindex=”0"

tabindex="0" is 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 that will provide you a of your website to discover real problems that automatic tools won’t find or discover cause you simply !


Better Programming

Advice for programmers.

Thanks to Zack Shapiro

Riccardo Giorato

Written by

XR Developer and Photogrammetry Artist https://riccardogiorato.com/

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade