Técnica Técnicas generales WCAG 2.2
G1Añadir un enlace al principio de cada página que lleve directamente al área de contenido principal
En resumen
Esta técnica consiste en colocar, como primer elemento interactivo de cada página, un enlace del tipo «Saltar al contenido principal» que mueva el foco más allá de menús, cabeceras y bloques repetidos. Beneficia a quienes navegan con teclado, lector de pantalla, magnificador o reconocimiento de voz, que de otro modo tendrían que recorrer la navegación completa en cada página. Es la forma más habitual de cumplir el criterio 2.4.1 Evitar bloques.
Ejemplo práctico
El enlace «Saltar al contenido principal» va al principio de la cabecera de cualquier sitio con un menú repetido en todas las páginas: portal municipal, tienda online o periódico digital. El error más habitual no es que falte, sino que está mal ocultado.
Así no: Enlace de salto oculto con display: none
El enlace existe en el código, pero display: none lo saca del orden de tabulación, así que la regla :focus nunca llega a aplicarse. Al pulsar Tab el foco va directamente a «Trámites» y hay que recorrer todo el menú en cada página para llegar a «Pedir cita previa».
<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>
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Así sí: Enlace de salto fuera de pantalla que aparece con el foco
El enlace se saca de la vista con posicionamiento en lugar de display: none, de modo que sigue siendo el primer elemento enfocable, y se muestra con buen contraste (12,2:1) y un contorno visible al recibir el foco. Al activarlo, el foco pasa a main y el siguiente Tab llega a «Pedir cita previa».
<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>Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- Ocultar el enlace con
display: noneovisibility: hidden, lo que impide que reciba el foco. - Enlaces que apuntan a un
idque ya no existe tras cambiar de tema o de plantilla (href="#main"sin ningúnid="main"). - Enlace de salto que aparece al recibir el foco pero queda tapado por una cabecera fija o por el banner de cookies.
- Colocar antes del enlace de salto otros elementos enfocables, como el selector de idioma o los iconos de redes sociales.
Técnica completa: traducción al español del texto 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 las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica G1 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
