Een skiplink is een van de eenvoudigste toegankelijkheidsmaatregelen die je kunt nemen om het leven van toetsenbordgebruikers (waaronder ook screenreaders) aangenamer te maken.
Tegelijk is het ook een van de onderdelen waar het in de praktijk vaak misgaat. De implementatie lijkt rechttoe, rechtaan, maar de details bepalen of een skiplink daadwerkelijk werkt voor toetsenbord- en screenreadergebruikers.
In dit artikel leggen we uit wat een goede skiplink is, hoe je deze correct implementeert en fouten voorkomt die we in audits vaak tegenkomen.
Wat is een skiplink?
Volgens WCAG 2.4.1 (Bypass Blocks) moet herhalende content kunnen worden overgeslagen. Een skiplink (ook wel skipnav of skip navigation link) is een link op de pagina waarmee je precies dat kunt doen. Het zorgt ervoor dat gebruikers herhalende content, zoals je hoofdnavigatie, kunnen overslaan en direct naar de hoofdinhoud van een pagina kunnen springen.
Dit is met name belangrijk voor toetsenbordgebruikers en screenreadergebruikers of bij gebruik van alternatieve invoerapparaten.
Een toegankelijke skiplink voldoet aan drie belangrijke kernmerken:
- het is het eerste focusbare element op de pagina,
- het is zichtbaar zodra het focus krijgt via het toetsenbord,
- het brengt de focus daadwerkelijk naar de hoofdinhoud.
Alleen “naar beneden scrollen” naar een anker is niet voldoende; focusgedrag is cruciaal.
HTML voor de juiste structuur
Plaats de skiplink direct na het <body>-element.
Ook de hoofdinhoud van de pagina moet een logisch en semantisch ankerpunt hebben.Gebruik waar mogelijk altijd <main> in plaats van een generieke <div>. Dit helpt namelijk ook screenreaders bij het begrijpen van de paginastructuur.
<body>
<a href="#main" class="skip-link">Ga naar hoofdinhoud</a>
<header>
<nav>hier zit je hoofdnavigatie</nav>
</header>
<main id="main">
...
</main>
...CSS: zichtbaar bij focus
Een skiplink mag visueel verborgen zijn, zolang deze zichtbaar wordt bij focus. Gebruik hiervoor geen display: none of visibility: hidden, want daarmee verdwijnt de link ook voor screenreaders.
Je kunt door middel van CSS de link standaard verborgen laten zijn, en tonen zodra deze focus ontvangt. De volgende CSS verplaatst de skiplink zonder focus buiten beeld van de browser, en plaatst hem terug in de hoek linksboven zodra er focus is.
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000;
color: #fff;
padding: 8px 12px;
z-index: 1000;
text-decoration: none;
}
.skip-link:focus {
top: 0;
}
Focus verplaatsen is belangrijk
Het doel van een skiplink is niet alleen visueel springen, maar ook focus verplaatsen.
Hoewel moderne browsers fragmentlinks (links binnen een pagina via een ID waarde zoals #main) correct afhandelen, is <main> standaard niet focusbaar. Dat is ook begrijpelijk, want je wil niet dat zo'n 'container' standaard focus van een toetsenbord krijgt.
Dit kan door een negatieve tabindex toe te voegen. Zo krijgt <main> niet de focus als je er met een toetsenbord langs navigeert, maar kun je er via een fragmentlink wel de focus naartoe verplaatsen.
<main id="main" tabindex="-1">Meerdere skiplinks: wanneer zinvol?
Op complexe pagina’s, bijvoorbeeld met uitgebreide navigaties, filters of datamodel-weergaven, kan het zinvol zijn om meerdere skiplinks aan te bieden.
Let er wel op dat elke skiplink ook een extra navigatie-tab toevoegt. Meer is dus niet automatisch beter.
Voeg bijvoorbeeld geen skiplinks toe voor functionaliteit die al bovenaan de pagina aanwezig is, zoals "Naar hoofdmenu" of "Naar zoeken". Ook skiplinks als "naar footer" zijn overbodig en voegen alleen maar extra ruis toe.
Testen: zo weet je of het werkt
Test een skiplink altijd in de praktijk.
- Druk op Tab: verschijnt de skiplink?
- Druk op Enter: komt de focus echt in de hoofdinhoud?
- Test met een screenreader: wordt de link logisch aangekondigd?
- Test op pagina’s met lange menu’s: bespaart het daadwerkelijk interacties?
Als het antwoord op een van deze vragen “nee” is, is de implementatie nog niet af.