web-dev-qa-db-fra.com

Que signifie le rôle = bouton?

J'ai trouvé que sur la page de Google+ Project, 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.

javascripthtmljavascript-eventsgoogle-plus
49
wong2

Il indique aux logiciels d'accessibilité (et autres) à quoi sert le div. Plus ici dans la spécification d'attribut draft role .

Oui, c'est juste sémantique. L'envoi d'un événement click au bouton devrait fonctionner.

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

... mais la fonction click de jQuery ne fait pas cela; il ne déclenche que les gestionnaires d'événements qui ont été connectés à l'élément avec jQuery , pas les gestionnaires connectés d'une autre manière.

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

Je ne peux pas répliquer la sortie maintenant (deux ans plus tard). Même si je reviens aux versions antérieures de jQuery, elles déclenchent toutes des gestionnaires jQuery, des gestionnaires DOM0 et des gestionnaires DOM2. L'ordre n'est pas nécessairement le même entre un clic réel et la fonction click de jQuery. J'ai essayé les 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 de jQuery et des versions plus récentes telles que 1.7.1, 1.8.3, 1.9.1 et 1.11.3 (la version 1.x actuelle au moment d'écrire ces lignes). Je peux seulement conclure que c'était une chose navigateur , et je ne sais pas quel navigateur j'utilisais. (En ce moment, j'utilise Chrome 26 et Firefox 20 pour tester.)

Voici un test qui montre qu'en effet, les gestionnaires jQuery, les gestionnaires DOM0 et DOM2 sont tous (au moment de la rédaction de ce document!) Déclenchés par le click de jQuery:

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'>
26
T.J. Crowder

C'est juste de la sémantique.

Il est recommandé d'utiliser des boutons HTML natifs à l'aide de <button> tag. Cependant, si vous disposez de contrôles personnalisés à l'aide de <a> ou <div> tags, les informations suivantes sur les role='button' est fortement recommandé.

  1. Déclencher une réponse

Si vous créez des contrôles personnalisés, ils devraient fonctionner comme un bouton. Si vous cliquez sur l'élément, il devrait déclencher une réponse. Par exemple, cette réponse ne modifie pas le texte du bouton, c'est-à-dire le contrôle personnalisé. Si c'est le cas, ce n'est pas un bouton.

  1. focus clavier

Ces contrôles personnalisés agissant comme des boutons doivent pouvoir être mis au point en tabulant via un clavier et doivent également pouvoir être mis au point par programme pour les lecteurs d'écran.

  1. Opérabilité

Le contrôle personnalisé doit implémenter les événements onclick ainsi que onKeyDown. Les boutons peuvent être activés via barre d'espace. Par conséquent, si vous ajoutez le rôle à un contrôle personnalisé, vous devez gérer ces événements vous-même. Sinon, la sémantique perd son sens. Un utilisateur de lecteur d'écran tentera d'activer le bouton à l'aide de la barre d'espace, mais ne le pourra pas.

La syntaxe standard pour un contrôle personnalisé avec le role='button' est

<div role="button" tabindex="0" onclick="click_handler()" onKeyDown="keyhandler_for_space()">

Le tabindex="0" n'est pas nécessaire si vous utilisez <a> tag, mais est obligatoire si vous utilisez une balise non focalisable comme <span> ou <div> pour autoriser manuellement la mise au point.

Un autre conseil utile est que si vous avez encore recours à la création d'un bouton personnalisé, il est préférable d'utiliser <a> tag car vous pouvez éviter les gestionnaires onclick.

7
KannarKK

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

5
EdoDodo