<a role="button"> instead of <button>

Question

I use the program NVDA to test my website and make a website accessible to all people. Recently I saw on MDN Web docs an attribute allowing me to use a instead of button. It is role="button".

MDN and Bootstrap 4 Doc says:

these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.

<a class="btn btn-primary" href="#"> Anchor without ROLE </a>
<a class="btn btn-primary" href="#" role="button"> Anchor with ROLE </a>
<button class="btn btn-primary" type="button"> Just a Button </button>

I tried to use NVDA and I press B (a shortcut to find buttons in website), and the only button that it found is the button with <button> tag. What role="button" is being used? What is the correct way?

Ref: Bootstrap V4 and MDN Docs

Solution

I tried to use NVDA and I press B (a shortcut to find buttons in website), and the only button that it found is the button with tag. What role="button" is being used? What is the correct way?

Browser support and behaviour for ARIA roles can vary depending on browser/screenreader combination.

You should use the native <button> element.

Remember the first and second rules of ARIA:

First rule:

If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

Second Rule:

Do not change native semantics, unless you really have to.

Comments

[JasonB]

According to deque.com/blog/accessible-aria-buttons the non button tag "buttons" also need to trigger e.preventDefault() javascript code when clicked. Perhaps NVDA is smart enough to detect this code is missing so these links are still looked at as links?

[BrendanMcK]

You're generally better off using a BUTTON and styling it using CSS than trying to shoe-horn a link into button behavior here. Using a link will give incorrect keyboard behavior (buttons should be pressable using space, links don't do this), and links will also show a dummy URL when you hover over them, and display link-related options (eg. 'Open in new tab') if you right-click them.

[Kameron]

Question ~ so if I'm using an a href that is suppose to act as a button but does not include any button HTML, would adding role="button" be good practice? For example, <a href="#" class="class-name" role="button">I'm a button link</a>