Menú Acordeón Accesible

Sigo con el serial de menús dinámicos accesibles y en esta ocasión os traigo un menú acordeón accesible según las pautas WCAG 2.1, para el que de nuevo he vuelto a utilizar los frameworks Bootstrap para el diseño y funcionalidad básica y JQuery para mejorar su accesibilidad.

Como ya introduje varios de los conceptos necesarios que debemos tener en cuenta a la hora de desarrollar un menú dinámico en el artículo Menú de Pestañas Accesible, he podido unificar en un mismo post la explicación y un ejemplo en funcionamiento.
Podéis saltar directamente a este ejemplo pulsando el siguiente enlace Ejemplo Menú Acordeón – 4 Estaciones en Vitoria-Gasteiz.

¿Qué es un Menú Acordeón?

Como siempre, comenzaré explicando qué es lo que se entiende por un control de este tipo. Un menú acordeón es un tipo de control formado por varios controles que muestran contenido de forma dinámica a medida que se van ejecutando. La característica que hace que este tipo de menús reciban el nombre de menú acordeón es que solamente hay una región de contenido visible al mismo tiempo; es decir, si por ejemplo se está mostrando el contenido correspondiente al primer control y ejecutamos el segundo, el contenido del primero se ocultará antes de mostrar este último. La experiencia o sensación que se quiere conseguir es la de un archivador en el que para acceder a los documentos de uno de los huecos
tenemos que abrir ese hueco cerrando o comprimiendo los demás
Por qué se llama menú acordeón y no menú archivador es algo de lo que no tengo ni idea… pero si buscamos un poco veremos que es el nombre estandarizado y que en inglés es “accordion menu”.

En definitiva y al igual que los menús de pestañas, es otro tipo de control que permite agregar gran cantidad de contenido a una misma página sin “saturar” a nuestros visitantes.

Menú Acordeón Accesible y Menú de Pestañas Accesible, Diferencias

Cuando accedemos al contenido mediante un ratón quizá no encontremos grandes diferencias entre un tipo de menú y otro, pero cuando empleamos exclusivamente el teclado sí las encontraremos y si, además, usamos una tecnología de apoyo como un lector de pantalla, los requisitos de accesibilidad que debemos tener en cuenta aumentan aún más estas diferencias.
En la siguiente tabla ilustro las diferencias que existen entre un menú y otro:

Diferencias entre Menú Acordeón Accesible y Menú de Pestañas Accesible
Menú Acordeón Accesible Menú de Pestañas Accesible
Foco No es necesario gestionar el foco de navegación mediante programación, aunque sí es recomendable. Es imprescindible gestionar el foco de navegación mediante programación porque si no las tecnologías de apoyo como lectores de pantalla no podrían usarlo (sería inaccesible).
Navegación entre controles Determinada por el orden de tabulación de la página, sería accesible si no se hace nada. Recomendable añadir funcionalidades de teclado. Navegación cíclica con las teclas de dirección.
Ejecución de los controles Click con botón izquierdo del ratón y tecla “enter” del teclado. Click con botón izquierdo del ratón, con tecla “enter del teclado” y a medida que se van seleccionando las pestañas con las teclas de dirección.
Contenido El contenido se ubica entre los controles; el contenido del botón 1 se colocará entre el botón 1 y el botón 2. El contenido se ubica después de todos los controles, el grupo de pestañas es indivisible; no puede existir contenido entre una pestaña y otra.
Navegación al contenido Se debe poder acceder tabulando al primer elemento focalizable del contenido desde el botón ejecutado. Como el código del contenido se encuentra entre los controles, no es necesario hacer nada. Se debe poder acceder al contenido tabulando desde la pestaña seleccionada. Como el foco de navegación se gestiona con programación, es necesario usar tabindex="-1" en las pestañas que no están seleccionadas para no obligar a los usuarios a pasar por ellas antes de acceder al contenido.
Roles de ARIA No es necesario emplear ninguno. role="tablist", role="tab", role="tabpanel".

Como podemos ver, hay varias diferencias importantes entre un menú y otro que afectan de manera directa a la accesibilidad. Lo que no podemos afirmar, es que un menú sea más accesible que otro, la elección de un menú acordeón o menú de pestañas dependerá de otras cuestiones como el cms que estemos usando, los requisitos de diseño del proyecto y en última instancia de nuestro gusto. Sin embargo, sí es importante seguir teniendo en cuenta la “máxima” del diseño accesible: en accesibilidad las cosas tienen que ser lo que parecen y viceversa:

  • No debemos dar aspecto de pestañas a un menú que funciona como un acordeón ni al revés.
  • Tenemos que respetar la semántica de cada menú, que en el caso del menú de pestañas vendrá definida por los atributos role="tablist" y role="tab", mientras que en un menú acordeón emplearemos controles de tipo enlace o botón dentro de encabezados de sección

Creando un Menú Acordeón Accesible

para desarrollar el menú acordeón que podéis probar más adelante he utilizado Bootstrap y JQuery. El framework Bootstrap nos proporciona una serie de atributos que nos permiten crear un componente de este tipo de manera muy sencilla y cuya funcionalidad podríamos considerar accesible sin necesidad de realizar ningún cambio por nuestra parte.
Podeis echar un vistazo a la documentación de Bootstrap sobre componentes desplegables. Yo he seguido el “Accordion Example Anchor”.

