Carrusel Accesible

En esta ocasión os traigo un carrusel accesible conforme con las pautas de accesibilidad WCAG 2.1 y que podeis probar justo a continuación; si lo que os apetece es ir primero a la explicación, podeis pinchar el siguiente enlace: Creando un Carousel Accesible.

Un carrusel es un componente que nos permite ubicar contenido en bloques llamados “diapositivas” o “slides” y que habitualmente van apareciendo de u no en uno de manera automática. Como los diferentes contenidos se van cargando cíclicamente, parece que éstos van dando vueltas como si se tratase de un carrusel o un tíovivo.

Carrusel y Accesibilidad

Los componentes que tienen movimiento siempre suponen un reto en lo que a accesibilidad se refiere; en el caso de los carruseles, además, el componente va modificando el DOM a medida que se muestra y oculta contenido, por lo que su utilización genera mucha controversia en la comunidad de personas que nos dedicamos a la accesibilidad TIC.

Sin embargo, todo… repito… todo, puede ser accesible y un carrusel también. ADemás, si hablamos de diseño universal las soluciones no pueden y no deben pasar por eliminar componentes o buscar alternativas diferentes por cada tipo de usuario puesto que, aunque a priori podamos sentirnos tentados de pensar que es la opción más sencilla, de lejos es la opción menos escalable; algo que no tardará en generar problemas derivados del mantenimiento de diferentes versiones.

La complejidad en materia de accesibilidad va ligada con la propia del componente que estemos desarrollando, de modo que conseguir un componente accesible no tendría por qué resultar más difícil que uno que no lo sea, salvo por el hecho de la falta de costumbre que aún existe a la hora de aplicar la accesibilidad de manera transversal a todos nuestros diseños.

Un carrusel en sí mismo es un componente bastante complejo pues nos obliga a tener en cuenta aspectos de diseño que en otro tipo de elementos son más sencillos de manejar, derivados del hecho de que es un componente en continuo movimiento.

Creando un Carrusel Accesible

Disponemos de diferentes alternativas de carruseles para incluir en nuestro sitio: desde uno muy sencillo que se limite a mostrar cíclicamente una serie de imágenes sin ningún tipo de lógica para controlarlo, hasta los más completos que cuentan con lógica para pasar de diapositiva, ir a una slide en concreto, pausarlo, etc…

Como nuestro objetivo es el de disponer de un carrusel accesible según las pautas WCAG 2.0 y 2.1, no podremos conformarnos con la versión más sencilla en la que no podemos tener ningún control sobre su movimiento. De hecho, a medida que vayamos contemplando los diferentes perfiles de usuarios que pueden utilizarlo, iremos viendo cómo vamos a necesitar de la versión más completa.

Para este ejemplo he vuelto a echar mano del framework Bootstrap, sobre todo por los estilos y los efectos que se producen al pasar de diapositiva y, aunque también viene bien la parte de Javascript que incorpora, al final he tenido que sobreescribir prácticamente todo su funcionamiento.

¿Qué tenemos que tener en cuenta?

Los aspectos de un carrusel que deberemos tener en cuenta para trasladar una buena experiencia de usuario a todas las personas son:

  • Contextualizar el carrusel: encabezados de sección y landmarks.
  • Ha de poder saltarse: skiplink para saltar el carrusel.
  • Cualquier persona debe poder atender al resto de información que no está en el carrusel sin que se vea continuamente distraída por éste: el tiempo entre diapositiva y diapositiva debe ser suficientemente largo, mínimo 3 segundos y preferiblemente más.
  • Todas las personas deben disponer de tiempo suficiente para leer e interactuar con el contenido de cada diapositiva: el carrusel debe poder pararse con los eventos de hover y focus, así como ejecutando un control exclusivo para ello.
  • Debe proporcionar la posibilidad de ir directamente a una diapositiva en concreto: lista de controles (como enlaces) que al ejecutarse cargue la slide en cuestión.
  • Debe poder pasarse a la diapositiva anterior y siguiente de manera sencilla: botones anterior y siguiente, teclas izquierda y derecha del teclado.
  • El carrusel debe indicar en todo momento qué slide está activa: visual y semánticamente.
  • Cuando se accede a la diapositiva anterior o siguiente, las personas ciegas también deben ser informadas: live region de ARIA.
  • Las diapositivas van apareciendo de una en una: el resto deben ocultarse a todas las personas con “display: none;” por ejemplo.

