Wat is een skip-navigatielink?
Een skip-navigatielink is een verborgen link bovenaan de pagina die zichtbaar wordt zodra een gebruiker de Tab-toets indrukt. De link stelt toetsenbordgebruikers in staat om het volledige navigatiemenu over te slaan en direct naar de hoofdinhoud te springen.
Dit is een vereiste vanuit WCAG 2.1 — criterium 2.4.1 (Blokken omzeilen). Zonder deze link moet een toetsenbordgebruiker bij elke paginalading opnieuw door alle menu-items navigeren om bij de inhoud te komen.
Hoe werkt het?
In base.html.twig is direct na de <body>-tag een ankerlink geplaatst:
<a href="#main-content" class="skip-nav">Naar hoofdinhoud</a>
Het doel van deze link is het <main>-element dat de pagina-inhoud bevat:
<main id="main-content">
...
</main>
Visueel verborgen, toch toegankelijk
De link is standaard buiten beeld geplaatst met position: absolute en top: -100%. Zodra de link focus ontvangt via de Tab-toets, schuift hij in beeld met een korte transitie. Zodra de focus verdwijnt, verdwijnt de link weer.
Dit is bewust gedaan met :focus in plaats van :focus-visible, zodat de link bij élk type focus verschijnt — niet alleen bij toetsenbordnavigatie.
Waarom dit ertoe doet
Toegankelijkheid is geen extraatje maar een basisvereiste. Een skip-navigatielink kost vrijwel niets om te implementeren, maar maakt een groot verschil voor gebruikers die afhankelijk zijn van toetsenbordnavigatie of schermlezers.