Menú de Pestañas Accesible

Vamos a ver cómo crear un menú de pestañas accesible conforme a las pautas de accesibilidad WCAG 2.0 y WCAG 2.1.

Teniendo en cuenta los puntos que iré detallando a continuación, podremos obtener un menú de pestañas accesible para que cualquier persona, independientemente del medio y de la manera de acceder al contenido pueda utilizarlo y, por supuesto, conseguiremos que nuestro sitio utilice un componente dinámico conforme a la legislación de accesibilidad vigente.

Pero, ¿Qué es un menú de pestañas?

Típicamente; un menú de pestañas es un componente formado por varios controles ejecutables (enlaces, botones…), que van mostrando y ocultando secciones de contenido de manera dinámica cuando se pulsa sobre ellos.

Este comportamiento también lo podemos ver en menús tipo acordeón, , ambos utilizados con el fin de mostrar y ocultar secciones con gran cantidad de contenido que por cuestiones de diseño convenga disponer de ellas en una misma página.
Lo que diferencia uno de otro es el aspecto, la semántica y el comportamiento.

Y aquí entramos de lleno en el mundo de la accesibilidad.
En accesibilidad, todo ha de ser lo que aparenta ser, y viceversa. Es decir, que si tenemos un menú que visualmente está formado por controles con aspecto de pestañas, la semántica de éste también tendrá que transmitir que es un menú de pestañas y su funcionamiento deberá ser consecuente con lo que un usuario espera de un componente así.

Si nos centramos en el comportamiento de un menú de pestañas accesible, podemos observar que las personas que emplean el ratón esperan que el contenido se muestre a medida que se va pulsando sobre las diferentes pestañas y, además, que el nuevo contenido oculte el anterior.
Las personas que no emplean un ratón, sino que utilizan exclusivamente el teclado o un pulsador para navegar por el contenido, esperarán poder obtener el mismo resultado cuando pulsen la tecla “enter” sobre las pestañas y también poder navegar entre éstas haciendo uso de las teclas de dirección. Este último punto, el uso de las teclas de dirección, es el que caracteriza de manera definitiva a un menú de pestañas accesible.

Teniendo claro lo que es un menú de pestañas, voy a explicar los puntos que deberemos tener en cuenta para que el menú sea accesible.

Menú de Pestañas Accesible. ¿Qué tengo que tener en cuenta?

Tenemos que considerar los siguientes tres aspectos y que ya he adelantado en este artículo:

  • Semántica
  • Diseño o aspecto visual
  • Funcionalidad o comportamiento

Semántica del menú de Pestañas Accesible

El menú debe transmitir a las tecnologías de apoyo como lectores de pantalla lo que es, es decir, un lector de pantalla debe identificar al menú como un menú de pestañas, a cada control como una pestaña y a la sección de contenido como el panel de contenido de cada pestaña.

Para ello echaremos mano del atributo role” de (WAI-ARIA (Accessible Rich Internet Applications) y que nos permitirá definir el “rol” o función del menú y sus controles.

  • Los controles deben agruparse en una etiqueta <ul> que utilice el atributo role=”tablist”.
    <ul role=”tablist”>…</ul>
  • Cada control (pestaña) debe utilizar role=”tab”.
    <li><a href=”Javascript:void(0)” role=”tab”>…</a></li>
  • Cada sección de contenido usará el atributo role=”tabpanel”.
    <div role=”tabpanel”>…</div>

Utilizando los atributos anteriores estaremos consiguiendo que las tecnologías de apoyo identifiquen el menú como un menú de pestañas…

El lector de pantalla JAWS 2020 muestra tres controles reconocidos como pestañas en un menú de pestañas accesible

La imagen anterior es una captura de pantalla de la lista de controles que detecta el lector de pantalla JAWS. Como puede verse, muestra tres controles identificados como “Pestaña 1”, “Pestaña 2” y “Pestaña 3”.

Pero además del rol o función, hay más información que transmitimos de manera visual y de la que tenemos que informar a estas tecnologías de apoyo:

  • Necesitamos especificar qué pestaña es la que está seleccionada en cada momento, lo que conseguiremos utilizando el atributo aria-selected.
    <li><a href=”Javascript:void(0)” role=”tab” aria-selected=”true”>…</a></li>

    Solamente habrá una pestaña usando aria-selected=”true”, teniendo el resto que usar aria-selected=”false”. El valor de este atributo no varía automáticamente, sino que lo tenemos que ir modificando mediante Javascript, JQuery, etc, a medida que se active una pestaña u otra.

  • Relacionar visualmente la pestaña activa con su contenido es sencillo, y transmitir a una persona ciega por ejemplo esta información también lo es. Echaremos mano de dos técnicas que consisten en utilizar el atributo aria-describedby en la sección de contenido y titular ésta con una etiqueta <h>.

    El atributo aria-describedby tomará como valor el “id” de la pestaña seleccionada.

    Para una pestaña como la siguiente:

    <li><a id=”tab1” href=”Javascript:void(0)” role=”tab” aria-selected=”true”>Pestaña 1</a></li>

    Tendremos la siguiente sección de contenido:

    <div role=”tabpanel” aria-describedby=”tab1”>
    <h3>Título de la sección 1</h3>
    </div>

    Es conveniente incrementar la accesibilidad todo lo que podamos, por ejemplo, titulando el menú de pestañas para que pueda ser fácilmente localizable por las tecnologías de apoyo:

    <h2>Menú</h2>

    <ul role=”tablist>…</ul>

    Si se emplean solamente iconos para identificar cada pestaña, éstos deberán disponer de texto alternativo. La manera de proporcionar este texto dependerá de la manera en que se codifiquen los iconos.

    Aspecto o Diseño Visual

    Como ya he adelantado, el menú debe tener aspecto visual de pestañas. Éste, además, debe cumplir los criterios de conformidad WCAG relativos al aspecto visual:
    El contraste entre pestañas y entre el texto o icono de cada pestaña y el fondo debe ser suficiente, de al menos: 4.5:1.
    El foco de navegación, que en este caso identificará la pestaña activa, debe ser visible y suficientemente visible cumpliendo también el criterio de contraste.
    Por supuesto, el contenido de las secciones deberá cumplir los criterios de conformidad WCAG que apliquen en cada caso: formularios, enlaces, imágenes…

    Comportamiento o funcionamiento

    El funcionamiento de un menú de pestañas es muy característico y también lo he adelantado en este artículo:
    Las pestañas deben poder activarse con el botón izquierdo del ratón y pulsando la tecla enter. Esto lo conseguiremos manejando el evento de “click” de Javascript.
    También deberemos poder navegar entre pestañas con las teclas de dirección (flechas izquierda, derecha, arriba y abajo). Esto requerirá que tengamos que gestionar el foco a nivel de programación así como los eventos de pulsación de teclado.

    Comparte esta entrada:

Deja un comentario