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.

¡Compártelo!

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!

Sígueme en Redes

Acelera mi progreso de la materia que te interesa.

El calendario y ritmo de publicaciones actualmente responde a mis necesidades de estudio y desarrollo de proyectos personales, si quieres invertir en que acelere alguna materia concreta, te ofrezco una posibilidad:

Puedes donar en mi paypal (paypal at metsuke.com), indicando la materia, por cada 25 euros donados, priorizaré un capítulo de la materia que me indiques que ya tenga escrito para que salga el proximo dia viable y disponible de lunes a viernes (en orden de llegada y a un post diario).

En caso de que el capítulo aún no exista, centraré mi atención en escribirlos y publicarlos con prioridad, pero no puedo prometer inmediatez.

De nuevo priorizaré las donaciones por orden de llegada pero cuando coincidan varias, iré rotando cada dia una para evitar la monopolización de mi foco de tareas.

Me reservo el fin de semana para priorizar lo que considere pertinente en el caso de que haya cola de entrega. Si te gusta el proyecto, ¡es un buen modo de apoyarme!

¿Te interesan mis servicios como consultor?

En ese caso, pudedes contactarme en mi correo r.carrillo@metsuke.com y cuéntame que necesitas, si lo que leo me gusta, te pongo en contacto con el comercial de mi empresa de consultoría.

Si quieres que sea yo expresamente quien te atienda, puedes indicármelo y llegamos a un acuerdo.

Advierto que esta última posibilidad te saldrá bastante más cara que hablar con mi equipo, pero si es lo que deseas, a tu disposición.

Un Abrazo.

Sobre las traducciones

Por el momento me he visto obligado a detener la traducción del contenido, apenas doy abasto a escribirlo (que es mi objetivo, ya que son mis apuntes de estudio), por lo que no parece tener sentido mantener activas unas traducciones que no doy abasto a crear.

En caso de que más adelante el flujo de caja me lo permita, es mi intención contratar servicios de traducción y editores que realicen la tarea, pero por ahora lo dejo desactivado.

Quizá te interese leer más sobre Wordpress Inclusivo

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>