Ventana Modal o LightBox Accesible

Hoy vamos a ver qué es y como crear una ventana modal o lightbox accesible, otro componente que se utiliza mucho en las páginas web, aunque quizá sea más habitual encontrarlo en aplicaciones web y aplicaciones móviles. Por supuesto, es un componente conforme con las pautas de accesibilidad WCAG 2.0 y 2.1 y podéis acceder directamente a él Ejemplo de Ventana Modal o Lightbox Accesible

¿Qué es una Ventana Modal o Lightbox?

Una ventana modal es un componente gráfico que se muestra al ejecutar un control, enlace o botón, con contenido en su interior y que visualmente cumple las siguientes condiciones:

  • La ventana modal y su contenido se muestran en primer plano.
  • El contenido que queda en segundo plano, dentro del que se encuentra el control que lanzó la ventana modal, se oscurece acentuando la diferencia entre primer y segundo plano. Como el contenido en primer plano se ve más “luminoso” que el que está en segundo plano, a las ventanas modales también se les conoce como light box (cajas de luz).

¿Cómo Funciona una Ventana Modal o Lightbox?

Centrándonos en su funcionalidad, las ventanas modales solamente permiten interactuar con el contenido que pasa a primer plano. Cuando alguien quiera acceder al contenido oscurecido, el que está en segundo plano, clickará fuera de la ventana modal, en cuyo momento se cerrará recuperando el contenido que estaba en segundo plano su aspecto y estilos originales, y pasando a estar ahora en primer plano.

Ventana Modal o Lightbox Accesible. ¿Qué debemos tener en cuenta?

Para crear una ventana modal o lightbox accesible, y de hecho, para crear cualquier componente accesible, tenemos que proponernos conseguir que la experiencia de usuario de cualquier persona sea la misma independientemente de si tienen alguna discapacidad, del tipo de ésta o del dispositivo desde el que accedamos.

Antes de nada, necesitamos tener claro qué perfiles de personas son los que van a requerir que prestemos más atención para que nuestra ventana modal o lightbox pueda considerarse accesible. En concreto, habrá dos perfiles que harán que el reto sea más interesante: personas ciegas usuarias de lector de pantalla y personas que emplean exclussivamente el teclado para acceder al contenido. ¿Nos olvidamos del resto? No, por supuesto que no, los criterios de conformidad WCAG 2.0 y 2.1 siempre hay que cumplirlos, y en España debemos conseguir como mínimo el nivel AA.

Funcionalidades de una Ventana modal

Lo primero que vamos a tener en cuenta a la hora de implementar una ventana modal es el hecho de que es un componente que se superpone al resto del contenido; es decir, el contenido de la ventana modal se mostrará en primer plano, tapando total o parcialmente el contenido que queda en segundo plano. Hacer esto visualmente es sencillo, basta con oscurecer la capa que contiene a todo el contenido que queda en segundo plano, centrando y dando un color más vivo a la capa que representa la light box; de hecho, esto podría hacerse usando solamente css.

Sin embargo, para transmitir esta experiencia a personas ciegas y personas con movilidad reducida será necesario desarrollar lógica de programación en Javascript o cualquier framework que corra del lado del cliente; como empieza a ser habitual, yo utilizaré JQuery y Bootstrap.

En la siguiente tabla relaciono la funcionalidad o comportamiento visual con su equivalente para lectores de pantalla y teclado:

