¿Qué significa role = “button”?

Solución:

Le dice al software de accesibilidad (y otros) cuál es el propósito del div es. Más aquí en el borrador role especificación de atributo.

Sí, es solo semántico. Enviando un click evento al botón deberían trabaja.

---

Una versión anterior de esta respuesta (en 2011) decía:

… pero jQuery’s click la función no hace eso; desencadena solo los controladores de eventos que se han conectado al elemento con jQuery, no manipuladores conectados de otras formas.

… y proporcionó el código de muestra y la salida a continuación.

No puedo replicar el resultado ahora (dos años después). Incluso si vuelvo a versiones anteriores de jQuery, todos activan controladores jQuery, controladores DOM0 y controladores DOM2. El orden no es necesariamente el mismo entre un clic real y el de jQuery. click función. Probé las versiones 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 y versiones más recientes como 1.7.1, 1.8.3, 1.9.1 y 1.11.3 (la versión actual 1.x al momento de escribir este artículo). Solo puedo concluir que fue un navegador cosa, y no sé qué navegador estaba usando. (En este momento estoy usando Chrome 26 y Firefox 20 para probar).

Aquí hay una prueba que muestra que, de hecho, los controladores jQuery, los controladores DOM0 y los controladores DOM2 están todos (¡al momento de escribir este artículo!) Activados por 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">

Es solo semántica.

Se recomienda que utilice botones HTML nativos utilizando <button> etiqueta. Sin embargo, si tiene controles personalizados usando <a> o <div> etiquetas, la siguiente información sobre el role="button" es muy recomendable.

1. Activar una respuesta

Si está creando controles personalizados, deberían funcionar como un botón. Si hace clic en el elemento, debería generar una respuesta. Por ejemplo, esta respuesta no cambia el texto del botón, es decir, el control personalizado. Si es así, entonces no es un botón.

2. Enfoque del teclado

Estos controles personalizados que actúan como botones deben poder enfocarse haciendo tabulaciones a través de un teclado y también debe poder enfocarse programáticamente para lectores de pantalla.

3. Operabilidad

El control personalizado debe implementar onclick al igual que onKeyDown eventos. Los botones se pueden activar mediante barra espaciadora. Por lo tanto, si agrega el rol a un control personalizado, debe manejar estos eventos usted mismo. De lo contrario, la semántica pierde su significado. Un usuario de lector de pantalla intentará activar el botón usando la barra espaciadora, pero no puede.

La sintaxis estándar para un control personalizado con la role="button" es

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

los tabindex="0" no es necesario si está utilizando <a> etiqueta, pero es obligatorio si está utilizando una etiqueta no enfocable como <span> o <div> para permitir el enfoque manualmente.

Otro consejo útil es que si todavía está recurriendo a la creación de un botón personalizado, es mucho mejor usar <a> etiqueta ya que puede evitar los controladores onclick.

los role El software de accesibilidad utiliza este atributo para saber cuál es el div lo hace. Para obtener más información, consulte esta página.

---

---

Utiliza Nuestro Buscador