Een skip-link toevoegen: direct naar de inhoud

Tel eens hoe vaak u op Tab moet drukken voordat u bij de eerste alinea van uw eigen homepage bent. Bij een gemiddelde webshop met een logo, een zoekveld, een account-icoon, een winkelmandje en een menu met acht hoofdonderdelen komt u al snel boven de vijftien. Op elke pagina opnieuw. Voor een toetsenbordgebruiker is dat alsof u bij elke winkel eerst door de hele voorraadkamer moet lopen. Een skip link op uw website lost dat op met één toetsaanslag.

Wat een skip link op uw website doet

Een skip-link is een gewone link, meestal het allereerste element van de pagina, met een tekst als “Ga naar de inhoud”. Hij verwijst naar het begin van de hoofdinhoud. Voor muisgebruikers is hij onzichtbaar. Zodra iemand op Tab drukt, verschijnt hij bovenaan het scherm. Druk op Enter, en de focus springt naar de inhoud.

Wie het nodig heeft: iedereen die met het toetsenbord navigeert, zoals mensen met een motorische beperking, en mensen die spraakbesturing of een schakelaar gebruiken. Schermlezergebruikers hebben vaak ook andere manieren om te springen, zoals via koppen of landmarks, maar de skip-link is voor hen een prettige snelweg.

Waarom WCAG erom vraagt

WCAG-succescriterium 2.4.1 Blokken omzeilen, niveau A, vraagt dat er een manier is om blokken content die op meerdere pagina’s terugkomen over te slaan. Een skip-link is de meest gebruikte en meest betrouwbare manier om daaraan te voldoen. Een goede paginastructuur met landmarks helpt ook, zoals beschreven in landmarks voor schermlezers, maar die werkt niet voor toetsenbordgebruikers zonder hulpmiddel. De skip-link wel.

Heeft uw thema er al een?

Veel WordPress-thema’s hebben een skip-link ingebouwd. Controleer het zo:

1. Open uw site in een nieuw tabblad.
2. Klik eenmaal in de adresbalk, zodat de focus daar staat.
3. Druk één keer op Tab.

Verschijnt er linksboven een link als “Naar de inhoud springen” of “Skip to content”? Dan heeft uw thema er een. Druk dan op Enter en druk nog eens op Tab. De focus moet nu op het eerste element in de hoofdinhoud staan, niet weer op het logo.

Ziet u niets, maar ziet u wel een kader verschijnen rond het logo of het menu? Dan is er geen skip-link, of hij werkt niet goed. Zit de link er wel, maar blijft hij onzichtbaar? Dan is hij verstopt met CSS die hem ook bij focus niet toont. Dat telt niet als oplossing.

Let op met pagebuilders. Een thema kan een skip-link hebben die verwijst naar #content, terwijl de pagebuilder een eigen header en inhoud tekent zonder dat element. De link staat er dan, maar springt nergens heen.

Een skip-link toevoegen in een WordPress-thema

Werk altijd in een child theme, zodat een thema-update uw wijziging niet overschrijft.

Stap 1: de link in de header

Plaats deze code direct na de opening van de <body>, vóór het logo en het menu. In een klassiek thema staat dat in header.php, vaak direct na wp_body_open():

<a class="skip-link" href="#hoofdinhoud">Ga naar de inhoud</a>

Gebruikt u een blokthema, dan kunt u de link toevoegen aan het header-template-onderdeel als HTML-blok bovenaan. Sommige blokthema’s voegen automatisch een skip-link toe als er een <main>-element aanwezig is.

Stap 2: het doel

Geef het element waar de hoofdinhoud begint een id. Het beste is het <main>-element:

<main id="hoofdinhoud" tabindex="-1">
  ...
</main>

De tabindex="-1" zorgt ervoor dat de focus betrouwbaar naar dat element gaat, zonder dat het een extra tabstop wordt.

Stap 3: de stijl

De link moet onzichtbaar zijn tot hij de focus krijgt, en dan duidelijk zichtbaar:

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 1000;
  padding: .75rem 1rem;
  background: #111111;
  color: #ffffff;
}
.skip-link:focus {
  top: 1rem;
}

Gebruik geen display: none of visibility: hidden: dan kan de link nooit de focus krijgen. Zorg ook voor voldoende contrast en een duidelijke focusrand, zoals beschreven in zichtbare focus.

Testen of het werkt

Een skip-link die er staat maar niet werkt, komt vaker voor dan een die ontbreekt. Test daarom niet alleen of hij verschijnt, maar ook wat er daarna gebeurt:

• Druk op Tab vanaf de adresbalk: verschijnt de link, goed leesbaar?
• Druk op Enter: verschuift de pagina naar de inhoud?
• Druk opnieuw op Tab: staat de focus nu op het eerste interactieve element in de inhoud, niet op het logo?
• Herhaal dit op een productpagina, een blogbericht en de contactpagina. Bij pagebuilders verschilt de opbouw soms per template.
• Controleer de tekst: is die in de taal van de pagina, en zegt hij duidelijk wat er gebeurt?

Veelvoorkomende fouten

• Een Engelse tekst op een Nederlandse site. “Skip to content” wordt door een schermlezer met Nederlandse stem vreemd uitgesproken. Vertaal hem, of controleer of de vertaling van uw thema actief is.
• Een link die naar een niet-bestaand id verwijst. Na een thema- of builderwissel bestaat het doel soms niet meer.
• Een link die achter de vaste header verschijnt en daardoor bij focus niet te zien is. Een hoge z-index lost dat op.
• Een link die verderop in de code staat, bijvoorbeeld na de cookiemelding of de aankondigingsbalk. Hij moet als eerste komen.

Meer dan één skip-link?

Op de meeste sites is één skip-link naar de hoofdinhoud genoeg. Bij complexe pagina’s kan een tweede nuttig zijn, bijvoorbeeld “Ga naar de filters” op een webshopcategorie met een lange filterlijst, of “Ga naar het zoekveld”. Overdrijf het niet: vijf skip-links bovenaan de pagina zijn zelf weer een blok om door te tabben.

Een klein onderdeel van een groter geheel

Een skip-link is snel gemaakt, maar lost alleen het probleem van herhaalde blokken op. Een toetsenbordgebruiker moet daarna nog steeds door uw menu, formulieren en pop-ups kunnen. Hoe u de hele site op toetsenbordbediening controleert, leest u op de pagina over toetsenbordnavigatie op uw website. En het volledige plaatje van toegankelijkheid staat in een website toegankelijk maken.