Contextualización del carrusel

Las personas que emplean lector de pantalla necesitan saber que el tipo de contenido al que están accediendo pertenece a un carrusel, especialmente si éste se carga con las diapositivas en movimiento ya que de lo contrario, podrían sentirse confundidas al intentar acceder al contenido de una diapositiva que podría haber cambiado automáticamente y que ya no está disponible.

Para conseguirlo, es importante emplear un encabezado de sección que titule todo el carrusel así como titular cada diapositiva.

En este ejemplo he empleado un título de nivel 2 oculto visualmente pero accesible para lectores de pantalla que no interferirá con el SEO de nuestra página al crearse con atributos de ARIA:
<div class="screen-reader-text" role="heading" aria-level="2">Ejemplo de Carrusel Accesible</div>

Como el carrusel está titulado por un encabezado de nivel 2, cada diapositiva se titulará con un encabezado de nivel 3 para mantener la jerarquía de encabezados.

A parte de los encabezados, no está demás emplear landmarcs que permitan a las tecnologías de apoyo identificar las diferentes regiones del componente:
El lector de pantalla JAWS muestra tres regiones de contenido identificadas como pertenecientes al carrusel.
En la imagen anterior pueden apreciarse tres regiones de navegación que se han creado de la siguiente manera:

  • <div role="contentinfo" aria-label="Carrusel Accesible">
  • <div class="carousel-item" role="region" aria-label="Diapositiva 1: La Palma desde La Gomera">
  • <div role="navigation" aria-label="Controles del Carrusel">

Saltar el Carrusel

En ocasiones un carrusel puede albergar gran cantidad de contenido, incluyendo controles focalizables como enlaces o botones. En estos casos, es importante proporcionar a las personas que emplean el teclado o un pulsador para navegar las páginas una solución para que puedan saltar todo el carrusel ya que se trata de un bloque de contenido.

La manera de hacerlo es la misma que ya estamos acostumbrados a hacer cuando incluimos un enlace para saltar al contenido principal, un skip link.
<a id="skipCarousel" class="screen-reader-text skip-link" href="#pauseButton" title="Saltar carrusel">Saltar carrusel</a>
En este ejemplo, el “ancla” al que llevará el enlace será el botón para pausar el carrusel ya que es el último control del componente; así, en la siguiente tabulación, la persona usuaria ya estará fuera de él.

Pausa y Tiempo entre Diapositivas

Debemos asegurarnos de que nuestro carrusel no pueda suponer un punto de distracción tal, que haga imposible el acceso del contenido a determinadas personas, como por ejemplo personas con hipersensibilidad al movimiento o personas con déficits de atención.

Para ello, el tiempo entre diapositivas debe ser de al menos 3 segundos, y preferiblemente más. En este ejemplo es de 5 segundos.

Habrá personas que por diferentes razones necesitarán poner en pausa el carrusel para poder acceder a toda la información que se muestra en las diapositivas. Podemos pensar en alguien que está accediendo desde un dispositivo móvil dentro de un transporte público en el que tiene que estar pendiente de cuál es la parada en la que debe bajarse.

Para cubrir todos los posibles casos de uso y mejorar la experiencia de usuario de cualquier persona, he hecho que este carrusel accesible pueda pausarse y reanudarse de tres maneras:

  • Evento “hover”: el carrusel se pausa cuando se pone el puntero del ratón encima y se reanuda cuando se aparta.
  • Evento “focus”: el carrusel se pausa cuando se focaliza cualquier control del carrusel.
  • Botón Pausar / Reanudar: el carrusel puede pausarse ejecutando un botón y reanudarse volviendo a pulsar dicho botón.

Cuidado con el último caso, hemos de asegurarnos de cambiar adecuadamente el icono y descripciones del botón, según se vaya a pausar o reanudar el movimiento del carrusel.

Acceso a una Diapositiva Concreta

Este ejemplo de carrusel accesible incluye controles que permiten acceder a una diapositiva concreta.

