import{SkipLink}from"@nl-design-system-candidate/skip-link-react";exportconstMyComponent=()=><SkipLinkhref="#inhoud">Direct naar de hoofdinhoud</SkipLink>;
Gebruik jij één van de implementaties van deze component of heb je je eigen component gemaakt? In beide gevallen geldt: met onderstaande acceptatiecriteria kun je nagaan of jouw gebruik van deze component klopt met NL Design System.
Als je implementatie voldoet aan de acceptatiecriteria voor deze component, kun je er vanuit gaan dat je gebruik van deze component voldoet aan WCAG, niveau A en AA, en voor 2.5.5 Grootte van het aanwijsgebied uitgebreid) AAA.
Het label van de Skip Link bestaat uit gewone tekst, niet uit een afbeelding van tekst
De linktekst vertelt eenduidig aan de gebruiker waar de link naar toe gaat (het linkdoel).
Wat is een linktekst? Het is de tekst die zichtbaar is, maar ook de tekst die aan een gebruiker van hulpsoftware wordt voorgelezen.
Wat is het linkdoel? De locatie waar de link naartoe gaat. Bijvoorbeeld de contactpagina, een nieuwsbericht, een andere website of een download van een document.
Wat betekent In context? Het doel van de link kan ook door omringende content worden aangegeven. Dit moet dan wel ook voor gebruikers van hulpmiddelen duidelijk zijn, bijvoorbeeld door aanvullende tekst of een afbeelding naast de link. Dit laatste is onderwerp van veel discussie. Het beste is om altijd goed in de linktekst zelf te vertellen want het doel is.
Als de gebruiker de Skip Link indrukt met een aanwijzer zoals een muis of vinger, is er de mogelijkheid is om actie te voorkomen of ongedaan te maken
Als de gebruiker een interactief element indrukt met een aanwijzer zoals een muis of vinger, is er de mogelijkheid is om actie te voorkomen of ongedaan te maken.
Dat kan op meerdere manieren:
De actie gebeurt pas bij het up-event, en de gebruiker kan nog de aanwijzer verplaatsen naar buiten het element om het up-event te voorkomen.
De actie gebeurt bij het down-event, maar bij het up-event wordt het effect weer ongedaan gemaakt.
Je kunt het effect achteraf weer ongedaan maken.
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:
codevoorbeeld
<!-- Dit is een fout voorbeeld, niet kopiëren --><ahref="login-url"aria-label="Klik hier om in te loggen">Log in met DigiD</a>
Zorg ervoor dat het element een minimale grootte heeft van 44 bij 44 pixels. Definieer hoogte en de breedte niet in px, maar gebruik een relatieve waarde als em of rem. Anders kan het element niet goed meegroeien wanneer de gebruiker inzoomt.
Let op: Links in zinnen en paragrafen van tekst zijn uitgezonderd. De grootte van het aanwijsgebied is hier afhankelijk van de grootte van de linktekst zelf.
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.
Skip Links die op meerdere pagina's voorkomen staan in dezelfde relatieve volgorde
Zorg ervoor dat navigatie-componenten die voorkomen op meerdere pagina's overal op dezelfde manier werken. De navigatie staat op dezelfde plek op elke pagina, en de onderdelen staan in dezelfde volgorde.
Denk hierbij aan de skiplink, het hoofdmenu, de zoekoptie en de links in de footer. Dit maakt de structuur van de website makkelijker te begrijpen en hierdoor kan de gebruiker sneller navigeren.
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.
Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar. Dit gaat om regelhoogte, afstand tussen alinea's, letterafstand en ruimte tussen woorden.
Zorg ervoor dat het element mee kan groeien met de tekst. Geef de breedte en de hoogte dus niet hard op in pixels.
Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Zodat er geen horizontale scrollbar ontstaat of tekst onleesbaar wordt.
Je moet de afstand kunnen vergroten naar deze waardes:
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.
Dit is te testen met een bookmarklet of door in de inspector van de browser de volgende code toe te voegen aan de head van de pagina:
Een Skip Link die standaard verborgen is, moet bij focus zichtbaar worden.
Verberg de Skip Link nooit met display:none. Dit haalt de link uit de accessibility tree en is dan niet meer te gebruiken met hulpapparatuur of met het toetsenbord.
Zorg ervoor dat het element een minimale grootte heeft van 44 bij 44 pixels. Definieer hoogte en de breedte niet in px, maar gebruik een relatieve waarde als em of rem. Anders kan het element niet goed meegroeien wanneer de gebruiker inzoomt.
Let op: Links in zinnen en paragrafen van tekst zijn uitgezonderd. De grootte van het aanwijsgebied is hier afhankelijk van de grootte van de linktekst zelf.
Als je de tekst vergroot tot 200% (via browserzoom en via de browserinstellingen voor tekstgrootte) blijft de tekst in zijn geheel zichtbaar.
Zorg ervoor dat het element mee kan groeien met de tekst. Geef de breedte en de hoogte dus niet hard op in pixels.
Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Zodat er geen horizontale scrollbar ontstaat of tekst onleesbaar wordt.
Als je de hele webpagina inzoomt tot 400% blijft veroorzaakt de Skip Link veroorzaakt geen horizontale scrollbalk en alle tekst op de pagina blijft 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 CSS).
Zorg ervoor dat er geen horizontale scrollbar nodig is. Uitzonderingen zijn voor onderdelen die in essentie twee-dimensionaal zijn, zoals bijvoorbeeld: tabellen, grafieken, video's en landkaarten.
Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Zodat er geen horizontale scrollbar ontstaat of tekst onleesbaar wordt.
Je kunt de Skip Link focussen met de tabtoets en activeren met de entertoets
Wanneer een gebruiker met het toetsenbord de focus verplaatst naar een deel van de pagina, dan moet deze ook weer weg kunnen gaan met het toetsenbord. De gebruiker kan daarvoor bijvoorbeeld de Tab-toets, Escape-toets of de pijltjestoetsen gebruiken. Zo niet, beschrijf dan met welke toets het wel kan.
Als een toetsenbordgebruiker niet verder kan in de pagina, zonder goede uitleg, dan zit deze in de val. Dit is een blokkade bij het navigeren van een website met het toetsenbord alleen.
De Skip Link slaat een contentblok over dat op meerdere pagina's voorkomt
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.
De Skip Link staat op een logische plek in de focusvolgorde
Een Skip Link die standaard verborgen is, moet bij focus zichtbaar worden.
Verberg de Skip Link nooit met display:none. Dit haalt de link uit de accessibility tree en is dan niet meer te gebruiken met hulpapparatuur of met het toetsenbord.
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.
De Skip Link heeft een rol van link en een toegankelijke naam die duidelijk maakt waar de Skip Link voor dient
De link heeft een rol van link en een toegankelijke naam die duidelijk maakt waar de link voor dient.
HTML-elementen hebben een impliciete rol. Maak daar gebruik van. Kies daarom een a-element als je een link nodig hebt:
codevoorbeeld
<ahref="url">Contact</a>
Het is mogelijk om met ARIA een role="link" toe te voegen aan een ander element dan een a, maar dit is niet aan te raden. Heb je het absoluut nodig, zorg er dan voor dat het gekozen element ook voldoet aan de verwachte toetsenbordinteractie, focusstijl, etc. Let erop dat je hiervoor JavaScript nodig hebt.
Help component verbeteren
We vinden het belangrijk dat de component
Skip Link
goed te gebruiken is door iedereen. Help je mee?
Vul de GitHub Discussion aan met de eisen en wensen voor jouw project of organisatie.
Draag bij aan de voortang van
Skip Link
door te zorgen dat deze aan meer checkpoints van de
Definition of Done voldoet. Deze houden we bij in de projectborden bij de publieke GitHub Backlog.
@nl-design-system-candidate/skip-link-css versie 1.
@nl-design-system-candidate/skip-link-react versie 1.