0
204
Vistasaccesibilidad para la imagen dentro de un enlace de anclaje con botón de función: los elementos en los que se puede hacer clic deben ser enfocables y deben tener una semántica interactiva
Tengo el siguiente marcado:
<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:
Por lo que puedo deducir, el enlace necesita un detector onclick, un detector keydown, un índice de tabulación y una prevent default en ambos eventos. Intenté agregarlos, pero el error persiste. Firefox parece estar enfocado en la imagen dentro del enlace de anclaje, no en el enlace en sí, que es lo que se puede hacer clic.
Estoy agregando los oyentes en un archivo javascript (no los agrego ni puedo agregarlos 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) { //if spacebar onStatusFilterToggle(e); } }); } Sin embargo, esto no parece funcionar: la barra espaciadora desplaza la página y mi evento no se activa, y parece que el inspector de accesibilidad está buscando eventos en la etiqueta img contenida. ¿Cuál es la forma correcta de estructurar esto para resolver estos problemas?
2 Respuestas
Responde la pregunta0
Esto es lo que podría decir sobre su código:
- tabindex=0 no es necesario, ya que un enlace se puede enfocar de forma predeterminada.
- El controlador de teclado no es necesario, ya que al presionar Intro ya se activa el enlace y/o el controlador de clic. Incluso puede ser peligroso porque está haciendo que la interfaz sea inusual en comparación con lo que el usuario espera de un enlace o botón.
- Agregar tabindex=0 a
<img/>,<span>, o cualquier cosa dentro del enlace creará problemas; Los elementos enfocables o en los que se puede hacer clic anidados crean confusión porque los usuarios no los entienden bien y los eventos reales activados no están bien definidos y/o son difíciles de manejar bien. - La imagen tiene un texto alternativo, por lo que hablando de accesibilidad, parece que todo está bien.
0
Para ahorrar muchas soluciones alternativas y problemas, la solución más directa es envolver la imagen en un botón en lugar de intentar que un ancla se comporte como un botón.
Esto significa que no tiene que preocuparse por los diferentes controladores, etc. ¡ya que un controlador de eventos de click en un botón tiene todo el comportamiento incorporado!
En el siguiente ejemplo, cambié su código para usar un <button> en su lugar y agregué una data-id solo para alertar sobre qué elemento se hace clic.
¡Verá que puede usar Enter o Space para activar el elemento, así como un clic del mouse!
const removeBtn = document.querySelectorAll('.remove-filter-key-button'); removeBtn.forEach((element) => { element.addEventListener('click', onStatusFilterToggle); }); function onStatusFilterToggle(e){ let el = e.currentTarget; let itemID = el.getAttribute('data-id'); alert("you pressed item: " + itemID); } button{ border: 0px; background: transparent; } button:hover{ cursor: pointer; opacity: 0.9; } <button class="remove-filter-key-button flx jst-cntr" data-id="1"> <img class="remove-filter-key-list-icon" src="https://picsum.photos/100/100" alt="Some Alt Text icon" /><br> <span class="remove-filter-key-list-title" >Current Status</span> </button> <button class="remove-filter-key-button flx jst-cntr" data-id="2"> <img class="remove-filter-key-list-icon" src="https://picsum.photos/100/100" alt="Some Alt Text icon" /><br> <span class="remove-filter-key-list-title" >Current Status</span> </button>