El error más grave que puedes cometer en la página web de tu entidad, poner un Slider.

Tabla de contenidos

Como diseñador web especializado en accesibilidad, me encuentro con una discursión ( con cariño ) continua con mis clientes, que consiste básicamente en explicarles una y otra vez por qué no deben usar un slider o carrusel de imágenes (llámalo como quieras) tanto en la página de inicio como en las demás páginas.

Y sí , se lo que estás pensando … «Pero Javi , si la página web de Plena inclusión y COCEMFE lo usan , entonces será accesible y una opción correcta».

Pues nada más lejos de la realidad y ya te digo que si esto fuera un concurso de televisión escucharías ese típico pitido que suena cuando el concursante está eliminado: Meeeeeeeeeeeec. ¡Fuera, eliminado!.

¿ Qué es un carrusel o un slider ?

Algunas personas los llaman carruseles, otras los llaman sliders. Un carrusel o un slider es un paradigma de visualización de contenido en el que se presenta una lista de elementos de contenido relacionados en paneles como una presentación de diapositivas normalmente en horizontal.

La presentación de diapositivas generalmente se navega con las teclas de flecha «siguiente» y «anterior». Por lo general, cada elemento tiene un gráfico, algo de texto y un enlace asociado. Los carruseles pueden tener uno o varios paneles en el área visible.

Aquí debajo te dejo un ejemplo de un slider.

Ejemplo Slider de la página web de Plena Inclusión

¿ Por qué estoy escribiendo un artículo sobre sliders ?

¡ Oye qué buena pregunta !. Respuesta rápida, odio los sliders ( opinión personal no solicitada ).

El paradigma del slider para mostrar contenido existe solo por una razón ( o varias ), porque cuando se diseña el contenido de la página web no aplicas una buena estrategia de arquitectura de la información y no sabes que busca realmente tu público objetivo. Así que un slider te evita pensar cuál es la información que necesitan tus usuarios y directamente le ofreces de todo a ver si cuela.

Los estudios muestran que los usuarios rara vez interactúan con ellos y los expertos tienen una opinión muy clara: Este recurso no está nada bien, está pasado de moda, y afecta a la usabilidad y accesibilidad de tu página web.

La Universidad de Notre Dame realizó un estudio en su sitio web para determinar la efectividad de un slider de la página de inicio y descubrió que de las 3.755.297 personas que visitaron su página de inicio, solo un 1% realmente hizo clic en un elemento del slider. Y el 89% de esos clics fueron en la diapositiva en la primera posición. Las personas simplemente no les prestan atención.

En todas las pruebas que he hecho, los carruseles en la home ( o página de inicio ) son completamente inefectivos. En primer lugar, cualquier información más allá del primer vistazo tiene un enorme descenso en la interacción del visitante. En segundo lugar, las posibilidades de que el carrusel muestre lo que el usuario está buscando son pequeñas. Así que en ese caso el carrusel se convierte en un banner / fotografía muy grande que es ignorado automáticamente.

Test tras test, lo primero que hacen los usuarios cuando llegan a una página con un carrusel grande es hacer scroll hasta pasarlo y empezar a buscar la información que necesita para cumplir con su objetivo.

Sin embargo, también son uno de los recursos más populares que usan los diseñadores web para mostrar contenido. Y aunque pienso que tu web debería estar diseñada para cargar rápido y ser accesible. Recuerda siempre esta frase, en el diseño web los efectos innecesarios distraen, perjudican la velocidad de carga y solo sirven para elevar el ego del diseñador. Yo prefiero eficacia a efectismo.

¿ Todavía sigues pensando en poner un slider en la página web de tu entidad ? Entonces, si vamos a persistir en el uso de carruseles, aprendamos a diseñarlos de la manera más accesible posible.

¿ Cómo usan las personas los carruseles ?

Bueno, como te he comentado antes, los estudios muestran que la mayoría de las personas no usan sliders. Pero podemos considerar tres grupos de población generales que podrían usarlos:

  • Usuarios videntes que usan un dispositivo señalador como el ratón.
  • Usuarios no videntes que usan un lector de pantalla y un teclado para navegar.
  • Usuarios videntes que usan un teclado para navegar.

Nota: Hay una variedad de otros usuarios que podríamos considerar, pero comencemos con estos tres para crear una línea base para la accesibilidad.

Sliders para usuarios videntes y que usan un ratón

Los usuarios videntes perciben el contenido del carrusel como una serie de paneles que generalmente se navegan mediante botones con flechas. La principal consideración de accesibilidad del carrusel para los usuarios videntes es no hacer que se reproduzca automáticamente.

Si no te queda otra opción que el carrusel se reproduzca automáticamente, debes proporcionar un botón de pausa / detención. Si implementas este botón, colócalo delante del carrusel y proporciona un texto de enlace descriptivo como «Pausar contenido animado».

