What does role="button" mean?

Question

I found that in Google+ Project's page that buttons are all made from divs like:

<div role="button"></div>  

I'd like to know, is this just for semantic purposes, or does it influence the style or event handling of the <div>?

I tried to simulate a button "click" with the jQuery click event, but it didn't work.

Answer 1

It tells accessibility (and other) software what the purpose of the div is. More here in the draft role attribute specification.

Yes, it's just semantic. Sending a click event to the button should work.

---

An earlier version of this answer (back in 2011) said:

...but jQuery's click function doesn't do that; it triggers only the event handlers that have been hooked up to the element with jQuery, not handlers hooked up in other ways.

...and provided the sample code and output below.

I cannot replicate the output now (two years later). Even if I go back to earlier versions of jQuery, they all trigger jQuery handlers, DOM0 handlers, and DOM2 handlers. The order isn't necessarily the same between a real click and jQuery's click function. I've tried jQuery versions 1.4, 1.4.1, 1.4.2, 1.4.3, 1.4.4, 1.5, 1.5.1, 1.5.2, 1.6, and more recent releases such as 1.7.1, 1.8.3, 1.9.1, and 1.11.3 (the current 1.x release as of this writing). I can only conclude that it was a browser thing, and I don't know what browser I was using. (Right now I'm using Chrome 26 and Firefox 20 to test.)

Here's a test which shows that indeed, jQuery handlers, DOM0 handlers, and DOM2 handlers are all (as of this writing!) triggered by jQuery's click:

jQuery(function($) {
  var div;

  $("<p>").text("jQuery v" + $.fn.jquery).appendTo(document.body);

  // Hook up a handler *not* using jQuery, in both the DOM0 and DOM2 ways
  div = document.getElementById("theDiv");
  div.onclick = dom0Handler;
  if (div.addEventListener) {
    div.addEventListener('click', dom2Handler, false);
  } else if (div.attachEvent) {
    div.attachEvent('onclick', dom2Handler);
  }

  // Hook up a handler using jQuery
  $("#theDiv").click(jqueryHandler);

  // Trigger the click when our button is clicked
  $("#theButton").click(function() {
    display("Triggering <code>click</code>:");
    $("#theDiv").click();
  });

  function dom0Handler() {
    display("DOM0 handler triggered");
  }

  function dom2Handler() {
    display("DOM2 handler triggered");
  }

  function jqueryHandler() {
    display("jQuery handler triggered");
  }

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="theDiv">Try clicking this div directly, and using the button to send a click via jQuery's <code>click</code> function.</div>
<input type='button' id='theButton' value='Click Me'>

Answer 2

It's just semantics.

It is recommended that you use native HTML buttons using <button> tag. However, if you are having custom controls using <a> or <div> tags, the following information on the role='button' is highly recommended.

1. Trigger a Response

If you are building custom controls, they should work just like a button. If you click the element, it should trigger a response. For example, This response isn't changing the text of the button i.e. custom control. If it is, then it is not a button.

2. Keyboard focus

These custom controls acting as buttons should be focusable by tabbing through a keyboard and also should be focusable programmatically for screen-readers, so you need to add tabindex="0".

3. Operability

The custom control should implement onclick as well as onkeydown events.

Buttons (and links) can be activated through Space and Enter. Hence, if you are adding the role to a custom control, you need to handle these events yourself. Else, the semantic loses its meaning. A screen-reader user will expect to activate the button using Space, but cannot.

The standard syntax for a custom control with the role='button' is

<div role="button" tabindex="0" onClick="click_handler()" onkeydown="keyhandler_for_space_and_enter()">

The tabindex="0" and onkeydown are not necessary if you are using <a> tag, but is required if you are using a non-focusable tag like <span> or <div> to manually allow focus.

Another useful tip is if you are still resorting to build custom button, it is much better to use <a> tag since you can avoid onclick handlers.

Answer 3

The role attribute is used by accessibility software to know what the div does. For more information, see this page.