javascript – What does role=button mean?

javascript – What does role=button mean?

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

Yes, its just semantic. Sending a click event to the button should work.

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

…but jQuerys click function doesnt 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 isnt necessarily the same between a real click and jQuerys click function. Ive 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 dont know what browser I was using. (Right now Im using Chrome 26 and Firefox 20 to test.)

Heres a test which shows that indeed, jQuery handlers, DOM0 handlers, and DOM2 handlers are all (as of this writing!) triggered by jQuerys 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 jQuerys <code>click</code> function.</div>
<input type=button id=theButton value=Click Me>

Its 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 isnt 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.

3. Operability

The custom control should implement onclick as well as onKeyDown events. Buttons can be activated through spacebar. 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 try to activate the button using spacebar, 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()>

The tabindex=0 is 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.

javascript – What does role=button mean?

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