Así que estoy trabajando en un proyecto que requiere un <div> con un evento onclick. Tengo la funcionalidad principal funcionando, pero hay un problema. Necesito que ocurra el evento onclick cuando el usuario tabula al <div> y presiona enter. Agregué un tabindex al <div> lo que le permite obtener el foco, pero no sucede nada cuando el usuario presiona enter (o cualquier otra tecla).
Puede alguien ayudarme con esto? ¿O lo que quiero ni siquiera es posible?
Aquí hay un jsfiddle que demuestra mi problema.
http://jsfiddle.net/logiwan992/suwq7r09/
Gracias de antemano por cualquier ayuda.
daniel beck
Observo que la pregunta está etiquetada como WCAG y “accesibilidad”.
Por lo tanto, la respuesta a su pregunta es “no haga eso”. Las otras respuestas en esta página funcionarán bien, para todos, excepto para las personas que necesitan que funcione, es decir, aquellos que usan lectores de pantalla u otra tecnología de asistencia. Ninguna de las soluciones basadas en javascript aquí es compatible con WCAG.
lo que quieres es un <button>. Eso le da su tabindex y el control del teclado de forma gratuita.
También puede forzar un <div> trabajar como un <button> agregando el marcado ARIA (aunque es mejor y más fácil simplemente usar la etiqueta que ya hace lo que necesita que haga).
Si es absolutamente necesario, una buena introducción al uso de ARIA para pseudo-botones está aquí:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role
La esencia de esto es que necesita agregar el role="button" atributo, y gestionar el estado de la aria-pressed atributo manualmente (capturando eventos clave y clics en javascript; otras respuestas han cubierto esto bastante a fondo, por lo que no repetiré los detalles)
-
El problema aquí es que estoy trabajando con código heredado. Si cambio el
<div>a un<button>entonces todo el estilo se estropea por completo. No sé nada sobre el marcado ARIA, pero ¿puedes explicar cómo podría usarlo? Estoy de acuerdo en que la “mejor” opción sería cambiarlo a un<button>. Eso es probablemente lo que terminaré haciendo al final. Solo tomará mucho más trabajo.– lfitzgibbons
18/09/2015 a las 19:43
-
Si está trabajando con código heredado, estoy dispuesto a apostar que todo es inaccesible.
– jacob
18/09/2015 a las 19:48
-
@Logiwan992: Un
<button>puede contener cualquier marcado que desee, por lo que tal vez pueda envolver una etiqueta de botón alrededor de su existente<div>en lugar de reemplazar el div con un botón.– Esteban P.
18/09/2015 a las 21:43
-
Observo que la pregunta está etiquetada como WCAG y “accesibilidad”. Por lo tanto, la respuesta a su pregunta es “no haga eso”. Dios mío, leíste mi mente…
– Adán
19 de septiembre de 2015 a las 12:08
-
Terminé cambiándolo a un
<button>. Gracias por tu ayuda, creo que esta fue la mejor respuesta.– lfitzgibbons
25/09/2015 a las 18:51
Está perfectamente bien tener un
Sin embargo, estoy de acuerdo en que, cuando sea posible, debe usar los elementos html nativos. Esa es la primera regla del uso de ARIA: http://www.w3.org/TR/aria-in-html/#notes-on-aria-use-in-html. Pero entiendo que no siempre es posible.
Hubo una mención del uso de focus(). Eso es incorrecto. Foco () se utiliza para mover el foco al objeto. No se utiliza para manejar un evento. Ahora tal vez se referían a onFocus(), que es un evento que se activa cuando el objeto recibe el foco, pero aún así no es el evento correcto para atrapar. No desea que un botón (ya sea implementado como un
El atributo “onclick” tiene un comportamiento específico en los enlaces, porque se puede activar con la tecla Intro.
Vea la siguiente falla de WCAG:
http://www.w3.org/TR/WCAG20-TECHS/F59.html
Hay que cuidar el “rol” del elemento.
La siguiente página ilustra cómo puede hacer un “enlace accesible” desde un “span”:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role
Además, como ya se dijo, la mejor manera es confiar en un botón/un elemento cuando sea posible.
D4V1D
Trate de atar el keypress evento en dicho div y detectar si Enter se presionó la tecla (que tiene el número de código 13).
var div = document.getElementsByTagName('div');
div[0].addEventListener('keypress', function(e) {
if(e.keyCode == 13) {
alert('div focused');
}
});
También puede, alternativamente, usar jQuery:
jQuery(function($) {
$('div').on('keypress', function(e) {
if(e.keyCode == 13) {
alert('div focused');
}
});
});
jacob
Utilice el mismo controlador de eventos para ambos eventos. Si el evento es keypress verifique que la tecla presionada sea la tecla Enter antes de ejecutar.
var divButton = document.querySelector('#div-button');
divButton.addEventListener('click', activate);
divButton.addEventListener('keypress', activate);
function activate(e) {
if (e.type === 'keypress' && e.keyCode == 13) {
alert('activated the div');
}
};div {
outline: 1px solid black;
}
div:focus {
outline: 1px solid red;
}<div id="div-button" tabindex="0">
<h1>This is my div!</h1>
</div>
Envía tu código por favor.!!!
– Mxx persa
18/09/2015 a las 18:52
@Mxxpersian: Está en JSFiddle.
– D4V1D
18/09/2015 a las 18:53
Aprender acerca .enfocar().
– D4V1D
18/09/2015 a las 18:53
Este trabajo bien para mí !!!!
– Mxx persa
18/09/2015 a las 18:55
@MatthewDarnell ¿Cómo es más semántico usar un ancla en este caso?
– jacob
18/09/2015 a las 19:11