Técnica General G1 de WCAG 2.1: Agregar un enlace en la parte superior de cada página que vaya directamente al área de contenido principal

Jano Llorca Lis

La accesibilidad web es esencial para garantizar que todas las personas, incluidas aquellas con discapacidades, puedan navegar y utilizar los sitios web de manera efectiva. Una de las barreras más comunes es la repetición de bloques de contenido en cada página, como menús de navegación o encabezados. Esto dificulta la navegación eficiente para usuarios de lectores de pantalla o aquellos que dependen del teclado.

La Técnica G1 de WCAG 2.1 aborda este problema al proporcionar un enlace al inicio de la página que permite saltar directamente al contenido principal. Esta práctica ayuda a cumplir con el criterio de éxito 2.4.1 (Bypass Blocks) de WCAG 2.1.

Acerca de esta técnica

El objetivo de esta técnica es proporcionar un mecanismo que permita a los usuarios evitar bloques repetitivos de contenido, facilitando un acceso rápido al contenido principal. Al implementar un enlace «Saltar al contenido principal» al inicio de la página, los usuarios pueden enfocar y activar el enlace para desplazarse directamente al área principal de información.

Esta técnica es fundamental en:

Sitios con menús de navegación extensos.
Páginas con publicidad o contenido repetitivo antes del contenido principal.
Plataformas de noticias, blogs y sitios de comercio electrónico con estructuras de contenido complejas.

Ejemplos

Ejemplo incorrecto 1: Falta de un enlace para saltar al contenido principal

<nav>
    <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Servicios</a></li>
        <li><a href="#">Contacto</a></li>
    </ul>
</nav>
<main>
    <h1>Bienvenido</h1>
    <p>Este es el contenido principal.</p>
</main>

🔴 Problema: No hay un mecanismo para saltar directamente al contenido principal, lo que obliga a los usuarios de teclado y lectores de pantalla a navegar a través de los elementos repetitivos en cada página.

Solución correcta: Implementación de un enlace «Saltar al contenido principal»

<a href="#main-content" class="skip-link">Saltar al contenido principal</a>
<nav>
    <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Servicios</a></li>
        <li><a href="#">Contacto</a></li>
    </ul>
</nav>
<main id="main-content">
    <h1>Bienvenido</h1>
    <p>Este es el contenido principal.</p>
</main>

✅ ¿Qué mejora?: El enlace «Saltar al contenido principal» permite a los usuarios moverse directamente al contenido relevante sin necesidad de recorrer los elementos repetitivos.

Ejemplo incorrecto 2: Enlace no visible al recibir foco

<a href="#main-content" style="display: none;">Saltar al contenido principal</a>
<nav>
    <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Servicios</a></li>
        <li><a href="#">Contacto</a></li>
    </ul>
</nav>
<main id="main-content">
    <h1>Bienvenido</h1>
    <p>Este es el contenido principal.</p>
</main>

🔴 Problema: El enlace está oculto y no aparece cuando recibe el foco del teclado, lo que lo hace inaccesible para los usuarios de teclado.

Solución correcta: Hacer el enlace visible al recibir foco

<style>
.skip-link {
    position: absolute;
    top: -40px;
    left: 10px;
    background: #000;
    color: #fff;
    padding: 10px;
    z-index: 100;
}
.skip-link:focus {
    top: 10px;
}
</style>
<a href="#main-content" class="skip-link">Saltar al contenido principal</a>
<nav>
    <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Servicios</a></li>
        <li><a href="#">Contacto</a></li>
    </ul>
</nav>
<main id="main-content">
    <h1>Bienvenido</h1>
    <p>Este es el contenido principal.</p>
</main>

✅ ¿Qué mejora?:

El enlace solo se muestra al recibir foco, evitando distracciones visuales.
Se garantiza visibilidad y accesibilidad para usuarios de teclado y lectores de pantalla.

Errores comunes y cómo evitarlos

Errores frecuentes:

No incluir el enlace «Saltar al contenido»: dificulta la navegación para usuarios de teclado.
No hacer el enlace enfocable con el teclado: usar tabindex="0" si es necesario.
No etiquetar correctamente el enlace: usar descripciones claras como «Saltar al contenido principal».

Cómo evitar estos errores:

Agregar siempre un enlace «Saltar al contenido» en la parte superior de la página.
Asegurar que el enlace sea accesible mediante teclado, sin requerir el uso del ratón.
Usar un texto descriptivo en el enlace que indique claramente su propósito.
Hacer que el enlace sea visible al recibir foco, mejorando la experiencia de usuarios de teclado y lectores de pantalla.

Preguntas frecuentes sobre la técnica general G1

¿Es obligatorio hacer visible el enlace «Saltar al contenido»?

No, pero debe ser visible al recibir foco.

¿Funciona en todos los navegadores?

Sí, si se implementa correctamente.

¿Es necesario si ya uso puntos de referencia ARIA?

Sí, proporciona una alternativa adicional.

¿Afecta al SEO?

No, los motores de búsqueda ignoran los enlaces internos de accesibilidad.

¿Cómo lo pruebo?

Usando solo el teclado para navegar y asegurándose de que el enlace funcione correctamente.

Recursos relacionados

Pruebas y validación

Procedimiento

Verificar que el enlace «Saltar al contenido» sea el primer elemento enfocable.
Asegurar que el enlace sea visible al recibir foco.
Activar el enlace y comprobar que el foco se mueve al contenido principal.
Comprobar que la navegación continúa desde el contenido principal.

Resultados esperados

✅ Si todas las verificaciones anteriores son positivas, la implementación es correcta.
❌ Si alguno de los elementos anteriores no se cumple, el contenido falla el criterio 2.4.1 y debe corregirse.

Reglas de prueba (Test Rules)

Implementar un enlace «Saltar al contenido» mejora la accesibilidad web, facilitando la navegación para usuarios de teclado y lectores de pantalla. Aplicar correctamente esta técnica garantiza conformidad con WCAG 2.1 y mejora la experiencia del usuario.

¡Si necesitas ayuda con la accesibilidad de tu web, contáctanos!

¿Tienes dudas? Solicita una consultoría inicial gratuita

Evaluamos tu sitio web para identificar barreras que dificultan el acceso a personas con discapacidad. Te entregamos un informe con errores detectados y soluciones para que tu web sea usable por todos.