Skiplinks

Geplaatst op

Op websites staan vaak blokken met content die op iedere pagina terug komen, 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.

Succescriterium 2.4.1 Blokken omzeilen vereist dat dit soort herhalende blokken met content overgeslagen kunnen worden. Dit kan redelijk eenvoudig met een zogenaamde skiplink. 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.

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

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

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: static;
  width: auto;
  height: auto;
}

Bij een ingewikkelde website kunnen meerdere skiplinks worden toegevoegd, zoals een skiplink naar de navigatie en naar de content. In de meeste gevallen is 1 skiplink genoeg.

Voorbeeldcode

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

<body>
  <header>
    <a href="#primary" class="skip">Naar de inhoud</a>
    <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">
    ...
  </main>
</body>

Skiplinks kunnen ook in de content van een webpagina met veel tekst of links worden gebruikt. Gebruik hier een ankerlink aan het begin van de content die verwijst naar sectie in de content van de webpagina.

Een voorbeeld hiervan staat op de pagina “Voorbeeld WCAG-onderzoek“.

Gerelateerde WCAG succescriteria