Emplear puntos de navegación debajo del carrusel es otra gran señal visual para usuarios videntes. Donde el número de puntos representa el número de conjuntos de paneles disponibles para hacer clic. Un estado activo en el punto le dice al usuario qué panel está viendo actualmente y haciendo clic le permitirá saltar al siguiente panel.

Las flechas “Anterior” y “Siguiente” deberían tener estados deshabilitados, me explico a continuación.

La flecha «anterior» debe deshabilitarse cuando el carrusel muestra el primer panel. La flecha «siguiente» debe desactivarse cuando el carrusel muestra el último panel. Alternativamente, el carrusel puede ser en bucle (hasta el infinito y más allá ), lo que significa que el usuario siempre puede retroceder o avanzar utilizando las teclas de flecha.  (Sin embargo, hay una advertencia sobre esto a continuación para los usuarios de teclados).

Sliders para personas que usan un teclado para navegar

En un slider para una persona con discapacidad visual, la interacción más importante es qué puedan pasar por cada diapositiva. A medida que avanzan, la información relevante debe incluirse en el área que obtiene el foco para que tengan un contexto claro en cada panel.

Cuando una una persona con discapacidad visual navega por la página web de tu entidad, debe pasar naturalmente al panel 1 del carrusel (sin necesidad de saber si es un slider o no ). Idealmente, el enlace del panel 1 debería envolver todo el texto del panel actual .

En ese caso, el lector de pantalla leerá todo el texto:

  • «Título del panel 1. Aquí hay una descripción del panel que le permite a alguien saber de qué se trata este panel.
  • Llamada a la acción del Panel 1 «. Ten en cuenta que en ciertos casos, escuchar solo la etiqueta del link ( enlace )  puede no ser suficiente para darles contexto suficiente.

Por otro lado una persona vidente que navega con el teclado necesitará un indicador de foco visible. Este es un cuadro que aparece alrededor del contenido que tiene el foco del teclado.

Si la persona presiona «enter» en su teclado mientras el panel tiene el foco, se le dirigirá al enlace en ese panel. Si presionan la tecla de tabulación, el foco se moverá al siguiente panel.

Una vez que el usuario ha tabulado todos los conjuntos de paneles, el foco debe moverse al siguiente elemento de la página web que sigue al slider. Ten en cuenta que no queremos atrapar al usuario del teclado en el slider,  necesitan poder pasarlo.

¿ Deberían los botones con flechas del slider funcionar para los usuarios que acceden desde el teclado ?

Hacer que los botones con flechas del slider funcionen con el teclado resulta una interacción engorrosa para los usuarios que no usan ratón.

El problema es que para un usuario de solo teclado, si el foco está en los botones de flecha, no está en el contenido de la diapositiva que se muestra.

Para un usuario con discapacidad visual con teclado, podría usar el botón «siguiente» para recorrer los paneles, pero considera cómo funcionaría el orden de foco en este ejemplo:

  • Al presionar «Enter» se mueve el carrusel para mostrar el siguiente panel.
  • Si desea pasar el foco al contenido, la persona necesitaría «salir» del foco del botón «siguiente» al panel que le interesa.  Además, ten en cuenta, que esta funcionalidad no sería accesible para un usuario no vidente. El usuario no vidente escucharía «siguiente», el conjunto de paneles se movería, y no tendrían idea de que información hay dentro de esa sección del slider.

El desarrollador web debería tratar de administrar el enfoque para que tan pronto como un usuario interactúe con el botón siguiente, el enfoque pase automáticamente al siguiente panel después de mover el carrusel, pero esto también podría ser confuso para el usuario.

Conclusión

La persona vidente no está obligada a usar el slider en absoluto. Pueden hacer clic en la sección de la página web que quieran. Sin embargo, los usuarios de teclados se ven obligados a navegar por el carrusel en su totalidad y no es justo.

Puede parecer que no es gran cosa para un slider simple. Pero, ¿qué pasa con un carrusel más grande con muchos paneles? ( Por desgracia existen ).

Afortunadamente, existe una práctica recomendada para permitir que los lectores de pantalla omitan grandes bloques de contenido. En el caso de un carrusel grande, podría aparecer un enlace oculto de «saltar a contenido» en el foco del teclado. Por ejemplo, considera un carrusel de noticias. El enlace oculto debería estar antes de el carrusel con el texto, «Omitir el carrusel de noticias».

Alternativamente, deberías proporcionar un encabezado sobre el slider h1,h2,h3 (y sobre cada sección de contenido de la página) para que las personas puedan navegar a través de los encabezados.

Soy especialista en accesibilidad web

Déjame mostrarte mi forma de trabajar y consigue una página web fácil de usar, bien estructurada y accesible.