¿Qué es un skip link?
Un skip link —o «saltar al contenido»— es un enlace oculto que aparece cuando el usuario pulsa la tecla Tab por primera vez en la página. Al hacer clic, puerta directamente al contenido principal, saltándose el menú de navegación y cualquier otro bloque repetitivo que aparezca en todas las páginas.
El criterio WCAG 2.4.1 exige que los webs tengan un mecanismo para evitar bloques de contenido que se repiten en múltiples páginas. El skip link es la implementación estándar para cumplirlo.
¿Por qué es tan importante?
Imagínate navegar por un web con teclado. En cada página nueva, tienes que tabular por todos los elementos del menú (7, 8, 10 links de navegación) antes de poder acceder al contenido que te interesa. Página detrás página. Cada vez.
Para usuarios con discapacidad motriz que navegan con teclado, o para usuarios de lectores de pantalla, esto es extremadamente ineficiente y frustrante. El skip link soluciona este problema con una sola línea de código.
Como implementar un skip link
HTML: el enlace
Añádelo como primer elemento del <body>:
<body>
<a href="#contingut-principal" class="skip-link">
Saltar al contingut principal
</a>
<header>...
<main id="contingut-principal">...
CSS: visible solo en focus
El enlace tiene que ser invisible para los usuarios de ratón pero visible cuando recibe el focus por teclado:
.skip-link {
position: absolute;
top: -100px;
left: 16px;
background: #000;
color: #fff;
padding: 8px 16px;
z-index: 9999;
text-decoration: none;
}
.skip-link:focus {
top: 16px;
}
Errores habituales
El error más común: el elemento destino (lo <main id="contingut-principal">) no existe o tiene un ID diferente. El link lleva a #contenido-principal pero el main tiene id=»main-content». El resultado es un skip link que no funciona.
Otro error: el skip link tiene display:none o visibility:hidden en lugar de estar posicionado fuera de la pantalla. Un elemento con display:none no puede recibir focus y por tanto no funciona para usuarios de teclado.
WordPress y skip links
Muchos temas WordPress modernos incluyen un skip link por defecto. Divi incluye un básico. Si tu tema no tiene, puedes añadirlo editando el fichero header.php o usando el hook wp_body_open.
Puedes verificar si tu web tiene skip link funcional con la herramienta de autoevaluació de webaccessible.cat, o simplemente pulsando Tab en tu web: si el primer elemento que recibe focus es un link de «Saltar al contenido», todo funciona correctamente.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.