Enlaces Saltar A: Evitando errores comunes

Los “mecanismos de salto de bloques de contenido” (más comúnmente llamado, “enlace saltar a”), son una característica de accesibilidad esencial que permite a los usuarios evitar los menús de navegación y otros bloques repetitivos de contenido.

La mayoría de los CMS (sistemas de gestión de contenido) implementan automáticamente el mecanismo para evitar los bloques de contenido (“enlaces saltar a”). En otras palabras, si creas tu página web utilizando un CSM o implementando un plugin, es probable que ya tengas el mecanismo para saltar bloques de contenido, aunque lamentablemente, no siempre es funcional.

En algunos casos, el mecanismo funciona perfectamente (incluso si el propietario de la página no sabe que la web lo tiene). Sin embargo, es una buena idea verificar su funcionamiento en la página web.

¿Quién se beneficia de los “enlaces saltar a” de navegación?

Los “enlaces saltar a” son importantes para las personas que utilizan solo el teclado (sin ratón) para navegar por Internet. Esto incluye a las personas que utilizan lectores de pantalla (software que convierte el texto en audio o braille) y otras tecnologías de asistencia.

Los usuarios de teclado navegan principalmente utilizando los comandos Tab y Shift+Tab, que mueven el enfoque del teclado hacia arriba y hacia abajo en la página web.

Si un sitio web tiene docenas de hipervínculos de navegación en la parte superior de cada página, es posible que necesites presionar la tecla Tab varias veces para llegar al contenido en cada página, lo cual es frustante, especialmente si estás pasando por un proceso de varias páginas (como el proceso de compra de algún artículo en la web).

Los mecanismos de salto de bloques de contenido suelen aparecer cuando el usuario presiona Tab por primera vez en una nueva página. El usuario puede presionar Enter para activarlo, evitando elementos repetitivos que aparecen en todo el sitio web.

Pero...¿Y si mi página no lo tiene? ¿Cómo lo implemento?

En realidad se trata simplemente de un enlace que ancla al primer elemento de la página tras el bloque de contenido repetitivo, a continuación te dejo el código para que puedas copiar y pegar en tu web. Pero cuidado, debes cambiar el identificador por el primer identificador tras el bloque que quieras saltar (en este caso hemos usado 'Content').

Al comienzo del body debemos incluir el siguiente código, en algún HTML genérico, por ejemplo en el de la cabecera:

<a class='admin-bar skip-link' href='#content'>Saltar al contenido principal</a>

Y en la hoja de estilos o en la cabecera:

