<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

Answer 1

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.