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

html twitter-bootstrap accessibility wai-aria
Daniel Hanrahan picture Daniel Hanrahan · Nov 14, 2014 · Viewed 16.7k times · Source

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

unor picture unor · Nov 16, 2014

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.

Related questions

Accessibility: sr-only or aria-label

From MDN: In the example below, a button is styled to look like a typical "close" button, with an X in the middle. Since there is nothing indicating that the purpose of the button is to close the dialog, the …

Read More
vertical-align with Bootstrap 3

I'm using Twitter Bootstrap 3, and I have problems when I want to align vertically two div, for example — JSFiddle link: The grid system in Bootstrap uses float: left, not display:inline-block, so the property vertical-align doesn't work. I tried using …

Read More
Text-align class for inside a table

Is there a set of classes in Twitter's Bootstrap framework that aligns text? For example, I have some tables with $ totals that I want aligned to the right... <th class="align-right">Total</th> and <td …

Read More