WordPress Inclusivo 21: Accesibilidad en el menú de navegación (WAI-Aria)

En el capítulo anterior hablamos del enlace “Saltar al Contenido”, en el capítulo de hoy trataremos el etiquetado de elementos de navegación de forma que pueda navegarse entre ellos fácilmente.

Accesibilidad Estática

Antes de HTML5, la accesibilidad era esencialmente estática, la web cargaba, el lector de pantalla construía su DOM paralelo en ese momento y ese era el que se usaba cambiara o no la web.

Esto causaba un grave problema, sobre todo cuando se empezó a crear sistemas para cargar partes de la web de forma dinámica, quedaba el usuario entonces en manos de la implementación del lector de pantalla, que, aunque intentara adaptarse, tenía muy complicado adivinar al 100% lo que el creador de la web tenía en mente.

El resultado, como podréis imaginar era un desierto de desesperación lleno de obstáculos absurdos, pues solo un pequeño porcentaje de las webs dinámicas eran realmente accesibles (y eso siendo optimistas).

Accesibilidad Dinámica: WAI-ARIA.

Con el nacimiento de html5, css3, la evolución de los lectores de pantalla y la madurez de los sistemas de interacción dinámica con el servidor vía javascript, llegó WAI-ARIA, una serie de elementos que nos permiten mejorar y optimizar la accesibilidad de una web.

ARIA no es la panacea, ni mucho menos, pero si permite ampliar la caja de herramientas con las que contamos a la hora de crear páginas web inclusivas.

Etiquetando el menú de Navegación

El elemento <nav> dentro del cual se sitúa el menú, debido a la propia asignación de roles del propio html5, ya es, de por sí, interpretado como un Landmark de tipo Menú de Navegación.

El único detalle que conviene agregar, es un aria-label para especificar el nombre. Soy consciente de que el lector de pantalla debería, por si solo, reconocer que es un menú de navegación e indicar que es el “Menú Principal”, sin embargo hay dos cuestiones por las que recomiendo añadirlo:

  1. La propia W3C nos lo agrega, junto con role, y tiendo a intentar hacerles caso, dado que son fuente que considero fiable, y que trato de seguir salvo que exista una razón de peso.
  2. Más adelante veremos que no nos limitaremos a usar un solo menú de navegación, sino que además de los típicos, principal y legales, agregaremos elementos como la selección de idioma como ítems independientes, simplificando enormemente la navegación directa del usuario de lector de pantalla.

Accesibilizar el menú de navegación

Apliquemos pues, todo lo aprendido, a nuestro menú de navegación.

Va a parecer que he dado un mitin interminable cuando veais el tamaño de la modificación de hoy, pero considero importante basar las recomendaciones en referencias fiables y argumentadas.

Hago esto porque pretendo que cualquiera de vosotros tenga los conocimientos y herramientas para comprender que hacen, pero hay dos motivos adicionales:

  1. Evitar en la medida de lo posible que cualquier persona sin escrúpulos abuse de vosotros en referencia a criterios de accesibilidad, a más del daño a vuestro proyecto, ese tipo de personas no hacen ningún bien al colectivo de personas con discapacidad, entre las que me incluyo.
  2. Adicionalmente, esto me obliga a mi mismo a mantenerme actualizado, y no dar por hecho que “lo se todo” ni que “estoy en lo cierto”. De ese modo busco ser mucho más útil y poder ayudaros con mucha mayor efectividad.

Escribiendo el código

Vayamos, ahora sí, a mejorar nuestro menú, abrimos header.php y modificamos el elemento <nav> agregando el atributo aria-label del modo siguiente:

<nav (...) aria-label="<?php echo __('Menú Principal','Metsu7Theme'); ?>" (...)>

Todo muy sencillo, usamos la función de traducción que aprendimos a usar en el capítulo anterior dedicado al “Skip to Content”, con su nombre.

En el próximo capítulo comenzaremos a observar que modificaciones hemos de realizar en los elementos del menú.

Soy consciente de que deseamos correr y terminarlo ya, pero creedme cuando os digo que sentar bien las bases ahora, nos hará trabajar mucho más rápido posteriormente y con una calidad superior, algo que nuestros clientes y usuarios agradecerán.

¡Lucha contra el Imperio compartiéndolo en tus redes!

Ayudame a difundir este contenido a todo aquel que pueda sacarle partido, difundelo en redes, cuéntaselo a tus amigos, coméntalo en la cola del supermercado, además de aportar, ¡seguro que conoces a gente interesante y acabas uniéndose al bando rebelde!

Dibujo de un sable laser para ciegos con la estrella de la muerte de fondo

Inglés Catalán

Inglés Catalán

Quizá te interese ...

Una Respuesta a “WordPress Inclusivo 21: Accesibilidad en el menú de navegación (WAI-Aria)”

Dejar una Respuesta

XHTML: Usted puede usar las siguientes etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>