Ga naar hoofdinhoud

Componenten

Skip Link

Candidate

Verborgen mogelijkheid om snel naar een ander deel van de pagina te navigeren zonder gebruik te maken van een muis of touchscreen.

Gebruik de Skip Link zodat gebruikers met een toetsenbord of hulpsoftware makkelijk contentblokken kunnen overslaan. Bijvoorbeeld navigatie die op meerdere pagina's herhaald wordt.

Anatomie

Candidate component gebruiken

Design tokens

name type
nl.skip-link.background-color color
nl.skip-link.color color
nl.skip-link.font-size fontSizes
nl.skip-link.line-height lineHeights
nl.skip-link.min-block-size dimension
nl.skip-link.min-inline-size dimension
nl.skip-link.padding-block dimension
nl.skip-link.padding-inline dimension
nl.skip-link.text-decoration-thickness other
nl.skip-link.text-underline-offset other

CSS

De CSS van deze component is gepubliceerd in een npm package:

@nl-design-system-candidate/skip-link-css versie 1.

Gebruik de nl-skip-link class name op een a element:

<a href="#inhoud" class="nl-skip-link nl-skip-link--visible-on-focus">Naar de inhoud</a>

Je kunt de CSS zo in je project installeren:

npm install --save-dev @nl-design-system-candidate/skip-link-css

Als je een CDN gebruikt, dan kun je de CSS zo importeren:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@nl-design-system-candidate/skip-link-css@1/dist/skip-link.css"
/>

Gebruik je geen CDN, dan kun je de CSS uit node_modules/ importeren:

<link rel="stylesheet" href="node_modules/@nl-design-system-candidate/skip-link-css/dist/skip-link.css" />

Als je CSS imports gebruikt vanuit JavaScript:

import "@nl-design-system-candidate/skip-link-css/skip-link.css";

React

De React component is gepubliceerd in een npm package:

@nl-design-system-candidate/skip-link-react versie 1.

Je kunt de npm package zo installeren:

npm install --save-dev @nl-design-system-candidate/skip-link-react

Je kunt de React component zo gebruiken:

import { SkipLink } from "@nl-design-system-candidate/skip-link-react";


export const MyComponent = () => <SkipLink href="#inhoud">Direct naar de hoofdinhoud</SkipLink>;

Figma

De Figma component staat in NL Design System Voorbeeld Bibliotheek — Skip Link.

Checklist voor toegankelijkheid

Hier beschrijven we waar de component al aan voldoet en wat je zelf nog moet doen om de component toegankelijk én gebruiksvriendelijk in te zetten.

Acceptatiecriteria bij gebruik

Een component gebruik je in de context van een pagina, website of applicatie. Hoe toegankelijk en gebruiksvriendelijk een component is, hangt daarom voor een groot deel af van context. We hebben onderstaande criteria verdeeld op rol: de developer, de designer en de contentmaker. Vanuit iedere rol kun je je steentje bijdragen om een toegankelijke en gebruiksvriendelijke ervaring te bieden aan je gebruikers.