Como podemos ver, todo el componente se encuentra agrupado en una etiqueta <div> identificada como "accordion":
<div id="accordion">…</div>

Dentro de esta etiqueta “general” introduciremos los controles y su contenido teniendo en cuenta que el contenido de cada control deberemos colocarlo siempre a continuación de éste:
<div class="card">
<div class"card-header" id="headingOne">
<h3 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Primavera
</button>
</h3>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<img src="…/Primavera_Vitoria_Arcoiris_Doble.jpg" alt="Imagen de un arcoiris doble tras una tarde de tormenta en Vitoria-Gasteiz." title="Imagen de un arcoiris doble tras una tarde de tormenta en Vitoria-Gasteiz." />
</div>
</div>
</div>

Voy a aclarar varias cosas sobre el código anterior:

  • Si usamos Bootstrap, la semántica del control tiene que ser siempre de botón. esto podemos conseguirlo utilizando una etiqueta button o un enlace que emplee role="button"
    <a href="…" role="button">Primavera</a>
  • El control siempre tiene que ir dentro del encabezado de sección, por eso las etiquetas button y h3 están destacadas en negrita. si lo hiciésemos al revés, la etiqueta de encabezado <h> dentro de la etiqueta <button>, generaríamos barreras de accesibilidad a tecnologías de apoyo como lectores de pantalla consiguiendo un componente inaccesible por no tener en cuenta una cuestión que a priori podríamos considerar trivial.
  • El atributo data-toggle="collapse" indicará a Bootstrap que estamos creando un componente que despliega y pliega contenido.
  • El atributo data-target hace referencia al contenido de este control. El framework Bootstrap se encargará de mostrar y ocultar el contenido asociado a dicho control.
  • El atributo aria-expanded informará a los lectores de pantalla si el contenido está visible u oculto. Este atributo debe modificarse mediante programación, pero Bootstrap se encarga de ello por nosotros.

    • aria-expanded="true": el contenido es visible.
    • aria-expanded="false": el contenido está oculto.
  • El atributo data-parent refiere a la capa contenedora y que hemos identificado como “accordion”.

Revisando el código anterior podemos ver con claridad cómo la semántica de este menú acordeón es totalmente diferente a la de un menú de pestañas. Mientras que un lector de pantalla detectará como “pestañas” los controles de un menú de pestañas, en el menú acordeón los lectores de pantalla detectarán los controles como botones y también como encabezados de sección.
El lector de pantalla JAWS muestra tres controles identificados como pestañas.

Mejorando la Accesibilidad de nuestro Menú Acordeón

Con el código anterior, replicándolo tantas veces como controles necesitemos y haciendo las modificaciones lógicas, podemos conseguir un menú acordeón accesible; pero como tampoco tiene mucho mérito, vamos a mejorar la accesibilidad y la experiencia de usuario de las personas que utilizan solamente el teclado para acceder a la información así como de las personas ciegas que emplean lectores de pantalla como tecnología de apoyo.

En primer lugar, por ser lo más sencillo, titularemos nuestro menú acordeón con un encabezado de sección. En el ejemplo es un h2 con el título
“Ejemplo Menú Acordeón Accesible – 4 Estaciones en Vitoria-Gasteiz”. Este sencillo cambio permitirá a las personas que emplean tecnologías de apoyo como lectores de pantalla localizar y contextualizar mejor el componente; por su puesto, debemos tener en cuenta que si titulamos el menú con un encabezado de nivel 2, los controles deberemos etiquetarlos con encabezados de nivel 3. En la última imagen de la sección anterior podemos observar cómo el lector de pantalla muestra cinco encabezados de sección: cuatro de ellos tienen nivel 3 e identifican a los cuatro controles, mientras que todos ellos están titulados por un encabezado de nivel 2 que será el que identifique a todo el menú.

En esta línea, los landmarks de ARIA permiten también a las personas que utilizan tecnologías de apoyo hacerse una buena idea de cómo está distribuida y organizada la información en una página. En este ejemplo he utilizado role="region". El resultado podéis verlo en la siguiente imagen.
El lector de pantalla JAWS muestra cuatro regiones de navegación.
Como puede apreciarse en la imagen, las descripciones de las regiones coinciden con las descripciones de los botones; esto se debe al uso del atributo aria-labelledby.

Gestión del foco de navegación: mediante JQuery, he hecho que los controles del menú puedan navegarse con las teclas de dirección izquierda, derecha, arriba, abajo, inicio y fin.

Para que las personas que emplean exclusivamente el teclado para acceder al contenido puedan reducir el número de interacciones (tabulaciones en este caso) con la página, he hecho que pueda ocultarse el contenido que está visible pulsando la tecla “escape”. Una vez oculto, tendremos que llevar el foco de navegación al control correspondiente.
¡Muy importante!: para evitar comportamientos erráticos del foco de navegación del lector de pantalla (que no coincide siempre con el foco de navegación real), antes de llevar el foco al control, debemos quitárselo.
En JQuery tendremos: $(‘button’).blur(); $(‘button’).focus();

Esto es todo… por el momento; ya estamos preparados para probar el menú acordeón accesible que he desarrollado. Espero que lo disfrutéis y que me planteéis cualquier duda que os surja.

Ejemplo Menú acordeón Accesible – 4 Estaciones en Vitoria-Gasteiz

Comparte esta entrada:

2 comentarios en “Menú Acordeón Accesible”

  1. Pingback: Carrusel Accesible

Deja un comentario