2

I'm following along with a YouTube video & it's teaching me about buttons. The video uses the attribute role, but how come they use role instead of type?

<button type="button"></button>
<button role="button"></button>

Which one should I use and why? None of the HTML documentation I've looked up shows a role as an attribute for the button.

Younes
  • 462
  • 7
  • 15
Adrian D.
  • 514
  • 1
  • 5
  • 12

1 Answers1

0

The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.

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.

Read more on this from https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role

Since you are already using a button element. It no longer needs role="button" attribute since it is itself a button and all the events are already available.

So it is not recommended to use role="button" on button.

Imran Rafiq Rather
  • 7,677
  • 1
  • 16
  • 35