WordPress Inclusivo 20: Accesibilidad en el menú de navegación (Primera Parte)

Siguiendo la norma de Accesibility First, vamos a incorporar los elementos de accesibilidad antes de empezar a dar aspecto al menú.

En este primer artículo centramos nuestra atención en la funcionalidad “Saltar al contenido”.

¿Saltar al contenido?

Bien, partamos de una base, las personas que ven, recorren la web mediante golpes de vista, saltan de la parte superior al menú o al contenido simplemente moviendo los ojos, y siguiendo este movimiento con el ratón.

En cambio los usuarios de lector de pantalla no tienen esa posibilidad, y recorren la web de forma secuencial, en el mismo orden que está el html, y aunque hay opciones para saltar a diversos elementos, en el caso del menú, suele ocurrir que se repite una y otra vez.

¿Pero no se repite siempre para todos?

Si, pero los usuarios habitualmente lo ignoran, un usuario de lector de pantalla, al “recorrer” los elementos de la web se lo encontrará ahí una y otra vez, con independencia de si lo necesitan o no. Esto acaba desesperando incluso al monje Shaolín más experimentado.

Por ello, existe una funcionalidad llamada “Saltar al contenido”, que consiste básicamente en un enlace invisible casi siempre, situado como primer elemento inmediatamente después de <body> y que permite saltar al primer <h1> de la web, que casi siempre es el “principio del contenido”.

El punto de destino puede variar, si la web tiene una morfología diferente pero no es lo habitual. Con esta funcionalidad, los usuarios que navegan con la vista no notan diferencia alguna, mientras que los usuarios que tienen activado el lector podrán saltarse el menú de forma extremadamente sencilla siempre que no lo vayan a usar. Todos ganamos.

Veamos como se incorpora esta funcionalidad.

Impleemntando “Saltar al Contenido”

A efectos de código fuente, es una funcionalidad muy sencilla, la base principal es un enlace interno a un ancla que situaremos en el encabezado de nivel 1 habitualmente (o, en general en el primer elemento del contenido de nuestra web, aunque lo habitual es el encabezado de nivel 1).

Lo primero, es crear el ancla al que se dirigirá el link, del modo siguiente:

(...)
<h1 id="jump-to-content">Texto del Encabezado</h1>
(...)

Así de sencillo, un atributo “id” con un nombre identificativo. Ahora vamos al enlace en sí.

(...)
<body>
  <a href="#jump-to-content" 
    class="sr-only jump-to-content"
  ><?php __("Saltar al contenido","Metsu7Theme"); ?></a>
(...)

Esencialmente, un link al ancla creada en el h1, pruébalo y verás como debería saltar a la posición donde se sitúa el encabezado.

No obstante, hay dos aspectos a destacar, el primero, el uso de la función de wordpress __(), que sirve para incluir cadena susceptibles de ser traducidas. No trataré por el momento este tema, pero acostumbremonos a usar esta función y poner siempre un Domain para el theme, que nos permita traducir las cadenas en bloque más adelante.

El segundo, son las dos clases .sr-only, y .jump-to-content .. el tema css merece una explicacion detallada, vamos a ello.

Estilos CSS para “Jump to Content”

En nuestro enlace, hemos incorporado dos clases, empiezo con la primera y su significado.

.sr-only

La característica principal de nuestro link es que debe estar oculto casi todo el tiempo, pero solo visualmente, los usuarios de lector de pantalla deben poder “verlo” en todo momento. De ahí que no vale usar un display:none ya que esto ocultaría el link para todos.

El nombre de la clase la he heredado de foundation un framework que usaba antes en desarrollo web, el código siguiente, está basado en mi experiencia personal y lo aprendido de otros, esta, por ejemplo es la versión de Bootstrap 3:

(...)
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
(...)

No es objetivo de este tutorial describir parte por parte como funciona este código pero digamos que usa toda técnica conocida para hacer pequeño y sacar del flujo visual el elemento si afectar al aspecto de la web, al tiempo que mantiene su posición en el dom, de este modo será visible sólo para el lector de pantalla.

Incluyendo este css en vuestro fichero styles.css el link desaparecerá aunque si observais el dom ahí sigue.

Este artículo explica bastante bien como funciona sr-only e incluso amplia la información.

.jump-to-content

Hay un aspecto adicional, mostrar o no el link cuando se recorre mediante teclado, se use o no lector de pantalla. Hay usuarios que sin tener problemas de vision si que necesitan usar teclado y a los que les resulta de utilidad poder ver el link en pantalla.

En esencia, WCAG habla de que sea visible todo el rato, pero creo que es algo extremadamente intrusivo en el diseño, y los clientes rara vez aceptarán esta cuestión. Por suerte WCAG 2.0 nos permite mostrarlo solo cuando tenga el foco.

Para estos perfiles uso el código siguiente:

(...)
.jump-to-content:focus {
  position: absolute;
  width: auto;
  height: auto;
  padding: 1rem;
  margin: 1rem;
  overflow: auto;
  clip: auto;
  border: 4px solid black;
  font-size: var(--fuente3);
}
(...)

Como veis he usado un tamaño de fuente un poco más grande de la media usando nuestras fuentes áureas. El aspecto exacto es orientativo, puede adaptarse a las necesidades de cada diseño, cumpliendo siempre las normas de accesibilidad claro.

En el próximo capítulo seguiremos profundizando en los aspectos de accesibilida necesarios.

¡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 20: Accesibilidad en el menú de navegación (Primera Parte)”

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>