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

The <button> tag can be one of three things:

1. A regular button that does something you specify upon click (type = button).
2. A submit button that submits the form when clicked (type = submit).
3. A reset button that resets the form to its inital values when clicked (type = reset).

It's good to specify which type you intend to be used, because different browsers use different defaults for buttons.

http://www.w3schools.com/tags/att_button_type.asp

The role doesn't have to be included, but it's nice for accessibilty software.

So, do you have to include them? No, you don't, but it's generally advisable that you do.

Answer 3

Here say:

Note: Where possible, it is recommended to use native HTML buttons (, and ) rather than the button role, as native HTML buttons are more widely supported by older user agents and assistive technology. Native HTML buttons also support keyboard and focus requirements by default, without need for additional customization.

Possible effects on user agents and assistive technology

When the button role is used, user agents should expose the element as a button control in the operating system's accessibility API. Screen readers should announce the element as a button and describe its accessible name. Speech recognition software should allow the button to be activated by saying "click" followed by the button's accessible name. Note: Opinons may differ on how assistive technology should handle this technique. The information provided above is one of those opinions and therefore not normative.

Then you should add it. In order to expose it to the user. But is not normative.

Answer 4

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.

Answer 5

The requirements and recommendations are now much more exhaustively documented in "ARIA in HTML"

The following table provides normative per-element document-conformance requirements for the use of ARIA markup in HTML documents and describes the implicit ARIA semantics that apply to HTML elements as defined in the HTML Accessibility API Mappings 1.0 [html-aam-1.0] specification.

https://w3c.github.io/html-aria/#document-conformance-requirements-for-use-of-aria-attributes-in-html

Answer 6

role="button"

This is not mandatory for Bootstrap

Answer 7

According to W3C Html5 Button

The missing value default is the Submit Button state.

If the type attribute is in the Submit Button state, the element is specifically a submit button.

Unless you're going to use buttons to submit a form, you need to explicitly set type="button" as omitting this, as stated in W3C specification, it will act as a submit button, will submit your form. To avoid unnecessary submits, you need to explicitly set type="button" to your <button>s.

Since most of the bootstrap's buttons are for triggering a javascript function or similar behaviour, to avoid accidental unintentional submit behaviour upon code copy&paste and in the name of normalization with good practice, type="button" and role="button" attributes are added to <button>