Skiplinks: sneller en toegankelijker navigeren
De meeste websites bevatten webpagina’s met veel terugkerende elementen, zoals hoofdmenu’s, zoekvelden en footers. Dit kan voor sommige mensen, die afhankelijk zijn van het toetsenbord of hulpsoftware, een flinke drempel zijn. Zij moeten telkens door dezelfde blokken ‘tabben’, voordat ze bij de hoofdinhoud komen. Met zogenaamde skiplinks bied je een toegankelijke oplossing: eenvoudige links waarmee gebruikers rechtstreeks naar de belangrijkste content van een pagina kunnen springen.
Wat is een skiplink?
Een skiplink is een HTML code die je in de techniek van de website inbouwt om de toegankelijkheid te verbeteren. Skiplinks zijn niet alleen nuttig voor blinde of slechtziende gebruikers. Ook mensen met een motorische beperking profiteren hiervan én ieder ander, die snel door een pagina wil navigeren.
Navigeren met de tab-toets
Gebruikers die niet met een muis werken navigeren meestal met het toetsenbord. Met de Tab-toets gaan ze naar het volgende interactieve element (link, knop, formulier), en met Shift + Tab gaan ze terug.
Bij gebruik van de Tab-toets heeft een element op de webpagina de focus. Er komt een kader of highlight omheen: de zogenaamde focus-indicator. Deze focus moet altijd duidelijk zichtbaar zijn en mag volgens de WCAG 2.2-richtlijnen (SC 2.4.11 Focus niet verborgen) nooit overlappen of verstopt raken achter andere onderdelen.
Blokken overslaan met skiplinks
Stel dat een bezoeker steeds door dezelfde hoofdnavigatie moet ‘tabben’ om bij de hoofdinhoud te komen. Dat kan tijdrovend en vervelend zijn. Met een skiplink voorkom je dit. Het is een eenvoudige interne link die direct naar het <main>-gedeelte van de pagina springt.
Volgens het WCAG Succescriterium 2.4.1 (Blokken omzeilen) moet een gebruiker herhalende blokken of content kunnen overslaan. Skiplinks zijn daarvoor nog steeds de meest praktische en meest ondersteunde oplossing.
Skiplinks zichtbaar maken
Oorspronkelijk werden skiplinks vaak onzichtbaar in de code gezet, bedoeld voor screenreaders. Tegenwoordig wordt aangeraden ze zichtbaar te maken zodra ze focus krijgen. Dit is niet alleen nuttig voor screenreader-gebruikers, maar ook voor iedereen die met het toetsenbord navigeert en geen spraaksoftware gebruikt.
Met moderne CSS kun je skiplinks netjes verbergen tot ze focus krijgen. Dankzij de selector :focus-visible verschijnt de skiplink alleen wanneer iemand met het toetsenbord navigeert – en niet bij een muisklik.
Meer dan skiplinks alleen
Skiplinks zijn de beste en meest eenvoudige oplossing, maar niet de enige manier. Moderne websites maken vaak gebruik van landmarks zoals <header>, <nav> en <main>. Deze worden herkend door screenreaders en maken het mogelijk om snel naar belangrijke secties te springen.
Als je het helemaal goed wil doen, is de beste aanpak vaak een combinatie:
- Skiplinks voor directe toegang via het toetsenbord
- Landmarks en duidelijke koppenstructuur voor ondersteunende technologie
- Zichtbare focus en goed contrast volgens WCAG 2.2, zodat de skiplink altijd bruikbaar is
Conclusie
Skiplinks zijn een eenvoudige en effectieve manier om websites toegankelijker te maken. Waar ze ooit vooral als hulpmiddel werden gezien voor gebruikers met een visuele beperking, zijn ze inmiddels een oplossing voor iedereen die sneller en efficiënter wil navigeren.
Met de huidige WCAG-richtlijnen ligt de nadruk bovendien sterk op focusweergave, contrast en bruikbaarheid. Door skiplinks te combineren met semantische landmarks en moderne CSS zorg je dat jouw website voldoet aan de toegankelijkheidsnormen en dat álle bezoekers prettig kunnen navigeren.
Checklist: zijn jouw skiplinks op orde?
- Is er minimaal één skiplink aanwezig die direct naar de hoofdinhoud <main> verwijst?
- Zijn skiplinks met het toetsenbord bereikbaar (Tab-toets) en goed zichtbaar bij focus?
- Wordt de skiplink niet overlapt of verborgen door andere elementen (WCAG 2.2 -SC 2.4.11)?
- Is er voldoende kleurcontrast tussen de skiplink en de achtergrond (minimaal 4.5:1)?
- Worden landmarks gebruikt (<header>, <nav>, <main>) als aanvulling op skiplinks?
Voorbeeld code HTML + CSS
HTML
<body>
<div class="skiplink">
<a href="#main-content">Naar hoofdinhoud</a>
</div>
<main id="main-content">
<h1>Hoofdinhoud</h1>
</main>
</body>
CSS
.skiplink a {
position: absolute;
top: -40px;
left: 0;
background: #004080;
color: #fff;
padding: 8px 16px;
border-radius: 8px;
}
.skiplink a:focus,
.skiplink a:focus-visible {
top: 0;
outline: 3px solid #ffbf47;
}
Zie ook
-
Zorg voor voldoende kleurcontrast
TechniekDigitale omgeving
-
Alles over voorleessoftware
TechniekDigitale omgeving
-
Hoe maak je je social-mediacontent toegankelijk?
ContentDigitale omgeving
Contact
Ook aan de slag met digitale communicatie die voor iedereen toegankelijk is?