Técnica Técnicas generales WCAG 2.2
G1Poner al principio un enlace para saltar al contenido principal
Nombre oficial en el W3C: Añadir un enlace al principio de cada página que lleve directamente al área de contenido principal
En pocas palabras
Consiste en que lo primero que se alcanza con el teclado sea un enlace del tipo «Saltar al contenido principal». Al activarlo, el foco pasa directamente al contenido de la página. Así se evita recorrer la cabecera y el menú, que se repiten en todas las páginas.
Por qué es importante
Quien navega con teclado avanza elemento a elemento con la tecla Tab. Sin este enlace, en cada página debe pasar por el logotipo, el buscador y todos los enlaces del menú antes de llegar a lo que busca.
Ayuda a quien usa solo el teclado, un lector de pantalla (programa que lee en voz alta la pantalla), una lupa de pantalla, un pulsador o el control por voz.
Cómo se hace
- Coloque el enlace como primer elemento enfocable de la página, antes del logotipo, el selector de idioma o las redes sociales.
- Use un texto claro, como «Saltar al contenido principal» o «Ir al contenido».
- Haga que apunte al
iddel contenido principal, por ejemplohref="#contenido"hacia<main id="contenido">. - Puede ocultarlo hasta que reciba el foco, pero sáquelo de la vista con posicionamiento. No use
display: nonenivisibility: hidden. - Cuando aparezca, debe verse bien: buen contraste, contorno de foco y sin quedar tapado por cabeceras fijas.
- Es especialmente útil cuando la página tiene un único contenido principal.
Ejemplo práctico
El enlace «Saltar al contenido principal» va al principio de cualquier web con un menú repetido: portal municipal, tienda online o periódico digital. El error más habitual no es que falte. Es que está mal ocultado.
Así no: Enlace de salto oculto con display: none
El enlace está en el código, pero display: none lo saca del orden de tabulación. Por eso la regla :focus nunca se aplica. Al pulsar Tab, el foco va directo a «Trámites». Hay que recorrer todo el menú en cada página para llegar a «Pedir cita previa».
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Ver el código del ejemplo incorrecto
<style>
.saltar { display: none; }
.saltar:focus { display: inline-block; }
nav a { color: #744E9A; margin-right: 12px; }
</style>
<a class="saltar" href="#contenido">Saltar al contenido principal</a>
<header>
<p><strong>Ayuntamiento de Villanueva</strong></p>
<nav aria-label="Principal">
<a href="#">Trámites</a> <a href="#">Sede electrónica</a> <a href="#">Agenda</a>
<a href="#">Noticias</a> <a href="#">Turismo</a> <a href="#">Contacto</a>
</nav>
</header>
<main id="contenido" tabindex="-1">
<h1>Empadronamiento</h1>
<p>Requisitos y documentación necesaria. <a href="#">Pedir cita previa</a></p>
</main>Así sí: Enlace de salto fuera de pantalla que aparece con el foco
El enlace se saca de la vista con posicionamiento, no con display: none. Así sigue siendo el primer elemento enfocable. Al recibir el foco, aparece con buen contraste (12,2:1) y un contorno visible. Al activarlo, el foco pasa a main. El siguiente Tab llega a «Pedir cita previa».
Pruébelo aquí:
Ver el código del ejemplo correcto
<style>
.saltar { position: absolute; left: -9999px; }
.saltar:focus { position: static; display: inline-block; padding: 8px 12px;
background: #412c56; color: #fff; outline: 3px solid #0B2239; outline-offset: 2px; }
nav a { color: #744E9A; margin-right: 12px; }
</style>
<a class="saltar" href="#contenido">Saltar al contenido principal</a>
<header>
<p><strong>Ayuntamiento de Villanueva</strong></p>
<nav aria-label="Principal">
<a href="#">Trámites</a> <a href="#">Sede electrónica</a> <a href="#">Agenda</a>
<a href="#">Noticias</a> <a href="#">Turismo</a> <a href="#">Contacto</a>
</nav>
</header>
<main id="contenido" tabindex="-1">
<h1>Empadronamiento</h1>
<p>Requisitos y documentación necesaria. <a href="#">Pedir cita previa</a></p>
</main>Cómo comprobarlo
Errores frecuentes en auditorías
- Ocultar el enlace con
display: noneovisibility: hidden. Así no puede recibir el foco. - Apuntar a un
idque ya no existe tras cambiar de tema o plantilla (href="#main"sin ningúnid="main"). - Que el enlace aparezca con el foco pero quede tapado por una cabecera fija o el banner de cookies.
- Poner antes del enlace otros elementos enfocables, como el selector de idioma o los iconos de redes sociales.
Para saber más, en nuestro blog
-
Enlaces Saltar A: Evitando errores comunesExploraremos como podemos saltar el contenido repetitivo de una página y porque es tan importante para los usuarios que utilizan lectores
Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica G1 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.
Aplicabilidad
Todas las tecnologías que contengan enlaces
Descripción
El objetivo de esta técnica es proporcionar un mecanismo para evitar los bloques de material que se repiten en varias páginas web, saltando directamente al contenido principal de la página web. El primer elemento interactivo de la página web es un enlace al comienzo del contenido principal. Al activar el enlace, el foco se sitúa más allá del resto del contenido, en el contenido principal. Esta técnica resulta especialmente útil cuando la página web tiene una única área de contenido principal, en lugar de un conjunto de áreas de contenido igualmente importantes, y cuando no hay varias secciones de navegación en la página.
Es preferible que los enlaces sean visibles en todo momento, ya que entre los usuarios que navegan con el teclado se encuentran los usuarios de conmutadores, quienes utilizan técnicas que generan pulsaciones de teclado lentamente, los usuarios de software de magnificación de pantalla, los usuarios de lectores de pantalla que trabajan con compañeros videntes, los usuarios que solo usan el teclado y quienes navegan con software de reconocimiento de voz. Sin embargo, el criterio de conformidad 2.4.1 Evitar bloques no exige que sean visibles cuando no tienen el foco, y los enlaces que solo son visibles cuando tienen el foco pueden cumplir este criterio de conformidad.
Ejemplos
Un periódico en línea
Un periódico en línea contiene numerosas secciones de información: una función de búsqueda, un banner corporativo, barras laterales, noticias secundarias, cómo contactar con el periódico, etc. La noticia principal se encuentra en el centro de la página. El primer enlace al que llega el usuario al recorrer la página con el tabulador se titula "Skip to Lead Story" (saltar a la noticia principal). Al activar el enlace, el foco visual se desplaza a la noticia. Al pulsar de nuevo el tabulador, el usuario llega al primer enlace de la noticia principal.
Un enlace «Saltar al contenido principal»
Una página web incluye diversas técnicas de navegación en cada página: una ruta de migas de pan, una herramienta de búsqueda, un mapa del sitio y una lista de recursos relacionados. El primer enlace de la página se titula "Skip to Main Content" (saltar al contenido principal). El usuario activa el enlace para saltarse las herramientas de navegación.
Pruebas
Procedimiento
- Comprobar que un enlace es el primer control enfocable de la página web.
- Comprobar que la descripción del enlace comunica que enlaza con el contenido principal.
- Comprobar que el enlace es siempre visible o bien visible cuando tiene el foco del teclado.
- Comprobar que al activar el enlace el foco se desplaza al contenido principal.
- Comprobar que, tras activar el enlace, el foco del teclado se ha desplazado al contenido principal.
Resultados esperados
- Todas las comprobaciones anteriores son verdaderas.
Recursos
- HTML - Focus (especificación HTML: el foco)
Cómo lo comprobamos en ADDAW
En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica G1 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.