Ejemplo de Menú de Pestañas Accesible

Hoy voy a mostraros un ejemplo de menú de pestañas accesible en funcionamiento.

En el artículo Menú de Pestañas Accesible explicaba los puntos que tenemos que considerar a la hora de crear un menú de pestañas conforme a las pautas de accesibilidad WCAG 2.0 y 2.1, y, la teoría está muy bien y es necesaria, pero necesitamos ponerla en práctica para interiorizar qué implicaciones tiene en la vida real.

Así que como un ejemplo vale más que mil palabras, al final de este artículo podréis probar el ejemplo de menú de pestañas accesible que he desarrollado con JQuery y Bootstrap.

¿Qué tener en cuenta?

Como adelantaba en el post Menú de Pestañas Accesible, a la hora de afrontar el desarrollo de un componente de estas características tenemos que valorar tres aspectos: semántica, diseño visual y funcionamiento.

Aprovechando que vamos a poder comprobar directamente el comportamiento del menú de pestañas, me detendré a explicar algunas peculiaridades que van a ayudar a mejorar la experiencia de usuario de personas que utilizan el teclado como medio de acceso a la información; recordemos además que esto es diseño universal, por lo que el objetivo es que el componente lo pueda utilizar todo el mundo sean cuales sean sus características personales, así que si lo que utilizas es un ratón o el dedo de tu mano en un dispositivo móvil, la experiencia será igualmente satisfactoria.

Es importante que dediquemos un tiempo a pensar qué comportamiento es el que se espera de un menú como este, de un menú de pestañas. Para ello, podemos fijarnos en el funcionamiento de las pestañas en las ventanas o diálogos del sistema operativo Windows:

  • Las pestañas se recorren con las teclas de dirección.
  • El contenido relacionado con cada pestaña se muestra a medida que se van recorriendo con estas teclas de dirección, no es necesario pulsar con el botón izquierdo del ratón o la tecla “enter”, aunque también podemos hacerlo así.
  • Para acceder al contenido de la pestaña activa, debemos pulsar la tecla “tabulador”.

Bien, este comportamiento será el que tengamos que codificar, en mi caso en JQuery y Bootstrap; y, además, deberemos tener en cuenta algunas cuestiones adicionales para garantizar la máxima compatibilidad con diferentes tecnologías de apoyo.
Vamos a ir viendo cuáles son:

Las pestañas tienen que poder recorrerse cíclicamente: en un menú compuesto por tres pestañas como el del ejemplo, si nos encontramos en la “Pestaña 3” y pulsamos flecha derecha o abajo, pasaremos a la “Pestaña 1” y viceversa.

Debemos acceder directamente al contenido pulsando la tecla “tabulador” sin obligar a pasar por el resto de pestañas: en el menú del ejemplo, podemos acceder desde la pestaña “Ejemplo 1” a su contenido sin pasar por las pestañas “Ejemplo 2” y “Ejemplo 3”. Esto lo conseguiremos usando tabindex=”-1" en las pestañas que no están activas.
siempre irán juntos:

  • aria-selected=”true” con tabindex=”0".
  • aria-selected=”false” con tabindex=”-1".

Para poder acceder tabulando desde la pestaña activa a su contenido, necesitamos “convertir” en focalizable el contenedor, lo que conseguiremos usando tabindex=”0".

<div role=”tabpanel” tabindex=”0">…</div>

Las secciones de contenido, los contenedores que emplean el atributo role=”tabpanel”, y que no están visibles, deben ocultarse a todas las personas, también a quienes empleen un lector de pantalla como tecnología de apoyo.
No podremos utilizar propiedades css que “saquen” fuera de pantalla o que oculten visualmente el contenido. Deberemos usar display: none y/o la función .hide() de JQuery. si no lo hacemos así, el contenido no estará disponible visualmente, pero sí podrá ser reproducido por los lectores de pantalla ya que esta tecnología de apoyo accede a todo el contenido que está en el DOM.

la relación entre foco y visibilidad del contenido será:

  • Contenido visible: tabindex=”0".
  • Contenido oculto: tabindex=”-1" o sin tabindex.

Atributos ARIA

  • role=”tablist”.
  • role=”tab”.
  • role=”tabpanel”.
  • aria-selected=”true/false”.
  • aria-controls=”id_panel”. Echad un vistazo a la nota sobre aria-controls al final de esta lista.
  • aria-describedby=”id_tab”.

Nota sobre aria-controls

El atributo aria-controls permite a tecnologías de apoyo como lectores de pantalla acceder de forma rápida mediante una combinación de teclas a una región de contenido concreta. el valor que recibe este atributo es el “id” de la sección de contenido a la que se quiere acceder. en este ejemplo, para acceder al contenido desde la pestaña “Ejemplo 2”, tendremos:
<a id=”tab2" href=”Javascript:void(0)” role=”tab” tabindex=”0" aria-selected=”true” aria-controls=”panel2">Ejemplo 2</a>
<div id=”panel2" role=”tabpanel” tabindex=”0" aria-describedby=”tab2">…</div>

Podemos usar el atributo aria-controls, pero teniendo en cuenta que solamente es compatible con el lector de pantalla JAWS, por lo que usarlo como mejora de la accesibilidad o experiencia de usuario de nuestro componente está bien, pero no podemos emplearlo como única solución para permitir a las personas acceder con el teclado de manera rápida al contenido.

Gestión del Foco

El atributo role=”tablist” hereda del atributo abstracto de ARIA “composite” lo que quiere decir que obliga a los desarrolladores a gestionar el foco y proporcionar, mediante programación, el mecanismo de navegación entre los hijos, controles con role=”tab” en este ejemplo.

En el menú de pestañas accesible que he desarrollado, las pestañas pueden recorrerse con las cuatro teclas de dirección:

  • Flechas derecha Y abajo: pestaña siguiente.
  • Flechas izquierda y arriba: pestaña anterior.

Os estaréis preguntando… ¿por qué usar las cuatro flechas de dirección si el menú es horizontal? Sencillo, porque una persona ciega no “ve” si el menú es horizontal o vertical. De esta manera estamos abstrayendo a las personas ciegas de la orientación del menú y mejorando la experiencia de uso del componente. Además, no cuesta tanto, ¿no??

También podríamos haber usado el atributo aria-orientation que nos permite indicar la posición de un componente, pero no está garantizada su compatibilidad con la mayoría de navegadores y lectores de pantalla.

Ejemplo de Menú de Pestañas Accesible en Funcionamiento

Panel 1

Aquí se puede introducir el contenido que se quiere mostrar cuando se seleccione la pestaña etiquetada como “Ejemplo 1”

Panel 2

Aquí se puede introducir el contenido que se quiere mostrar cuando se seleccione la pestaña etiquetada como “Ejemplo 2”

Panel 3

Aquí se puede introducir el contenido que se quiere mostrar cuando se seleccione la pestaña etiquetada como “Ejemplo 3”

Comparte esta entrada: