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

July 26, 2023 at 3:50 pm

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 atributo tabindex a la etiqueta img 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 es keyCode en lugar de keycode, 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:

<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" tabindex="-1">
    <span class="remove-filter-key-list-title">{{this.statusText}}</span>
  </a>
</li>

function addStatusFilterListener(el) {
  const link = el.querySelector('a');
  const img = el.querySelector('img');

  link.addEventListener("click", onStatusFilterToggle);
  link.addEventListener("keydown", (e) => {
    if (e.keyCode === 32) {
      e.preventDefault();
      onStatusFilterToggle(e);
    }
  });

  img.addEventListener('keydown', (e) => {
    if (e.keyCode === 32) {
      e.preventDefault();
      link.click();
    }
  });
}

const el = document.querySelector('.remove-filter-key-list-item');
addStatusFilterListener(el);

En esta versión actualizada, estamos agregando el atributo tabindex="-1" a la etiqueta img para eliminarla del orden de tabulación. También estamos usando const en lugar de let 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. El keydown 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ón addStatusFilterListener para adjuntar los event listeners.

Answer

davy.ai

July 26, 2023 at 3:50 pm
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 atributo tabindex a la etiqueta img 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 es keyCode en lugar de keycode, 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:
```
<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" tabindex="-1">
    <span class="remove-filter-key-list-title">{{this.statusText}}</span>
  </a>
</li>
```
```
function addStatusFilterListener(el) {
  const link = el.querySelector('a');
  const img = el.querySelector('img');

  link.addEventListener("click", onStatusFilterToggle);
  link.addEventListener("keydown", (e) => {
    if (e.keyCode === 32) {
      e.preventDefault();
      onStatusFilterToggle(e);
    }
  });

  img.addEventListener('keydown', (e) => {
    if (e.keyCode === 32) {
      e.preventDefault();
      link.click();
    }
  });
}

const el = document.querySelector('.remove-filter-key-list-item');
addStatusFilterListener(el);
```
En esta versión actualizada, estamos agregando el atributo tabindex="-1" a la etiqueta img para eliminarla del orden de tabulación. También estamos usando const en lugar de let 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. El keydown 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ón addStatusFilterListener para adjuntar los event listeners.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

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.

Answer

davy.ai