Accesibilidad en Carruseles: Manejo de Foco con TabIndex

Tabindex: Indica si su elemento puede ser enfocado, y si participa en la navegación secuencial del teclado.

Valores de Tabindex:

• Valor negativo(-1): El elemento debe ser enfocado, pero no debe de ser accesible a través de la navegación.
• Valor positivo (>0): Debe poder ser enfocado y su orden relativo es definido por el valor del atributo.
• Valor de 0: Debe ser enfocado y ser accesible a través de la navegación secuencial del teclado, pero su orden relativo es definido por convención de la plataforma.

wow… solo hasta cuando uno mismo empieza a hacer el proyecto se da cuenta la cantidad de cosas que pasan desapercibidas para que la página aparezca aparentemente “sencilla” y de fácil accesibilidad y navegabilidad. Considero que la mayoría, entre ellas yo, nunca imaginamos cuantos cambios se deben hacer, al principio del curso tan solo pensé que era agregar algunas herramientas y listo. Pero hay que revisar línea por línea el código, ahora entiendo porqué se debe tener en cuenta desde el inicio de nuestro proyecto. Me encantó el curso y desde la primera clase me mantuve a la expectativa. Desde hace años tuve la inquietud de reaizar una página accesible pero no sabía todo lo que se debía tener en cuenta y lo había olvidado. Super genial el curso.

Mi explicación a los números y funcionamiento del carrousel es:

Esta programado sumando y restando valores, para mostrar un contenido y sumar o resta dependiendo si se moverá a la izquierda o derecha.

El 0 es el inicial (Proyecto 1,2,3)
El -270 muestra Proyecto 2,3,4
El -540 muestra Proyecto 3,4,5

Cada que va la derecha resta y a la izquierda suma (Según veo en el JavaScript)

Yo usé el IntersectionObserver:

function observeElement(elements, behaviour) {
  new IntersectionObserver(behaviour).observe(elements)
}
function updateAriaHidden( [entry] ) {
  const {target, isIntersecting} = entry
  if(isIntersecting) {
    target.removeAttribute('aria-hidden')
    target.querySelector('button').setAttribute('tabindex', "0")
  } else {
    target.setAttribute('aria-hidden', true)
    target.querySelector('button').setAttribute('tabindex', "-1")
  }
}

...

const projects = [...document.querySelectorAll('.project-container li')]
  projects.forEach(project => observeElement(project, updateAriaHidden))

Accesibilidad - JS

• Eliminar un elemento usando tabindex="-1"
• setAttribute: Agrega un nuevo atributo.
• remoteAttribute: Elimina un atributo

Alguna razón específica para que los números del switch sean esos?

Creo que los temas del foco del teclado y cómo funcionan los lectores son bastante importantes tenerlos en cuenta para construir la mejor experiencia para los usuarios. Con esto en mente, yo no tenía muy calro cómo funcionaba así que me di a la tarea de probar con el lector y el navegador (en mi caso, screen reader de google chrome) como funcionaba esto y puedo extraer las siguientes conclusiones.
.
Disclaimer:
.
Los lectores no funcionan igual, encontré diferencias entre el lector de Windows y el de google chrome. Y no sé si le pasa a los demás, pero son un poco tediosos de usar, a veces los comandos funcionan y a veces no, al menos eso me pasó a mi.
.
Las pruebas que hice fueron principalmente con screen reader de google chrome
.
Conclusiones.

• El lector del navegador tiene como dos formas de leer. Por una parte hace toda la lectura de la pagina incluyendo texto y titulos. Por otra parte hace la lectura a través de los elementos enfocables como botones, enlaces, etc.
  .
• Tabindex hace que un elemento sea enfocable por la navegación con el teclado, eso significa que se lo puedes agregar, por ejemplo, a un h2 y ahora, cuando estés navegando con el teclado podrás enfocar ese h2 y el lector lo leerá.
  .
• Sin embargo, el lector también leerá ese h2 si no tiene el tabindex colocado, lo leerá en su lectura normal como parte de la pagina, pero obviamente no podrás colocarle sobre él en la navegación con el teclado si no tiene el tab index.
  .
