When and when not to use role="button"

Question

In terms of accessibility, can someone describe to me the difference between a <button> and a <a> for screen reader and keyboard users? From what I can tell a keyboard user can use ENTER and SPACE to activate a button, whereas only ENTER for an anchor tag. In a Single Page Application I feel like the roles of these elements get somewhat confused and I'm not sure where the line draws between the two.

Buttons that look like links

In my application I have a generic styling for a link, the class name for this is simply .link.

In the first example I have a button with an onclick handler that performs an action on the same page, therefore I've used a button element for it. However it stylistically looks like a link.

<button class="link" onclick={(e) => console.log('Do the thing')}>This is a link</button>

If the roles are reversed and the link behaves like a traditional anchor where the route changes as a result of it being clicked, I'd do something like this:

<a class="link" href="/route/change">This is a link</a>

Even though both of these look the same due to the applied class, should the anchor tag example have role="button" applied so it behaves like a button even though it's styled like a link? Is it better to maintain consistency between these styled elements for users with accessibility needs throughout the entire application, or is it better to interchange which gets the role applied to it based on the application of the element regardless of how it's styled.

Two "buttons" next to each other

Following up on the first question. If the definition of an <a> tag is that it moves you to a different page/anchor point, should two side by side buttons which perform different tasks both be considered buttons.

Taking the following example, the confirm button performs an action on the same page, and the cancel button routes you back to the previous page.

The code looks something like this:

<button onclick={() => console.log('do a thing'}>Confirm</button>
<a href="/home">Cancel</a>

The definition of role="button" from MDN says the following:

The button role should be used for clickable elements that trigger a response when activated by the user. Adding role="button" will make an element appear as a button control to a screen reader. This role can be used in combination with the aria-pressed attribute to create toggle buttons.

Should the cancel button have the button role applied even though it's technically not behaving in the way of the roles definition?

Closing

Is there more concise guidelines on when these roles should and should not be used? Is there any harm in applying role="button" to any/all links that use the same styling if they are used interchangeably with the <button> element? Or should anchor tags and roles never mix, regardless if they stylistically look like another element type?

I appreciate you for reading. I'm attempting to take accessibility seriously but can't seem to find any clear and concise specifications surrounding use cases for this scenario.

Answer 1

Whenever i get this question of Buttons vs link I ask myself, is it scripted functionality or a is it Navigation(internal or external)?

• Buttons activate scripted functionality on a web page (dialogs, expand/collapse - regions).
• Links take you to another location, either to a different page or different location on the same page.

Coming to a11y

Role tells screen readers and other assitive technology the semantic category of an element, meaning the type of thing that it is. Every element already has a default role of some kind. The <button> element has an implied role="button", and the <img> element has an implied role="img" and so on.

role="button"

• if you use <button> don't add role (it's implicit)

• <div role="button"> - (Adding roles do not cause browsers to provide keyboard behaviors or styling). Try to use real <button> If that’s problematic for styling purposes, you can use role="button". Be sure to add tabindex="0" to make it keyboard focusable, and ensure it works with both the Enter key and Spacebar, ensure it has proper disabled, hover, focus state, works in high contrast using media query.

• Don't use <a role="button"> : it doesn't make sense in any way, it'll give you a block element just like <div> which you can style anyway, remember the question, it is a scripted functionality use <button> or <div role="button"> , if it is a navigation use <a> without any role (style it the way you want)

Also, <a> cannot be disabled, <buttons> can be.

Screen readers have shortcuts to read out all the links eg NVDA user can press

• K - jumps to Next link
• INS + F7 it lists all links, headings
• U Un visited Link Quick Key
• V Visited Link Quick Key

I also think about do I want screen reader users to hear this link when they press ins + f7 ?

EDIT: I missed to mentions assigning a role to an element overrides its native role. so <a role="button" is no more a role="link" and won't come up in INS + f7 list and as it will be treated by the accessibility API as a button