Para ello, he utilizado una lista en la que cada elemento contiene un enlace cuya descripción accesible, atributos aria-label y title o data-original-title es el título de la diapositiva que se quiere mostrar.
<li>
<a href="#" data-target="#carouselExampleIndicators" data-slide-to="0" aria-label="Diapositiva 1: La Palma desde La Gomera" data-toggle="tooltip" data-placement="bottom" aria-current="false" data-original-title="Diapositiva 1: La Palma desde La Gomera"></a>
</li>

Los controles pueden ser enlaces o botones, lo importante es que sean focalizables y que estén “dentro” de los elementos de listta.

Paso de Diapositivas

El paso a la diapositiva siguiente y anterior es muy interesante ya que nos va a hacer pensar en cómo notificar el cambio a una persona ciega puesto que si no lo hacemos, una persona que emplea un lector de pantalla podría quedarse pulsando el botón “Siguiente” indefinidamente sin saber que el contenido está cambiando.

Esta funcionalidad también tiene interés porque vamos a aportar dos maneras distintas de pasar de diapositiva: con los botones anterior y siguiente, y con las teclas de dirección izquierda y derecha. en ambos casos, deberemos informar a las personas ciegas del cambio que se produce.

Para lograrlo, en primer lugar tendremos que hacer que los controles para cambiar de diapositiva sean controles focalizables. En este caso, los iconos de flecha anterior y flecha siguiente son enlaces que hacen uso del atributo role="button", lo que hará que las tecnologías de apoyo los detecten como botones.
El lector de pantalla JAWS muestra el Botón Siguiente.
<a id="next_slide" class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next" aria-label="Siguiente" data-toggle="tooltip" data-placement="bottom" data-original-title="Siguiente">
<i class="fas fa-arrow-right" aria-hidden="true"></i>
</a>

Vamos a analizar el código anterior:

  • como adelantaba, el control es un enlace con semántica de botón, punto que conseguimos con el atributo role="button".
  • Debido a que los botones están identificados por unos iconos sin texto visual que los acompañe, es necesario emplear el atributo aria-label para que los lectores de pantalla dispongan de la descripción textual accesible. De igual modo, tenemos que proporcionar esta descripción a las personas que coloquen el puntero del ratón encima o que focalicen el botón con el teclado. Esto lo conseguiremos echando mano de los tooltips de Bootstrap. Esta misma técnica se emplea en el botón Pausar.
  • Necesitamos que los iconos sean visibles incluso con el “alto contraste” de Windows activo, y que además puedan aumentar de tamaño sin perder calidad. Bootstrap proporciona unos iconos pero son imágenes en background, por lo que no nos sirven. En su lugar, empleo Font aWesome.
  • A la hora de emplear Font aWesome, debemos tener cuidado de que los iconos no “introduzcan” caracteres extraños que puedan ser identificados por los lectores de pantalla, dificultando la navegación de personas ciegas. Para evitar este posible comportamiento, utilizaremos el atributo aria-hidden="true" en la etiqueta <i>.

Para que las diapositivas pasen pulsando las teclas de dirección izquierda y derecha, tenemos que echar mano del evento “onkeydown”, que viene acompañándonos desde los artículos Ejemplo de Menú de Pestañas Accesible y Menú Acordeón Accesible.

Hasta aquí el cambio de diapositiva, cuyos efectos visuales son evidentes y fáciles de percibir… pero, ¿cómo avisamos a las personas ciegas?

A las personas ciegas las avisaremos del cambio de diapositiva creando una live region de ARIA, y que podéis consultar con más detalle en la sección Cambio de Diapositiva y Lectores de Pantalla

Aviso del Cambio Automático de Diapositiva

Visualmente es muy sencillo percibir el cambio de diapositiva cuando el carrusel está en movimiento, puesto que vamos viendo cómo cambia su contenido.

Si en nuestro carrusel, como es este caso, utilizamos controles que nos permiten acceder a una diapositiva en concreto, la cosa se complica un poco puesto que debemos ir indicando en cada momento qué diapositiva se está mostrando, resaltando de alguna manera el control correspondiente.

Y si lo llevamos al plano de una persona ciega, ese “aviso” visual, también tiene que hacerse de manera semántica.

Bootstrap nos aporta el aviso visual, pero no el semántico, por lo que tendremos que encargarnos nosotros de hacerlo. Para ello, en este carrusel accesible he utilizado el atributo aria-current que tomará el valor true en el control activo, y false en los demás.

