Sla-over-link — woordenlijst toegankelijkheid

Een sla-over-link is een toetsenbordsnelkoppeling bovenaan elke pagina waarmee gebruikers de herhaalde navigatie kunnen overslaan en direct naar de hoofdinhoud kunnen gaan. De link voldoet aan WCAG 2.4.1 Bypass Blocks (niveau A) en is een van de goedkoopste toegankelijkheidsverbeteringen die er zijn.

Waarom bestaat dit?

Overweeg een typische contentsite. De header bevat zes hoofdnavigatiekoppelingen, een taalkiezer en een themawissel. De footer bevat nog eens twaalf. Elke pagina herhaalt die structuren. Een toetsenbord- of schermlezergebruiker die op een artikel belandt en dit wil lezen, moet Tab indrukken voor ongeveer dertig interactieve elementen voordat het artikellichaam bereikt wordt. Vermenigvuldigd over elke paginanavigatie is dit slopend.

Een sla-over-link is een enkele <a href="#main-content">Ga naar inhoud</a> als eerste fokusbaar element in het document. De gebruiker drukt éénmaal op Tab na het laden van de pagina, ziet “Ga naar inhoud”, drukt op Enter en de focus verplaatst naar het artikel.

Implementatie

Het patroon is klein maar kent een aantal bekende valkuilen:

<a class="skip-link" href="#main-content">Ga naar inhoud</a>
...
<main id="main-content" tabindex="-1">
  ...
</main>

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #000;
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 100;
}
.skip-link:focus {
  left: 0;
}

Drie details die van belang zijn:

De link moet zichtbaar zijn bij focus. Een sla-over-link die permanent display: none heeft, is onzichtbaar voor ziende toetsenbordgebruikers, die dan niet weten dat hij bestaat. Verberg de link buiten het scherm via positionering, niet via display: none of visibility: hidden.
Het doel moet focus kunnen ontvangen. Een kale <main> accepteert standaard geen toetsenbordfocus. Door tabindex="-1" toe te voegen wordt het element programmatisch fokusbaar, zodat de browser de focus daadwerkelijk verplaatst wanneer de koppeling wordt gevolgd. Zonder dit verandert de URL-hash maar verplaatst de focus zich niet, waarna de volgende Tab weer bovenaan de pagina begint — het volledige doel van de sla-over-link teniet doend.
Het moet het eerste fokusbare element zijn. Niet “in de eerste 100 elementen” — het allereerste. Als er iets aan voorafgaat (een logokoppeling, een zoekpictogram), moet de gebruiker eerst die elementen overslaan voordat de sla-over-link bereikt wordt, waarmee het doel wordt ondermijnd.

Meerdere sla-over-koppelingen

Lange pagina’s met meerdere herhaalde regio’s profiteren soms van een klein “sla over”-menu in plaats van één enkele koppeling:

Ga naar hoofdinhoud
Ga naar navigatie
Ga naar voettekst

Een korte, bij-focus-zichtbare lijst met drie of vier bestemmingen is prima. Een lange automatisch gegenereerde inhoudsopgave bovenaan elke pagina is dat niet.

Wat het niet vervangt

Een sla-over-link is het veiligheidsnet voor bypass-blocks. Het vervangt geen goede landmarks (<nav>, <main>, <aside>, <footer>), geen goede koppenstructuur (één <h1> per pagina, hiërarchische <h2>s) of ARIA aria-label op dubbele landmarks. Schermlezergebruikers navigeren tussen regio’s en koppen via toetsenbordsnelkoppelingen die afhankelijk zijn van die structuren; de sla-over-link is voor ziende gebruikers die uitsluitend het toetsenbord gebruiken.