Que signifie le rôle = bouton?

Question

J'ai trouvé que dans la page du projet Google+, les boutons sont tous fabriqués à partir de divs comme:

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

J'aimerais savoir, est-ce juste pour la sémantique, tout cela influence-t-il le style ou la gestion des événements de la div? J'ai essayé de simuler un clic sur le bouton avec un clic JQuery, mais cela ne fonctionne pas.

Answer 1

Il raconte l'accessibilité (et d'autres) sont des logiciels quel est le but de l' div est. De plus, ici, dans le projet d' role spécification d'attribut.

Oui, c'est juste de la sémantique. L'envoi d'un click événement pour le bouton doit travailler.

---

Une version antérieure de cette réponse (en 2011) a dit:

...mais de jQuery click fonction ne pas le faire; il ne se déclenche que les gestionnaires d'événements qui ont été raccordé à l'élément avec jQuery, et non des gestionnaires accroché par d'autres moyens.

...et a fourni l'exemple de code et de sortie ci-dessous.

Je ne peux pas reproduire la sortie maintenant (deux ans plus tard). Même si je vais revenir à des versions antérieures de jQuery, ils déclenchent jQuery gestionnaires, DOM0, les gestionnaires et les DOM2 gestionnaires. (L'ordre dans lequel ils sont de déclenchement varie d'une version à une autre.) J'ai essayé les versions de jQuery 1.4, 1.4.1, 1.4.2, 1.4.3, 1.4.4, 1.5, 1.5.1, 1.5.2, 1.6, et les versions plus récentes comme la 1.7.1, 1.8.3, et 1.9.1 (l'actuel 1.x release de cette écriture). Je ne peux que conclure que c'est un navigateur chose, et je ne sais pas ce navigateur que j'utilise. (En ce moment je suis en utilisant google Chrome 26 et Firefox 20 à tester.)

---

Les informations ci-dessous n'est pas à jour (ou quelque chose), voir ci-dessus

Edit: en Fait, à ma grande surprise, jQuery click feux DOM0 gestionnaires de trop; mais pas DOM2 des gestionnaires: la page de Test:

HTML:

<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'>

JavaScript:

jQuery(function($) {
  var div;

  // 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);
  }

});

Sortie alors qu'en réalité, en cliquant sur les div:

DOM0 gestionnaire déclenché
DOM2 gestionnaire déclenché
jQuery gestionnaire déclenché

Sortie en cliquant sur le bouton pour envoyer un faux clic via click:

Le déclenchement cliquez sur:
jQuery gestionnaire déclenché
DOM0 gestionnaire déclenché

Notez que le DOM2-style gestionnaire n'a jamais été appelée dans ce cas.

Answer 2

L'attribut role est utilisé par les logiciels d'accessibilité pour savoir ce que fait div . Pour plus d'informations, consultez cette page .