Skiplinks: sneller en toegankelijker navigeren

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;

}