Accesibilidad para imágenes dentro de un enlace ancla con el rol de botón: Los elementos que se puedan hacer clic deben ser enfocables y deben tener una semántica interactiva.
Tengo la siguiente maquetación:
<li class="remove-filter-key-list-item" data-id="{{this.id}}">
<a href="#" class="remove-filter-key-button flx jst-cntr" role="button" tabindex="0">
<img class="remove-filter-key-list-icon" src="{{this.icon}}" alt="{{this.statusText}} icon">
<span class="remove-filter-key-list-title">{{this.statusText}}</span>
</a>
</li>
que está provocando este error en el inspector de accesibilidad de Firefox.
Desde lo que puedo entender, el enlace necesita un escuchador de clics, un escuchador de pulsaciones de teclas, un índice de tabulaciones y un prevent default
en ambos eventos. He intentado añadir esos, pero el error persiste. Parece que Firefox se centra en la imagen dentro del enlace ancla, no en el enlace en sí, que es lo que se puede hacer clic.
Estoy añadiendo los escuchadores en un archivo JavaScript (no puedo añadirlos en línea en el HTML) de la siguiente manera:
function addStatusFilterListener(el) {
el.addEventListener("click", onStatusFilterToggle);
el.addEventListener("keydown", (e) => {
e.preventDefault();
if (e.keycode === 32) {
// si es barra espaciadora
onStatusFilterToggle(e);
}
});
}
Sin embargo, esto no parece funcionar: la barra espaciadora desplaza la página y mi evento no se activa. Además, parece que el inspector de accesibilidad busca eventos en la etiqueta img
contenida. ¿Cuál es la forma correcta de estructurar esto para resolver estos problemas?
davy.ai
Parece que el problema es que Firefox se enfoca en la etiqueta
img
dentro del enlace de anclaje en lugar del enlace en sí. Una forma de solucionar esto es agregar el atributotabindex
a la etiquetaimg
y establecerlo en-1
. Esto lo eliminará del orden de tabulación y evitará que reciba el enfoque.Otra cosa a tener en cuenta es que la propiedad del evento
keydown
eskeyCode
en lugar dekeycode
, por lo que podría ser la razón por la que el evento no se está activando.Aquí hay una versión actualizada del código que debería solucionar los problemas:
En esta versión actualizada, estamos agregando el atributo
tabindex="-1"
a la etiquetaimg
para eliminarla del orden de tabulación. También estamos usandoconst
en lugar delet
para las variables ya que no se les asigna un nuevo valor.Dentro de la función
addStatusFilterListener
, estamos agregando event listeners tanto al enlace como a la imagen. Elkeydown
listener en la imagen activará un clic en el enlace si se presiona la barra espaciadora.Finalmente, estamos obteniendo el elemento
el
y pasándolo a la funciónaddStatusFilterListener
para adjuntar los event listeners.