Skiplinks – Toegankelijkheid

Op websites staan vaak blokken met content die op iedere pagina terugkomen, zoals een logo, een zoekveld en een navigatie met een lijst van links. Mensen die alleen het toetsenbord gebruiken moeten eerst door deze blokken navigeren voordat ze bij de hoofdcontent van de webpagina komen. En dat op iedere pagina opnieuw.

In dit artikel leg ik uit wat skiplinks zijn, hoe je ze toevoegt en waar je op moet letten. Succescriterium 2.4.1 Blokken omzeilen vereist dat dit soort herhalende blokken met content overgeslagen kunnen worden.

Niet alles wat zich herhaalt is ook gelijk een “blok”. Kleine herhaalde onderdelen zoals losse woorden, zinnen of individuele links tellen voor dit criterium niet als blokken die overgeslagen moeten kunnen worden.

Een skiplink is een ankerlink aan het begin van een webpagina die direct verwijst naar de hoofdcontent. Een ontwikkelaar kan skiplinks toevoegen in de code van een website. Een skiplink is bedoeld om het navigeren over een website prettiger te maken voor mensen die:

geen muis kunnen gebruiken door bijvoorbeeld een motorische beperking
een schermlezer gebruiken, zoals voorleessoftware of een brailleleesregel
de voorkeur hebben om alleen met het toetsenbord te navigeren

Code van een skiplink

Skiplinks worden in de code opgemaakt met een <a>-element. Het href-attribuut van dit element verwijst naar het id van een element lager op de pagina, bijvoorbeeld het <main>-element.

<a href="#primary" class="skip">Naar de inhoud</a>
<main id="primary">

Gebruik als linktekst bij voorkeur “Naar de inhoud” of “Naar de hoofdinhoud”. Dit beschrijft waar de gebruiker naartoe gaat.

Het <main>-element is standaard niet focusbaar. Dit is logisch, want je wilt niet dat gebruikers per ongeluk op dit element focussen tijdens normale toetsenbordnavigatie. Voeg daarom tabindex="-1" toe aan het <main>-element. Hiermee kan de focus wel via de skiplink naar dit element verplaatsen, maar krijgt het geen focus tijdens gewone Tab-navigatie.

<main id="primary" tabindex="-1">

Skiplink verbergen met CSS

Skiplinks hoeven niet altijd zichtbaar te zijn. Verberg de skiplink bijvoorbeeld met CSS zodat het alleen voor hulptechnologieën te zien is. Dit kan met de volgende CSS:

.skip {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

Maak de skiplink wel zichtbaar als het de toetsenbordfocus krijgt. Dit kan (bijvoorbeeld) met de volgende CSS:

.skip:focus {
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  overflow: visible;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 1000;
}

Meerdere skiplinks

Bij een ingewikkelde website kunnen meerdere skiplinks worden toegevoegd, zoals een skiplink naar de navigatie en naar de content. In de meeste gevallen is één skiplink genoeg. Voeg alleen extra skiplinks toe als de pagina-opbouw dat echt vraagt.

Denk bijvoorbeeld aan een webshop met een lange lijst filters voor de zoekresultaten. Een skiplink boven die filters laat gebruikers direct naar de productresultaten springen.

Let op: Als gebruikers eerst door een lange lijst skiplinks moeten navigeren, vervang je het ene navigatieprobleem door het andere.

Voorbeeldcode

In een stuk pagina-code ziet een skiplink er zo uit:

<body>
  <a href="#primary" class="skip">Naar de inhoud</a>
  <header>
    <a href="/"><img src="logo.jpg" alt="WCAG.nl"></a>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/artikelen">Artikelen</a></li>
        <li><a href="/onderzoek">Onderzoek</a></li>
        <li><a href="/over-ons">Over ons</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main id="primary" tabindex="-1">
    ...
  </main>
</body>

Skiplinks in de content

Skiplinks kunnen ook in de content van een webpagina worden gebruikt. Dit is handig bij pagina’s met veel tekst of links. Gebruik een ankerlink aan het begin van de content die verwijst naar een sectie verderop op de webpagina, zoals een inhoudsopgave.

Skiplinks zijn ook nuttig om moeilijk navigeerbare content te omzeilen, zoals complexe tabellen of ingesloten social media feeds.

Vereisten en aanbevelingen voor toegankelijke skiplinks

Dit zijn de vereisten en aanbevelingen voor het toevoegen van skiplinks:

WCAG-vereisten

Voeg een skiplink toe aan het begin van elke pagina die herhalende blokken met content bevat.
De skiplink moet zichtbaar zijn op het moment dat hij toetsenbordfocus krijgt.
Voeg tabindex="-1" toe aan het doelelement van de skiplink, zoals het <main>-element. Zonder dit attribuut verplaatst de focus in sommige browsers niet goed mee naar het doelelement.

Aanbevolen

Gebruik een kop aan het begin van elke sectie. Schermlezers kunnen hiermee ook blokken overslaan.
Gebruik landmarks zoals <main>, <nav> en <footer>. Schermlezers kunnen hiermee direct naar een oriëntatiepunt navigeren.
Beperk je tot één skiplink naar de hoofdcontent. Voeg alleen extra skiplinks toe als de pagina-opbouw dat echt vraagt, zoals bij een webpagina met een uitgebreide filterbalk voor de zoekresultaten.

Gerelateerd succescriterium

Dit artikel behandelt het WCAG-succescriterium 2.4.1 Blokken omzeilen (niveau A).