• Aria-label te permite agregarle una descripción a un elemento que normalemente no la tiene. Por ejemplo, puedes agregarle un arial-label a una <ul> para describir qué contiene esa <ul> y el lector leerá para el usuario esa descripción. Si no lo agregas, el lector le informará al usuario que es una <ul>, le dirá cuantos elementos tiene pero no habrá descripción de esa <ul>.
  .
• El lector leerá esas descripciones de arial-label en su modo de lectura normal de la pagina, pero si no le colocas un tabindex, no la leerá en el modo de navegación con el teclado
  .
  Con estas conclusiones en mente creo que algunas practicas que se pueden extraer son:
  .

1. Darle descripciones a las secciones, listas y lo que consideres necesario para que el usuario sepa dónde está con arial-label
2. Por cómo funciona el lector, no se necesita hace enfocable con tabindex todos los elementos de la pagina.
3. El lector va a leer todo el contenido en su modo de lectura, incluyendo titulos, parrafos, elementos interactivos como botones.
4. También puedes navegar a través de los elementos que no tienen tabindex y que no son interactivos, al menos en screen reader es con la tecla “Insert” + las flechas. Es como la navegación con el teclado pero a través de todos los elementos y no solo los interactivos
   .
   .
   Si tienen correcciones de esto o hay algo incorrecto, por favor respondan a este comentario

El switch dentro del JavaScript, solo mejora en este caso la navegación del carrusel por el teclado. La accesibilidad por mouse se mantiene

Lo logré

Entiendo que la intención es que la navegación sea igual en teclado y mouse, pero no lo estamos haciendo más complicado en teclado ? No sería más facil para un persona con teclado navegar directamente entre todos los elementos con el Tab, y no ponerla a deslizar el slider cada 3 elementos ?

Una forma mas optima de hacer esto, es crear dos obetos para cada boton que contengan las funciones que va a realizar en cada caso:

const valuesRight = {
	'-270': function () {
		document.querySelector('.project1').setAttribute('tabindex', '-1');
		document.querySelector('.project4').removeAttribute('tabindex');
	},
	'-540': function () {
		document.querySelector('.project2').setAttribute('tabindex', '-1');
		document.querySelector('.project5').removeAttribute('tabindex');
	},
};

const valuesLeft = {
	'-270': function () {
		document.querySelector('.project5').setAttribute('tabindex', '-1');
		document.querySelector('.project2').removeAttribute('tabindex');
	},
	0: function () {
		document.querySelector('.project4').setAttribute('tabindex', '-1');
		document.querySelector('.project1').removeAttribute('tabindex');
	},
};

Asi, luego en cada funcion solo mandamos a llamar el objeto con su propiedad de acuerdo al valor que guarde la variable newValue y como sabemos que nos devolvera una funcion, la ejecutamos, de este modo:

En la funcion clickRight: valuesRight[`${newValue}`]();
En la funcion clickLeft: valuesLeft[`${newValue}`]();

No es recomendable utilizar tabindex > 0 ya que podría ser difícil ara el usuario saber cual elemento será el siguiente. Podría asignarse a cada uno de los elementos de la pagina en el orden deseado pero no seria mantenible. La mejor practica es tener siempre tab index 0 y que sigan el orden lógico de la pagina y usar el -1 para aquellos que no se muestran visualmente

Ok, me perdí con la función de javascript

Tenía el tabindex en el <li> y no entendía por qué, a pesar de que tenía el tabindex="-1" en el elemento que contiene a los demás elementos el lector seguía teniendolo en cuenta y enfocandolo.
.
Luego me di cuenta que es así porque el <li> no es enfocable mientras en <button> si es enfocable, esa en la razón por la que el lector seguía leyendo los botones 4 y 5 del carrusel a pesar de que yo tenia el tabindex="-1" en el elemento <li> que contenía ese <button>

Tab index ❤️

Si no les funciona, revisen en qué función están metiendo el switch; me pasó que la primera se la puse al clickLeft y la segunda no hallaba dónde meterla, entonces me perdí un poco.

0 es el valor por defecto de tabindex