Què és un skip link?
Un skip link —o «saltar al contingut»— és un enllaç ocult que apareix quan l’usuari prem la tecla Tab per primera vegada a la pàgina. En fer clic, porta directament al contingut principal, saltant-se el menú de navegació i qualsevol altre bloc repetitiu que aparegui a totes les pàgines.
El criteri WCAG 2.4.1 exigeix que els webs tinguin un mecanisme per evitar blocs de contingut que es repeteixen a múltiples pàgines. El skip link és la implementació estàndard per complir-ho.
Per què és tan important?
Imagina’t navegar per un web amb teclat. A cada pàgina nova, has de tabular per tots els elements del menú (7, 8, 10 links de navegació) abans de poder accedir al contingut que t’interessa. Pàgina rere pàgina. Cada cop.
Per a usuaris amb discapacitat motriu que naveguen amb teclat, o per a usuaris de lectors de pantalla, això és extremadament ineficient i frustrant. El skip link soluciona aquest problema amb una sola línia de codi.
Com implementar un skip link
HTML: l’enllaç
Afegeix-lo com a primer element del <body>:
<body>
<a href="#contingut-principal" class="skip-link">
Saltar al contingut principal
</a>
<header>...
<main id="contingut-principal">...
CSS: visible només en focus
L’enllaç ha de ser invisible per als usuaris de ratolí però visible quan rep el focus per teclat:
.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;
}
Errors habituals
L’error més comú: l’element destí (el <main id="contingut-principal">) no existeix o té un ID diferent. El link porta a #contingut-principal però el main té id=»main-content». El resultat és un skip link que no funciona.
Un altre error: el skip link té display:none o visibility:hidden en lloc d’estar posicionat fora de la pantalla. Un element amb display:none no pot rebre focus i per tant no funciona per a usuaris de teclat.
WordPress i skip links
Molts temes WordPress moderns inclouen un skip link per defecte. Divi n’inclou un bàsic. Si el teu tema no en té, pots afegir-lo editant el fitxer header.php o usant el hook wp_body_open.
Pots verificar si el teu web té skip link funcional amb l’eina d’autoevaluació de webaccessible.cat, o simplement prement Tab a la teva web: si el primer element que rep focus és un link de «Saltar al contingut», tot funciona correctament.
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.