Op websites staan vaak blokken met content die op iedere pagina terug komen, zoals een logo, een zoekveld en een navigatie met een lijst van links. Mensen die alleen het toetsenbord gebruiken moeten eerst door deze blokken navigeren voordat ze bij de hoofdcontent van de webpagina komen, en dat op iedere pagina opnieuw.
Succescriterium 2.4.1 Blokken omzeilen vereist dat dit soort herhalende blokken met content overgeslagen kunnen worden. Dit kan redelijk eenvoudig met een zogenaamde skiplink. Een skiplink is een ankerlink aan het begin van een webpagina die direct verwijst naar de hoofdcontent. Een ontwikkelaar kan skiplinks toevoegen in de code van een website.
Een skiplink is bedoeld om het navigeren over een website prettiger te maken voor mensen die:
- geen muis kunnen gebruiken door bijvoorbeeld een motorische beperking
- een schermlezer gebruiken, zoals voorleessoftware of een brailleleesregel
- de voorkeur hebben om alleen met het toetsenbord te navigeren
Code van een skiplink
Skiplinks worden in de code opgemaakt met een <a>-element. Het href-attribuut van dit element verwijst naar een id-attribuut van een element lager op de pagina, bijvoorbeeld het <main>-element.
<a href="#primary" class="skip">Naar de inhoud</a>
<main id="primary">Het <main>-element is standaard niet focusbaar. Dit is logisch, want je wilt niet dat gebruikers per ongeluk op dit element focussen tijdens normale toetsenbordnavigatie.
Voeg daarom tabindex="-1" toe aan het <main>-element. Hiermee kan de focus wel via de skiplink naar dit element verplaatsen, maar krijgt het geen focus tijdens gewone Tab-navigatie.
<main id="primary" tabindex="-1">Skiplinks hoeven niet altijd zichtbaar te zijn. Verberg de skiplink bijvoorbeeld met CSS zodat het alleen voor hulptechnologieën te zien is. Dit kan met de volgende CSS:
.skip {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}Maak de skiplink wel zichtbaar als het de toetsenbordfocus krijgt. Dit kan (bijvoorbeeld) met de volgende CSS:
.skip:focus {
position: static;
width: auto;
height: auto;
}Bij een ingewikkelde website kunnen meerdere skiplinks worden toegevoegd, zoals een skiplink naar de navigatie en naar de content. In de meeste gevallen is 1 skiplink genoeg.
Welke skiplinks niet toevoegen
Voeg geen skiplinks toe die geen waarde hebben voor toetsenbordgebruikers. Voorbeelden van overbodige skiplinks:
- Naar het hoofdmenu (als dat het eerste element is)
- Naar de zoekfunctie (als die bovenaan staat)
- Naar de footer
Deze skiplinks voegen alleen ruis toe en maken navigatie juist lastiger.
Voorbeeldcode
In een stuk pagina-code ziet een skiplink er zo uit:
<body>
<a href="#primary" class="skip">Naar de inhoud</a>
<header>
<a href="/"><img src="logo.jpg" alt="WCAG.nl"></a>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/artikelen">Artikelen</a></li>
<li><a href="/onderzoek">Onderzoek</a></li>
<li><a href="/over-ons">Over ons</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<main id="primary" tabindex="-1">
...
</main>
</body>Andere skiplinks
Skiplinks kunnen ook in de content van een webpagina met veel tekst of links worden gebruikt. Gebruik hier een ankerlink aan het begin van de content die verwijst naar sectie in de content van de webpagina.
Gerelateerd succescriterium
Dit artikel behandelt het WCAG-succescriterium 2.4.1 Blokken omzeilen (niveau A).