Ga naar hoofdinhoud

WCAG

WCAG-succescriterium 2.4.1 Blokken omzeilen

Niveau A

Uitleg

Geef gebruikers van hulpmiddelen de mogelijkheid om binnen een pagina snel te navigeren door onderdelen, zoals een menu, te kunnen overslaan.

Gebruikers die de website van boven naar beneden doornemen moeten makkelijk grote stukken content kunnen overslaan om bijvoorbeeld direct naar de hoofdinhoud kunnen gaan. Het gaat hierbij om grote stukken content die op elke pagina herhaald wordt, zoals de hoofdnavigatie en een filter.

Dan voorkom je dat een toetsenbordgebruiker eerst door een menu of filter moet tabben om bij een link in de hoofdinhoud te komen.

Er zijn verschillende manieren om met hulptechnologie snel door een webpagina te navigeren. Zo kan een screenreadergebruiker een lijst van links, koppen of landmarks oproepen en daar een keuze uit maken. Maar de skiplink is ook voor screenreadergebruikers handig.

Om zo gebruikersvriendelijk en consistent mogelijk te werken is een skiplink de eerste link op een pagina. Plaats deze link binnen de header-landmark. Als eerste focusable element, bovenaan de pagina, op een vaste plek.

Een uitzondering wordt gemaakt als er eerst een cookiebanner verschijnt. Dan krijgen de links en buttons in deze banner als eerste de toetsenbordfocus.

Je hoeft je niet te beperken tot alleen een skiplink naar de hoofdinhoud.

  • Een skiplink naar het zoekformulier kan zinvol zijn.
  • Je kunt binnen de webpagina interne skiplinks plaatsen vlak boven advertenties of carousels om de gebruiker ook snel deze componenten te laten overslaan.

Deze video laat zien hoe een skiplink werkt op de website van de gemeente Den Haag.

Een skiplink is een interne link naar bijvoorbeeld het begin van de inhoud. Als een gebruiker deze link aanklikt, verplaats de focus naar een punt vlak boven de hoofdinhoud.

De skiplink kan altijd zichtbaar zijn, of alleen zichtbaar worden als de link toetsenbordfocus krijgt. Beide opties zijn goed.

Je kunt bijvoorbeeld naar het <main>-element linken, als dit de hoofdinhoud van een webpagina bevat.

Consistentie is belangrijk. Zet de skiplink altijd op dezelfde plek binnen een website en laat deze dezelfde plek linken.

tabindex="-1"

Om een skiplink in alle browsers goed te laten werken is het belangrijk dat de focus zich goed verplaatst naar het doelelement.

Als dit element van nature geen focus kan krijgen, zoals een <main> landmark, kan het zijn dat de focus niet goed wordt verplaatst voor een screenreader. Voeg daarom tabindex="-1" toe aan het element dat de focus moet krijgen.

Het voordeel van tabindex="-1" in plaats van tabindex="0" is dat het element niet in de natuurlijke tabvolgorde wordt opgenomen, maar het wel focus kan krijgen. Gebruik nooit een positieve tabindex om een element toetsenbordfocus te geven. Waarom, staat uitgelegd bij de richtlijn Gebruik geen positieve tabindex.

Lees ook: Where focus goes when following in page links van Hidde de Vries.

In de HTML:

<!-- De skiplink, geplaatst als eerste focusable element op de webpagina -->
<a class="sr-only-focusable" href="#site-content">Naar de hoofdinhoud</a>

<!-- Het doel van de skiplink, waar de hoofdinhoud begint -->
<main id="site-content" class="content" tabindex="-1">[...]</main>

In de CSS. Dit is een voorbeeld, er zijn meerdere technieken om hetzelfde effect te bereiken.

.sr-only-focusable {
  inset-block-start: 5%;
  inset-inline-start: -100%;
  position: absolute;
}


.sr-only-focusable:focus {
  background-color: #ffeb85;
  color: #1e357e;
  inset-inline-start: 0;
  outline: 2px solid #2b0000;
  outline-offset: 0;
  padding: 10px;
  text-decoration: none;
  z-index: 1;
}

