Contenido del curso
Accesibilidad en Carruseles: Manejo de Foco con TabIndex
¿Cómo manejar el atributo tabindex para la accesibilidad en nuestros proyectos?
En el diseño web moderno, la accesibilidad es una prioridad que no debe olvidarse, especialmente en componentes interactivos como los carruseles. Aquí aprenderás a utilizar el atributo tabindex para mejorar la accesibilidad de tus proyectos web y asegurar que los usuarios, independientemente de la forma en que naveguen por tu sitio, tengan la misma experiencia.
¿Qué es el atributo tabindex y cómo se utiliza?
El atributo tabindex indica si un elemento puede ser enfocado y si participa en la navegación secuencial del teclado. Es un método indispensable para controlar el enfoque de elementos HTML.
tabindex:
Implementación de tabindex en un carrusel accesible
Al crear un carrusel accesible, es importante considerar tanto los usuarios que navegan con teclado como aquellos que lo hacen con dispositivos de entrada tradicionales como el mouse. Veamos un ejemplo práctico de cómo implementar tabindex:
Código HTML y JavaScript básico
<button class="proyecto-cuatro" tabindex="-1">Proyecto 4</button> <button class="proyecto-cinco" tabindex="-1">Proyecto 5</button>
// JavaScript para manejar el cambio de foco let currentElement = /* elemento actual del carrusel */; if (currentElement === /* condición para mostrar otro elemento */) { document.querySelector('.proyecto-uno').setAttribute('tabindex', '-1'); document.querySelector('.proyecto-cuatro').removeAttribute('tabindex'); }
¿Cómo utilizar tabindex de forma segura y efectiva?
Es importante recordar que la interacción debe ser igual para todos los usuarios, sin importar el modo de navegación.
tabindex con valores negativos para elementos que deben permanecer en el DOM pero no visibles.¿Cómo sincronizar tabindex con aria-hidden?
En las siguientes etapas del desarrollo del carrusel, es crucial asegurarse de que los lectores de pantalla no lean los elementos ocultos. Esto se puede lograr coordinando sabiamente tabindex con atributos como aria-hidden.
Mantente atento a los detalles de accesibilidad, ya que mejorarás significativamente la experiencia del usuario y cumplirás con las normativas necesarias para la inclusión digital. Recuerda que la accesibilidad es un componente no negociable del diseño web contemporáneo, y su implementación adecuada refleja un cuidado por todos los usuarios.
Karla
Estudiante
Efraín Hernández García
Estudiante
jorge llanque
Estudiante
SANDRA ROCIO RODRIGUEZ CORREA
Estudiante
Juan Esteban Galvis
Estudiante
Gerardo Pérez Pérez
Estudiante
Oscar Antonio Espinoza Soto
EstudianteMARIA BELEN CASANOVA
Estudiante
Gabriel Ortiz
Estudiante
Cristian Blandon
Estudiante
Adrián Benavente
Estudiante
Jose Tellez
Estudiante
Usuario anónimo
UserAlejandro Harto
Estudiante
Christian David Sánchez
Estudiante
Sergio Estrella
ProfesorJuan Esteban Galvis
Estudiante
Néstor Raúl Guzmán Díaz
EstudianteJose Tellez
Estudiante
Carolina Gómez
EstudianteJose Tellez
EstudianteUsuario anónimo
User
Daniel Andres Rojas Paredes
EstudianteEfraín Hernández García
EstudianteCarolina Gómez
Estudiante
Jhonatan Mora
Estudiante
Miguel Angel Reyes Moreno
Estudiante
Obed Paz
Estudiante
Alessandri Fonseca
Estudiante
Tomás Felipe Beltrán Pulido
EstudianteTomás Felipe Beltrán Pulido
EstudianteTabindex: Indica si su elemento puede ser enfocado, y si participa en la navegación secuencial del teclado.
Valores de Tabindex:
Excelente resumen!
thanks for the summary
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))
Excelente forma de ejecutarlo, tuve un pequeño bug al ejecutarlo y es que me estaba interceptando el elemento anterior, para eso agregue un options
let options = { root: document.querySelector('.window'), threshold: .80 } ... function observeElement(elements, behaviour) { new IntersectionObserver(behaviour,options).observe(elements) }
Con esa configuración tomó como elemento principal al div con la clase window (declarado en el root) y que se observe con un mínimo de 80% ( threshold: .80)
Saludos.
Buen aporte! no lo he probado aún, pero entiendo que es realmente dinámico, a diferencia del switch para cada combinación (que debería ser actualizado cada vez que se incorpore una item).
Vale, he entendido el funcionamiento de tabindex. Pero pensándolo bien, si hacemos uso de él, ¿no estaríamos haciendo más complicada la navegación para los usuarios que utilizan un lector de pantallas? . Me explico: . Juliana nos recuerda que debemos intentar replicar la misma UX para todos nuestros usuarios, tanto si usan un **mouse **o un **lector de pantallas. ** . En el caso del usuario promedio que utiliza un mouse, al momento de llegar al carrusel, tendrá que hacer clic en los botones para visualizar las demás imágenes dentro de este. . Si queremos replicar esa misma experiencia, el tener que hacer clic en los botones para deslizar el carrusel, para alguien que utiliza un lector de pantallas, ¿no sería mucho mejor que el carrusel mostrara las imágenes a medida que vas haciendo tab? como ya lo hace por defecto si no le agregamos el tabindex. Porque, creo que, al obligar al usuario de lector, a tener que hacer tab en los botones de forward y backward para mover el carrusel, sólo estamos estropeando su UX. . ¿Qué piensan ustedes? . Yo le veo más utilidad al tab index, en un carrusel mucho más grande, donde, efectivamente no queremos que el usuario tenga que visualizar todas las imágenes. Pero en este caso, al ser sólo 5 imágenes lo considero innecesario.
Hola Gabriel :)
Pienso que, como Juliana lo indica, la idea es acercar la experiencia de un usuario que usa teclado a la del usuario que usa mouse.
Aunque entiendo completamente lo que indicas, pensaría que la navegación por el carousel a través del tab (llamémosle de forma "automática" y sin usar los botones) sería acertada si es que la navegación de un usuario del común que usa mouse, también se hace "automática", por ejemplo, al ubicar el mouse al extremo derecho (o izquierdo) del contenedor de las tarjetas.
En mi opinión, agregar botones ya hace que la persona piense que tendrá que usarlos, y si hacemos que la navegación por el carousel sea "automática" (únicamente a través del tab), se podría generar un efecto negativo sobre la persona que está usando el teclado y que no pudo hacer uso de dichos botones (porque su funcionalidad fue "automatizada").
En conclusión, me parece adecuado que tanto los usuarios de mouse como los usuarios de teclado, usen los botones para lo que fueron dispuestos.
P.D.: para no llenar tus aportes o preguntas de puntos(.) que simulen los saltos de línea, puedes usar backslash en cada línea que quieras dejar en blanco (\).
La idea es respetar los patrones de navegación del usuario. Forzar al usuario a usar tu sitio de una forma que no le es natural no es lo más recomendable. El usuario debería poder usar tu sitio de la forma en que SU herramienta funciona nativamente, esto significa que los botones accionan cosas, y eso es lo que espera el usuario, ya sabe que así es como funcionan los carruseles.
Imagina que a ti como usuario vidente te ponen un carrusel que se mueve presionando un botón que está en el footer. Bueno, ya te puedes dar una idea, de a donde quiero llegar. 😃
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.
Lo logré
Me encanta la tipografía y los colores. Con los cambios de diseño que has incorporado, la página ha mejorado mucho. Excelente trabajo!
Accesibilidad - JS
Alguna razón específica para que los números del switch sean esos?
Por lo que entiendo el carrousel 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)
es la posición en la que se encuentran y el - indica que se desplaza hacia la izquierda, cada item del carrusel con margenes y todo tiene un ancho width:270 px, cuando restas -270px quiere decir que desplazaste un item hacia la izquierda y con -540 es este que ya esta oculta mas otro que se desplaza hacia la izquierda. y se mostrarían en el carrusel de la siguiente forma:
0 (proyecto1, proyecto 2, proyecto3) -270 (proyecto2, proyecto3, proyecto4) -540 (proyecto3, proyecto4, proyecto5)
Ok, me perdí con la función de javascript
Yo un poco también, creo que los que desde hace tiempo tienen conocimiento de programación llevan la ventaja.
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 <3
desde mi perspectiva se escribio un monton de codigo que al final hace menos accesibles los elementos del carrusel a un usuario con lector de pantalla
El switch dentro del JavaScript, solo mejora en este caso la navegación del carrusel por el teclado. La accesibilidad por mouse se mantiene
Resumen: Manejando el foco del teclado usando JavaScript
En esta clase se explica cómo hacer que un carrusel sea accesible para usuarios que navegan con teclado, usando el atributo tabindex y JavaScript.
Tabindex indica si un elemento puede recibir foco y si participa en la navegación secuencial con la tecla Tab.
Valores principales de tabindex:
tabindex="-1" Permite enfocar el elemento solo de forma programática, pero lo excluye de la navegación con teclado. Se usa para ocultar elementos que no están visibles, pero debe usarse con cuidado para no romper la igualdad de interacción.
tabindex="0" El elemento es enfocable y sigue el orden natural del HTML. Es el valor más seguro y recomendado.
Valores positivos (tabindex="1", 2, etc.) Definen un orden manual de navegación. Se desaconseja su uso en sitios grandes porque puede romper la navegación si no se mantiene correctamente.
Aplicación en el carrusel
Se trabaja principalmente con botones, ya que son elementos que reciben foco por defecto.
A los proyectos que no están visibles se les asigna tabindex="-1" para ocultarlos de la navegación por teclado.
A los proyectos visibles se les elimina el atributo tabindex, permitiendo que sean accesibles nuevamente.
Se asignan clases a los botones (proyecto 1, 2, 3, etc.) para controlarlos desde JavaScript.
Uso de JavaScript
Se usan event listeners en los botones de navegación (derecha e izquierda).
Dentro de las funciones se implementa un switch que, según el estado del carrusel, cambia qué proyectos:
El mismo manejo se replica tanto para avanzar como para retroceder en el carrusel.
Resultado
El carrusel puede recorrerse con el teclado de la misma forma que con el mouse, manteniendo una experiencia consistente y accesible para todos los usuarios.
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 ?
Seguramente cada proyecto será un enlace que mande a un sitio web donde podamos ver qué era el proyecto en sí. Aquí son puras imágenes pero es con fines didácticos. Además recuerda que podemos ver con más zoom cada proyecto. Entonces me parece bien que se quede así.
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
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