Do I need role="button" on a <button>?

Question

I've noticed in all of Bootstrap's examples using button elements, they include role="button" (and type="button"), such as:

<div class="dropdown">
    <button id="dLabel" type="button" role="button" data-toggle="dropdown" 
     aria-haspopup="true" aria-expanded="false">
        Dropdown trigger <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
    </ul>
</div>

Won't accessibility software already know that a button element is meant to act as a button? Is there any reason I should include role="button" and/or type="button" in my code?

Answer 1

Many HTML5 elements come with default implicit ARIA semantics, and explicitly setting these default values is "unnecessary and not recommended".

Looking at the button element, you can see that it has the button role by default.

So, setting role="button" is "not recommended", but allowed. It might help older user agents that support WAI-ARIA but not HTML5.

Answer 2

TL;DR For the case given, role=button should be specified, because it behaves as a toggle button. type=button should be used too.

All Bootstrap buttons don't use role=button

The information in the question stating that all buttons in Bootstrap's examples use role=button is incorrect. Only buttons that logically behave as toggle buttons are labelled as such.

Using role=button on a button element

You do not need to use role=button in general, as button elements have strong native semantics. Furthermore, according to the ARIA usage note in W3C's HTML5 specification:

In the majority of cases setting an ARIA role and/or aria-* attribute that matches the default implicit ARIA semantics is unnecessary and not recommended as these properties are already set by the browser.

There is one exception, for toggle buttons, which is the case in the example given.

According to the Recommendations Table in W3C's Using WAI-ARIA in HTML:

HTML language feature: button

Default ARIA semantics: role=button

Should authors explicitly define default ARIA semantics? NO (note 0a)

Note 0a: YES If the aria-pressed attribute is being used on the button element

So you should set the role for toggle buttons, but not otherwise.

Using type=button on a button

Since the question also mentions type=button, I'll elaborate. According to the section on buttons in the W3C's HTML5 specification, the missing default value for type on button elements is type=submit, whose activation behavior is to submit the form owner if it has one. There is no activation behavior associated with type=button.

Therefore, type=button should be specified for the case given.