.skip-link{ z-index: 9999; padding: 5px; padding: 0.5rem; font-size: 1rem; color: #000; background: #FFF; position: absolute; top: -5rem;}

.skip-link:focus{top:0;} 

Debemos asegurarnos que en toda la web el cuerpo siempre esta identificado con el id 'content'.

Errores comunes de accesibilidad con “enlaces saltar a”:

Las Pautas de Accesibilidad al Contenido Web (WCAG) requieren  “enlaces saltar a” en el Criterio de Éxito (SC) 2.4.1, 'Bypass Blocks' (Evitar Bloques). Aquí está el texto completo del requisito:

'Un mecanismo está disponible para pasar por alto bloques de contenido que se repiten en varias páginas web'.

Hemos visto muchas implementaciones de “enlaces saltar a” que cumplen con el criterio WCAG SC 2.4.1, pero no cumplen con otros criterios importantes.

Para determinar si el mecanismo de salto de bloques de contenido de tu web mejora la accesibilidad, pruébalo y así detectarás si comete alguno de estos errores comunes:

1. El texto del enlace no explica bien su propósito

Según WCAG SC 2.4.4, 'Link Purpose (In Context)' (Propósito del Enlace [En Contexto]), todos los hipervínculos deben tener un texto que explique su propósito. En otras palabras, los usuarios deben poder entender exactamente cuál es el propósito o la función del enlace al que van a dirigirse.

Si tu mecanismo de salto de bloques de contenido tiene un texto corto, por ejemplo, 'saltar' o 'bypass', algunos usuarios no sabrán para qué sirve ese mecanismo. Es mucho mejor poner un texto un poco más largo pero que entiendan los usuarios. Por ejemplo, ‘Ir a contenido’ o ‘Saltar a contenido’.

2. El mecanismo de salto de bloques de contenido,  es invisible.

Muchos sitios web tienen este mecanismo visualmente ocultos hasta que el usuario presiona la tecla Tab por primera vez. Eso es aceptable, pero asegúrate de que el mecanismo se vuelva visible cuando recibe el enfoque del teclado.

Recuerda, la accesibilidad web no es solo para personas ciegas, hay personas con diferentes tipos de discapacidades. Muchos usuarios de teclado pueden percibir el contenido visualmente, y si tu mecanismo no aparece realmente en la página, algunos usuarios no podrán encontrarlo.

3. Los mecanismos de salto de bloques de contenido tienen un texto con un bajo contraste.

Todo el contenido de texto debe mantener una relación de contraste de color adecuada con su fondo (existen analizadores de contraste de color para ello). De lo contrario, el texto puede ser ilegible para usuarios con deficiencias en la visión del color y otras discapacidades visuales.

Esto también es aplicable al mecanismo. WCAG SC 1.4.3 requiere un contraste de al menos 4.5:1 para texto normal y 3:1 para texto grande. En otras palabras, el texto debe destacar lo suficiente con su fondo para que sea fácilmente legible para todos los usuarios.

4. El sitio web tiene demasiados mecanismos de salto de bloques de contenido.

Puedes tener buenas razones para agregar más de un 'enlace saltar a' a una página. Por ejemplo, si has publicado un artículo que ocupa varias páginas, puedes incluir una tabla de contenidos al principio de cada página. Podrías incluir también un “enlace saltar a” para el menú de navegación, junto con otro “enlace saltar a” separado para evitar la tabla de contenidos.

Es importante que recuerdes que, los usuarios de teclado, necesitarán pasar por cada mecanismo de salto de bloques antes de llegar al contenido. La mayoría de los sitios web solo necesitan uno o dos “enlaces saltar a”; si agregas de más, piensa en cómo afectarán la experiencia del usuario. Las pautas son más efectivas si las usas antes de hacer el contenido, en vez de después.

Si quieres ayuda con algún problema de accesibilidad o para saber si tu web realmente es accesible a todos los usuarios, ADDAW puede ayudarte realizando una auditoría completa a tu página web.

Resumen.

Puntos Clave:

1. Enlaces de Salto de Bloques de Contenido:

-Esencial para accesibilidad, permite a usuarios evitar menús repetitivos.

-Algunos CMS implementan los mecanismos de saltar a bloques de contenido automáticamente o a través de algún plugin.

2. Beneficiarios:

-Importantes para usuarios de teclado (sin ratón), como personas con lectores de pantalla.

3. Funcionamiento:

-Navegación principal con comandos Tab y Shift+Tab.

-Evita la frustración al presionar varias veces Tab para llegar al contenido.

4. Errores Comunes:

Texto Confuso:

-Debe explicar claramente el propósito, evita términos poco concisos o cortos como 'saltar' o 'bypass'.

-Recomendamos un texto más descriptivo como 'Ir a contenido' o 'Saltar a contenido'.

5. Enlace oculto:

-Que esté oculto visualmente es aceptable, pero debe volverse visible al recibir el enfoque del teclado.

6. Bajo Contraste:

-El “enlace saltar a” debe tener un contraste adecuado para que sea legible, siguiendo los estándares WCAG.

7. Demasiados Enlaces:

-Limita a uno o dos enlaces para no complicar la experiencia del usuario de teclado.

8. Ayuda Especializada:

-Asociaciones como ADDAW puede proporcionar una auditoría completa para garantizar la accesibilidad de tu página web.

Gisela López Ramón

Auditora de accesibilidad web, desarrolladora de contenido, gestión de redes sociales y otros medios audiovisuales. El progreso existe cuando no mejoras lo que está hecho, sino cuando te esfuerzas por lograr lo que queda aún por hacer.