Tip: inset-inline-start zorgt ervoor dat de skiplink zich aanpast aan de leesrichting dir van een pagina. Voor <html lang="nl" dir="rtl"> staat de skiplink dan aan de rechterkant in plaats van de linkerkant.

Bronnen

Gebruikersonderzoek

WebAIM publiceert elk jaar de Screen Reader User Survey. In 2024 staat het ontbreken van een skiplink in de top 12 van problemen.

Heb je gebruikersonderzoek gedaan dat betrekking heeft op dit succescriterium en wil je dit delen? Kijk eens bij Gebruikersonderzoeken delen op gebruikersonderzoeken.nl.

Hoe te testen

Bepaal eerst of er een skiplink nodig is. Als er bijvoorbeeld geen navigatieblokken bovenaan de webpagina staan en de pagina meteen met de hoofdinhoud begint is een skiplink zinloos.

Dit succescriteria gaat specifiek over blokken content die op elke pagina worden herhaald. Bevat de website maar één pagina, dan is dit succescriterium niet van toepassing. Wat niet wegneemt dat gebruik van een skiplink ook in dat geval gebruikersvriendelijk kan zijn.

Als een skiplink van toepassing is voor een webpagina:

  • Controleer of een skiplink niet verborgen wordt met de CSS display: none; De skiplink moet voor screenreadergebruikers ook zonder focus te herkennen zijn in de lijst met links.
  • Controleer of een verborgen skiplink zichtbaar wordt op toetsenbordfocus.
  • Controleer ook het kleurcontrast van de zichtbare skiplink, dit wordt vaak vergeten.
  • Controleer of na het aanklikken van de link, de toetsenbordfocus zich ook echt verplaats naar het linkdoel.

Het plaatsen van een skiplink binnen de header-landmark is best practice. Maar, staat de skiplink bovenaan de pagina als eerste focusable element en buiten een landmark, dat is dit geen overtreding van dit WCAG-succescriterium.

Veelgemaakte fouten

Als een skiplink met alleen JavaScript wordt gebouwd, via bijvoorbeeld een scrollIntoView() method, verandert alleen de zichtbare focus, maar niet de toetsenbordfocus. Voeg tabindex="-1" toe aan het doelelement om het de focus te kunnen geven met tabIndex = -1. Zorg ervoor dat ook de toetsenbordfocus zich verplaatst met focus().

Controleer altijd of het doel waar de skiplink naar toe gaat ook inderdaad bestaat. Bij aanpassingen aan een template kan dit wel eens over het hoofd gezien worden.

Als het ID, waar in de skiplink naar verwijst niet bestaat, werkt de skiplink niet.

In HTML5 wordt het gebruik van het name attribuut in een interne link niet ondersteund.

Wat vroeger een goede opzet was in HTML4, is nu in HTML5 niet meer geldig.

<!-- Niet gebruiken, code is niet geldig in HTML5 -->
<a href="#site-content">Naar de hoofdinhoud</a>
[...]
<main>
  <a name="site-content"></a>
  [...]
</main>

Correcte code: verwijs naar een element met een id.

<!-- Correcte opzet van een skiplink -->
<a href="#site-content">Naar de hoofdinhoud</a>
[...]
<main id="site-content" tabindex="-1">[...]</main>

W3C referenties

Belangrijk: De richtlijnen van NL Design System zijn niet verplicht en zijn geen vervanging voor de wettelijk geldende WCAG 2.1 specificatie.

Ons doel is om praktische uitleg en voorbeelden te geven die helpen bij het toegankelijk inzetten van de NL Design System componenten, patronen en richtlijnen. We doen dat op basis van een interpretatie van de nieuwe WCAG 2.2 specificatie.

Weten waar je volgens de wet aan moet voldoen? Ga dan naar wat is verplicht van DigiToegankelijk.

Help richtlijn verbeteren

Deze pagina's over WCAG worden onderhouden door het NL Design System. Heb je aanvullingen of opmerkingen? Deel je mening op GitHub.