Relación entre comportamiento visual y equivalente para lector de pantalla y teclado
Visual Lector de Pantalla y Teclado
La ventana modal aparece en primer plano. El foco de navegación debe llevarse dentro de la ventana modal.
Se accede solamente al contenido de la ventana modal ya que el resto está en segundo plano. El foco de navegación del teclado y el cursor virtual de los lectores de pantalla deben permanecer siempre dentro de la ventana modal y no acceder al contenido en segundo plano.
Puede cerrarse la ventana modal clickando sobre la imagen de un aspa de cierre. La imagen del aspa de cierre debe identificarse como botón por los lectores de pantalla y ser focalizable con el tabulador.
Puede volverse al contenido en segundo plano clickando fuera de la ventana modal. La ventana modal debe cerrarse pulsando la tecla escape
Puede localizarse con la vista el control que lanzó la ventana modal. El foco de navegación vuelve al control que lanzó la ventana modal cuando ésta se cierra.
El aspecto visual indica que es una ventana modal. Debe dotarse de un rol semántico para que pueda ser identificada por los lectores de pantalla.
Puede hacerse escroll con el ratón. Debe poder hacerse scroll con las teclas de dirección.

¿Qué Necesitamos para nuestra Ventana Modal o Lightbox Accesible?

  • Control que lance la ventana modal, enlace o botón, preferiblemente botón.
  • Descripción que permita identificar que el botón lanza una ventana modal:
    • Atributo aria-label para tecnologías de apoyo.
    • Mostrar la descripción con los eventos hover y focus.
  • Contenedor que:
    • Reciba el foco y que restrinja la navegación con teclado a su ámbito. Etiqueta <div> con atributo tabindex="-1".
    • Informe a las tecnologías de apoyo que es un componente de tipo ventana modal. Atributo role="dialog".
    • Informe a las tecnologías de apoyo de la ventana modal en la que se encuentran. Atributo aria-labelledby.
    • Informe a las tecnologías de apoyo que se está mostrando contenido nuevo. Primer encabezado de sección debe ser de nivel 1, <h1>.
    • Se cierre pulsando la tecla escape y un botón “Cerrar”.
    • Permanezca oculto para todas las personas cuando no está visible. Propiedad display: none.
    • Si hay gran cantidad de contenido, debe poder hacerse scroll con las teclas de dirección.
  • Debe llevarse el foco de navegación al botón que lanzó la ventana modal cuando ésta se cierre.
  • El contenido en segundo plano debe ocultarse a lectores de pantalla. Atributo aria-hidden="true".

Creando una Ventana Modal o Lightbox Accesible

Buenas noticias, el framework Bootstrap dispone del componente “modal” que contempla una buena parte de las funcionalidades necesarias para que la ventana modal sea accesible. En concreto, a parte del aspecto visual de lightbox, nos proporciona:

  • El contenedor permanece oculto a todas las personas hasta que se ejecuta el botón.
  • El foco se lleva a la ventana modal cuando ésta se lanza.
  • Puede hacerse scroll con las teclas de dirección.
  • La ventana modal puede cerrarse con un botón y/o con la tecla escape.
  • El foco de navegación vuelve al botón cuando se cierra la ventana modal.

Como podemos ver, Bootstrap nos facilita muchísimo las cosas a la hora de crear una ventana modal accesible… sin embargo, hay un comportamiento importante que no ofrece.

Bootstrap no consigue “del todo” que las tecnologías de apoyo como lectores de pantalla no accedan al contenido que queda en segundo plano. Esta es una barrera de accesibilidad que no resulta sencilla de detectar, puesto que si nos limitamos a navegar con las teclas de dirección teniendo el lector de pantalla activo, comprobaremos que el foco no “sale” de la ventana modal, es decir, el lector de pantalla no reproduce el contenido que está en segundo plano; comportamiento que conseguimos usando tabindex="-1" en el contenedor. Este comportamiento es correcto, pero puede despistar a algunas personas.
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle">

Sin embargo, si en vez de limitarnos a navegar con las teclas de dirección, accedemos a los listados de elementos que generan los cursores virtuales de los lectores de pantalla, como listas de encabezados de sección o de enlaces, comprobaremos que el contenido en background o segundo plano es detectado por los lectores de pantalla. En las siguientes imágenes ilustro la diferencia entre el resultado obtenido usando solamente Bootstrap y el resultado obtenido utilizando Bootstrap más algo de JQuery personalizado.

