Blokken omzeilen

Wat het vereist

Wanneer hetzelfde inhoudsblok op meerdere pagina’s verschijnt — paginakoptekst, primaire navigatie, megamenu, broodkruimelnavigatie, hulplinks — kunnen sighted muisgebruikers dat onmiddellijk overslaan. Toetsenbordgebruikers moeten er elke keer doorheen tabben. Schermlezersgebruikers moeten ernaar luisteren. Het succescriterium vereist ten minste één mechanisme waarmee gebruikers direct naar de hoofdinhoud kunnen springen.

WCAG accepteert meerdere mechanismen: een link „Ga naar hoofdinhoud“, correcte landmarkgebieden (<header>, <nav>, <main>, <footer>), of een echte kopenstructuur waarmee schermlezersgebruikers kunnen navigeren met de H-toets. In de praktijk is een skip-link gecombineerd met landmarks de veilige basislijn.

Hoe te voldoen

• Voeg een „Ga naar hoofdinhoud“-link toe als het eerste focusbare element op de pagina. Maak deze zichtbaar bij focus, niet permanent verborgen.
• Laat de href van de skip-link wijzen naar het id van het <main>-element en voeg tabindex="-1" toe aan <main> zodat de focusring daar terechtkomt in Safari.
• Gebruik echte landmarkelementen: één <header>, één <nav> (of meerdere met aria-label), één <main>, één <footer> per pagina.
• Gebruik een duidelijke kopenstructuur zodat JAWS- en NVDA-gebruikers op H, 1, 2, 3 kunnen drukken om te navigeren.
• Als er meerdere herhalende blokken zijn (hulpnavigatie + primaire navigatie + broodkruimels), overweeg dan een tweede skip-link voor het meest belastende blok.

Veelvoorkomende fouten

• Skip-link verborgen met display: none in plaats van buiten het scherm geplaatst en zichtbaar gemaakt bij focus — hulptechnologie kan deze niet vinden.
• Skip-link doel mist tabindex="-1", waardoor Safari/WebKit de sprong negeert en de focus op de skip-link houdt.
• <main> genest binnen <nav> of meerdere keren op de pagina gedupliceerd.
• Kopenstructuur die niveaus overslaat (h1 → h4) of koppen puur gebruikt voor visuele opmaak, waardoor de H-toetsnavigatiestrategie wordt doorbroken.
• Vaste headers die het gefocuste element overlappen nadat de skip-link is geactiveerd — zie 2.4.11.

Waarom dit belangrijk is

Blokken omzeilen is de goedkoopste toegankelijkheidsverbetering op de lijst — een skip-link beslaat ongeveer tien regels HTML en CSS — maar het faalpercentage op productiesites is nog steeds rond de 60% in de jaarlijkse Million-scan van WebAIM. Voor een gebruiker die uitsluitend via het toetsenbord navigeert op een site met een megamenu van veertig items, is het bij elke paginawissel doorheen tabben uitputtend en, bij langere browsesessies, beperkend.