Ik ben:
Alle onderwerpen worden getoond.
  • De tekstkleur van de Skip Link heeft voldoende contrast met de achtergrondkleur.

    De contrastverhouding van de tekstkleur met de achtergrondkleur is hoog genoeg. Minimale contrastverhoudingen:

    • 4,5:1 contrast voor normale tekst.
    • 3:1 contrast voor grotere letters (vanaf 24 pixels).
    • 3:1 contrast voor vette letters (vet en groter of gelijk aan 19 pixels).

    Hogere verhoudingen mogen natuurlijk altijd. Met de Contrast checker kun je controleren of je gekozen kleuren voldoen. Denk erom dat dit moet gelden voor alle achtergrondkleuren waarop de tekst geplaatst kan worden. Het kan dus zijn dat je meerdere checks moet doen.

    NL Design System richtlijnen:

    designerWCAG 1.4.3Niveau AA
  • Het label van de Skip Link bestaat uit tekst, niet uit een afbeelding van tekst.

    Laat tekst buiten afbeeldingen.

    Als je losse tekst een vergelijkbaar uiterlijk kan geven als in een afbeelding, laat het dan losse tekst zijn. Er is een uitzondering als de tekst onderdeel is van een logo.

    Sommige mensen hebben teksten nodig met een ander uiterlijk. Dit kan bij losse tekst en niet bij afbeeldingen.

    developercontentmakerWCAG 1.4.5Niveau AA
  • De Skip Link slaat 1 of meerdere herhalende contentblokken over.

    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.

    developerWCAG 2.4.1Niveau A
  • De Skip Link staat vooraan in de focusvolgorde van een pagina en verwijst naar de eerste niet-herhalende content op de pagina.

    De Skip Link naar de hoofdinhoud van de pagina is het eerste interactieve element op de pagina dat toetsenbordfocus krijgt. Overige Skip Links naar andere onderdelen van de pagina, zoals het hoofdmenu, volgen daarna.

    De Skip Link verwijst naar de plek op de pagina waar de hoofdinhoud start. Dit is bijvoorbeeld de main van de pagina. Omdat dit normaal gesproken geen interactief element is, moet het element focusbaar gemaakt worden. Aangezien het niet de bedoeling is dat de main in de normale focusvolgorde van de pagina voorkomt, kun je hiervoor tabindex="-1" gebruiken. Geef het vervolgens een id attribuut mee, bijvoorbeeld id="hoofdinhoud" waar je in de Skip Link in het href attribuut naar verwijst. Vergeet niet ook een focusstijl in te stellen voor het element waar je naar verwijst, zodat toetsenbordgebruikers weten waar ze zich op de pagina bevinden.

    Let op: Bevat je main wél herhalende content? Gebruik dan een ander element ná de herhalende content.

    Let op: Heeft je website een cookiemelding die altijd over een deel van de pagina staat, waardoor bezoekers de cookiemelding éérst weg moeten klikken om verder te gaan? Zorg er dan voor dat de cookiemelding nog vóór de Skip Links focus krijgt en weggeklikt kan worden.

    developerWCAG 2.4.3Niveau A
  • De linktekst van de Skip Link beschrijft duidelijk het linkdoel.

    De linktekst in de Skip Link vertelt duidelijk waar de link naar verwijst. Bijvoorbeeld: "Direct naar de inhoud" of "Hoofdinhoud".

    Je kunt er ook voor kiezen om meerdere Skip Links toe te voegen. Zorg er dan voor dat iedere link een unieke beschrijvende linktekst heeft. Een beschrijvende naam voor een Skip Link waarmee bezoekers direct naar de hoofdnavigatie kunnen, is bijvoorbeeld "Direct naar het hoofdmenu".

    NL Design System richtlijnen:

    developercontentmakerWCAG 2.4.4Niveau A
  • De Skip Link wordt niet bedekt door een ander element op de pagina.

    Een onderdeel dat toetsenbordfocus heeft mag niet volledig bedekt zijn.

    developerWCAG 2.4.11Niveau AA
  • Als de tekst van de Skip Link in een andere taal is dan de taal van de pagina, dan heeft het element een lang-attribuut met de juiste taalcode.

    Als een tekst in een andere taal is dan de taal van de pagina, dan heeft het element een lang-attribuut met de juiste taalcode.

    Denk bijvoorbeeld aan buttons voor het veranderen van de taal van een pagina, bij meertalige websites. Of aan een citaat in het Engels, op een Nederlandstalige pagina.

    NL Design System richtlijnen:

    developercontentmakerWCAG 3.1.2Niveau AA
  • Skip Links die op meerdere pagina's voorkomen staan op iedere pagina vooraan in de focusvolgorde van een pagina.

    Op pagina's met één of meerdere Skip Links:

    • Zorg ervoor dat de Skip Link naar de hoofdinhoud van de pagina het eerste interactieve element op de pagina is.
    • Zorg ervoor dat de Skip Links naar andere onderdelen van de pagina in dezelfde volgorde staan.

    Let op: Heeft je website een cookiemelding die altijd over een deel van de pagina staat, waardoor bezoekers de cookiemelding éérst weg moeten klikken om verder te gaan? Zorg er dan voor dat de cookiemelding nog vóór de Skip Links focus krijgt en weggeklikt kan worden.

    developerdesignerWCAG 3.2.3Niveau AA