El lector de pantalla JAWS muestra los encabezados de sección de la ventana modal entremezclados con los encabezados que están en segundo plano.
El lector de pantalla JAWS muestra solamente los encabezados de sección que están dentro de la ventana modal o lightbox accesible.

En la primera imagen, en la que se ven tanto los encabezados de sección de la ventana modal como los del contenido en segundo plano, estamos usando directamente Bootstrap sin añadir nada más por nuestra parte.

Mientras que en la segunda imagen, en la que se ven solamente los encabezados de la ventana modal, estoy empleando JQuery para obtener el resultado que queremos conseguir.

Para que los lectores de pantalla no accedan al contenido en segundo plano necesitamos utilizar el atributo aria-hidden="true" en una etiqueta que contenga todo el contenido.
<div id="global_container" aria-hidden="true">

No obstante, debemos tener en cuenta una característica fundamental del atributo aria-hidden, y es que es un atributo heredable. Es decir, si lo aplicamos en una etiqueta <div>, todo el contenido que se encuentre dentro se ocultará a las tecnologías de apoyo, aunque algo de este contenido pudiese usar aria-hidden="false" para que vuelva a estar visible.
<div id="global_container" aria-hidden="true">
<p>Este párrafo estará oculto.</p>
<p aria-hidden="false">Este párrafo también estará oculto.</p>
</div>

Podéis encontrar más información sobre el atributo aria-hidden y el resto de atributos de ARIA en su página Accessible Rich Internet Applications (WAI-ARIA) 1.1

Esto implica que el contenedor de la ventana modal debe quedar “fuera” del contenedor global ya que de lo contrario, las tecnologías de apoyo como lectores de pantalla no podrán detectar ningún contenido.

  • Correcto:
    <div id="global_container" aria-hidden="true">

    </div>
    <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle">
    <h1 class="modal-title" id="exampleModalLongTitle">Título de la Ventana Modal</h1>
    </div>
  • Incorrecto:
    <div id="global_container" aria-hidden="true">

    <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle">
    <h1 class="modal-title" id="exampleModalLongTitle">Título de la Ventana Modal</h1>
    </div>
    </div>

Puede parecer trivial a simple vista, pero no lo es. Si tenemos la capacidad de editar directamente el código html la solución es tan sencilla como agrupar todo el contenido en una etiqueta <div> editada directamente por nosotros y dejando fuera el contenedor de la ventana modal.

Por otra parte, si el sitio web que estamos editando utiliza un cms, la cosa se complica ya que las páginas son “construidass” por medio de diferentes ficheros php, que además podrían verse modificados cuando hay actualizaciones. Este es mi caso puesto que utilizo WordPress como gestor de contenido.

Al crear esta entrada, he incluido todo el código de la ventana modal en la caja de edición junto con el resto del contenido, lo que implica que no puedo ocultar el contenido en segundo plano de manera tan fácil como sería “escribir” un contenedor en la página. Además, el tema que uso tampoco emplea un contenedor para agrupar toda la información de la página, así que todo lo tengo que crear al vuelo.

Y así es como consigo crear una ventana modal totalmente accesible, extrayendo el código de la ligtbox, agrupando todo el contenido en una etiqueta <div> y ubicándolo después de esta etiqueta.

Importante: al usar un contenedor global, el código de la lightbox quedará necesariamente antes o después de dicho contenedor; no olvidéis usar aria-hidden="true" en la etiqueta global, ya que de lo contrario las tecnologías de apoyo detectarán el componente al principio o al final de la página, totalmente desubicado, “lejos” del control que lo lanzó.

Ahora sí, el resultado podéis comprobarlo a continuación.

P.D: os sonará el contenido de la ventana modal accesible del artículo Menú Acordeón Accesible… disfrutad de las diferencias.


Comparte esta entrada:

Deja un comentario