Pero como ya sabremos a estas alturas, los atributos de ARIA aportan semántica, no funcionalidad de modo que el cambio del valor true a false del atributo tendremos que hacerlo por medio de lógica de programación.

Apoyándonos en el comportamiento de Bootstrap que “agrega” la clase “active” al elemento de lista de la diapositiva visible, implementaremos el patrón MutationObserver para “observar” el cambio en los elementos <li> de modo que cuando uno de ellos contenga la clase “active”, el enlace que contiene establecerá a “true” el valor del atributo aria-current.

Puede que os preguntéis por que no usamos la live region de ARIA que hemos empleado en el cambio de diapositiva anterior y siguiente… la explicación la tenéis también en la sección Cambio de Diapositiva y Lectores de Pantalla

Conclusiones para un Carrusel Accesible

Podemos disponer de un carrusel accesible en nuestros sitios. Solamente necesitamos pensar en las diferentes personas que van a acceder a él y cómo conseguir que lo hagan.. Vamos, diseño centrado en el usuario; nada nuevo.

Podéis plantearme cualquier duda o propuesta en los comentarios, estaré encantado de responderos.

Cambio de Diapositiva y Lectores de Pantalla

El cambio de diapositiva se percibe de manera muy sencilla visualmente, pero las personas ciegas también necesitan saber que el contenido a cambiado… pero CUIDADO, la manera de indicar este cambio dependerá de la situación en la que se encuentre el carrusel y la acción que esté desarrollando la persona ciega.

Así, si el carrusel está en movimiento, no deberemos crear mensajes que el lector de pantalla vaya leyendo automáticamente puesto que solamente estaremos introduciendo “ruido” en la navegación y haciendo que el acceso al contenido sea imposible.. Por tanto, mientras el carrusel esté en movimiento, la manera en que informaremos a los lectores de pantalla de las personas ciegas de la slide activa en cada momento, será por medio de información semántica en los controles de acceso a las diapositivas; es decir, usando el atributo aria-current en el enlace de la diapositiva activa. Este atributo tomará valor “true” o “false”, dependiendo de si la diapositiva está visible o no, respectivamente.

Una alternativa al método anterior consiste en utilizar una etiqueta <span> oculta visualmente pero accesible a los lectores de pantalla con el texto “Activa” o “Seleccionada”.

Por otra parte, cuando el carrusel esté parado, deberemos informar a las personas ciegas del cambio de diapositiva cuando se ejecuten los botones anterior o siguiente y cuando se pulsen las teclas de dirección flecha izquierda o flecha derecha. En esta ocasión sí, usaremos una ARIA live region:

Una región activa o live region se crea utilizando el atributo aria-live.
<div aria-live="assertive">…</div>

En el caso que nos ocupa, informar del cambio de diapositiva en un carrusel, el mensaje no tiene por qué ser visible, por lo que haremos uso de alguna clase que nos permita ocultar el texto visualmente mientras se mantiene accesible para los lectores de pantalla.
<div class="screen-reader-text" aria-live="assertive"></div>


Para que los lectores de pantalla se “den cuenta” del cambio en una región activa o live region, es necesario que se produzca una modificación en el DOM y, para que esta modificación cuente con la mayor compatibilidad posible entre diferentes lectores de pantalla, tendremos que crear el mensaje “al vuelo” junto con su etiqueta contenedora.
<span id="slide_message">Diapositiva X</span>

El texto de la etiqueta <span> deberá coincidir con el título de la diapositiva que se esté mostrando.

Finalmente, debemos tener en cuenta un aspecto importante. El mensaje que estamos creando con la live region es reproducido por los lectores de pantalla y lo estamos creando en un punto determinado del DOM, por lo que aunque no sea visible, seguirá siendo detectado por los lectores de pantalla si no lo borramos.

En este ejemplo de carrusel accesible la etiqueta <span> la elimino transcurrido un segundo tras su creación. No podemos hacerlo inmediatamente después ya que los lectores de pantalla no tendrían tiempo de percibirlo.

Y hasta aquí la explicación de qué es lo que tiene que cumplir un carrusel para que sea accesible. Espero que os resulte de interés.

Comparte esta entrada:

Deja un comentario