Acceptatiecriteria van de component

Als je de NL Design System component gebruikt kun je er vanuit gaan dat onderstaande checks zijn gedaan. Maar door keuzes in de website of applicaties kan het natuurlijk zijn dat ze toch niet helemaal werken. Voor de zekerheid is het dus goed om ook op onderstaande punten te letten.

Ik ben:
Alle onderwerpen worden getoond.
  • Als je de tekst vergroot tot 200% blijft deze in zijn geheel zichtbaar.

    Als je de tekst vergroot tot 200%, bijvoorbeeld via browserzoom of via de browserinstellingen voor tekstgrootte, blijft de tekst in de component volledig zichtbaar.

    NL Design System richtlijnen:

    developerWCAG 1.4.4Niveau AA
  • Als je de hele webpagina inzoomt tot 400% veroorzaakt de Skip Link geen horizontale scrollbalk en blijft alle tekst op de pagina leesbaar.

    De gebruiker moet de webpagina 400% kunnen vergroten in de browser. Het gaat hierbij om alle elementen van een webpagina.

    Alle functies, zoals het menu, moeten werken en zichtbaar zijn. Alle tekst moet leesbaar zijn.

    Er mag geen inhoud buiten beeld vallen, onbereikbaar of verborgen zijn of gedeeltelijk verborgen worden door andere inhoud wanneer de gebruiker 400% inzoomt of op een buitengewoon klein scherm werkt (320 bij 256 pixels).

    Zorg ervoor dat er geen horizontale scrollbar nodig is. Uitzonderingen zijn voor onderdelen die in essentie twee-dimensionaal zijn, zoals tabellen, grafieken, video's en landkaarten.

    Definieer in de CSS een wijze om lange woorden af te breken en door te laten lopen op de volgende regel. Voorkom zo een horizontale scrollbar en onleesbare tekst.

    developerdesignerWCAG 1.4.10Niveau AA
  • De tekst in de Skip Link blijft zichtbaar als je de tekstafstand vergoot.

    Als je de tekstafstand vergroot blijft de tekst in de component in zijn geheel zichtbaar. Dit gaat om regelhoogte, afstand tussen alinea's, letterafstand en ruimte tussen woorden:

    • Regelhoogte (regelafstand) naar ten minste 1,5 keer de lettergrootte.
    • Afstand tussen alinea's naar ten minste 2 keer de lettergrootte.
    • Letterafstand (spatiëren van letters) naar ten minste 0,12 keer de lettergrootte.
    • Spatiëren van woorden naar ten minste 0,16 keer de lettergrootte.

    NL Design System richtlijnen:

    developerdesignerWCAG 1.4.12Niveau AA
  • Je kunt de Skip Link focussen met de tabtoets en activeren met de entertoets.

    Interactieve elementen in de component zijn bedienbaar met het toetsenbord.

    NL Design System richtlijnen:

    developerWCAG 2.1.1Niveau A
  • Als een gebruiker de Skip Link focust met het toetsenbord, dan moet deze ook weer weg kunnen gaan met het toetsenbord.

    Focus die met een toetsenbord geplaatst kan worden, moet ook met het toetsenbord weg te halen zijn.

    developerWCAG 2.1.2Niveau A
  • De Skip Link heeft een zichtbare focusindicator.

    Wanneer een interactief element in de component toetsenbordfocus heeft is het element en de focusindicator zichtbaar.

    NL Design System richtlijnen:

    developerdesignerWCAG 2.4.7Niveau AA
  • De Skip Link heeft een zichtbare focusindicator met een dikte van minimaal 2 pixels.

    Interactieve elementen in de component hebben een goed zichtbare focusindicator met een minimale dikte van 2 pixels.

    NL Design System richtlijnen:

    developerdesignerWCAG 2.4.13Niveau AAA
  • De Skip Link activeren met een enkele aanwijzer kan voorkomen of geannuleerd worden.

    Het is mogelijk om een actie te voorkomen of ongedaan te maken als de gebruiker een interactief element in de component indrukt met een enkele aanwijzer zoals een muis of vinger.

    developerWCAG 2.5.2Niveau A
  • De zichtbare naam van de Skip Link komt voor in de toegankelijke naam.

    De zichtbare naam van de link is gelijk aan, of begint met de toegankelijke naam.

    Dit is het eenvoudigst te realiseren door een a-element te gebruiken met daarin tekst.

    Pas op met het gebruik van aria-label om een naam te geven aan een link. Een aria-label overschrijft de tekstinhoud van een link. Zodoende kan een link een toegankelijke naam krijgen die anders is dan de zichtbare naam, waardoor mensen die hulpsoftware gebruiken moeilijkheden kunnen krijgen met het bedienen van de link. Als je echt een aria-label nodig hebt, zorg dan dat de waarde van het aria-label begint met de exacte tekst die zichtbaar is in de link.

    Dus niet:

    <!-- Foute code, niet gebruiken -->
