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 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.

Een onderdeel dat toetsenbordfocus heeft mag niet volledig bedekt zijn.

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:

• Let op voorkeursinstellingen voor typografie
• Zorg ervoor dat letters groot genoeg zijn

Interactieve elementen in de component zijn bedienbaar met het toetsenbord.

NL Design System richtlijnen:

• Toetsenbordtoegankelijkheid

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

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.

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:

• De zichtbare naam moet overeenkomen met de toegankelijke naam

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

NL Design System richtlijnen:

• Maak aanklikbare formuliervelden groot genoeg
• Reserveer ruimte tussen interactieve elementen

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.

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.