<a href="login-url" aria-label="Klik hier om in te loggen">Log in met DigiD</a>

    Maar:

    <a href="login-url">Log in met DigiD</a>

    NL Design System richtlijnen:

    developerWCAG 2.5.3Niveau A
  • Het aanwijsgebied van de Skip Link is groot genoeg.

    Het aanwijsgebied van interactieve elementen in de component is minimaal 44 bij 44 pixels.

    NL Design System richtlijnen:

    developerWCAG 2.5.5Niveau AAA
  • Als de Skip Link toetsenbordfocus krijgt vindt er geen contextwijziging plaats.

    Verras een gebruiker niet als die een interactief element focus geeft. Maak functionaliteit voorspelbaar en daardoor goed te begrijpen.

    Als een gebruiker een component focus geeft met het toetsenbord of door erop te klikken met de muis, zorg dan dat die actie niet automatisch een contextwijziging veroorzaakt.

    Bij een contextwijziging verandert onverwacht de indeling, informatie, toetsenbordfocus of functionaliteit. Bijvoorbeeld door het direct versturen van een formulier na het kiezen van een select-optie, waarna de gebruiker naar een andere pagina wordt doorgestuurd.

    developerWCAG 3.2.1Niveau A
  • Skip Links met gelijke functies hebben hetzelfde uiterlijk en hetzelfde label.

    Links die dezelfde functie hebben binnen een website, zien er hetzelfde uit en werken ook hetzelfde.

    NL Design System richtlijnen:

    developerdesignerWCAG 3.2.4Niveau AA
  • De Skip Link heeft een rol van link.

    De component en de afzonderlijke interactieve elementen in de component hebben de juiste rol en de juiste attributen voor het aangeven van de staat en de waarde.

    developerWCAG 4.1.2Niveau A

Community implementaties

Amsterdam

11 van 11 stappen gedocumenteerd op het Community Amsterdam projectbord

Snel aan de slag

ams-skip-link in CSS
ams-skip-link in React

Utrecht

11 van 11 stappen gedocumenteerd op het Community Utrecht projectbord

Snel aan de slag

utrecht-skip-link in CSS
utrecht-skip-link in Web Component
utrecht-skip-link in React
utrecht-skip-link in Vue

Definition of Done

Help component verbeteren

We vinden het belangrijk dat de component Skip Link goed te gebruiken is door iedereen. Help je mee?