Waarom skip-links belangrijk zijn voor toegankelijkheid

Skip-links spelen een belangrijke rol bij het toegankelijk maken van een website voor iedereen.

Vorige week las ik een blogpost waarin de auteur claimt dat skip-links onnodig zijn en dat ze niet bijdragen aan toegankelijkheid. Tijdens een gebruikerstest die de auteur uitvoerde, gebruikte geen van de schermlezergebruikers skip-links. In zijn test begreep het merendeel van de gebruikers zelfs niet waar ze voor waren. Hij beweert ook dat navigatie niet het eerste is dat een gebruiker zou moeten zien, maar onder de hoofdinhoud op een pagina moet worden geplaatst. Op deze manier zien gebruikers eerst de inhoud waar ze naar op zoek zijn en dan pas alle metagegevens.

In een ideale wereld zou dat logisch zijn, maar zo zijn de meeste websites niet opgezet: bijna alle websites beginnen met een header en navigatie. Daarom denk ik dat skip-links van grote waarde zijn voor het verbeteren van de toegankelijkheid van een website. Dit is waarom.

Wat zijn skip-links?

Skip-links zijn interne links bovenaan de pagina waarmee toetsenbordgebruikers en gebruikers van hulpmiddelen voor ondersteunde technologieën delen van de UI kunnen overslaan die op alle pagina's worden herhaald. Bij gebruik van een skip-link springt de focus naar de gekoppelde inhoud. Dit wordt vaak gebruikt om navigatie over te slaan: de gebruiker hoeft niet over alle navigatie-elementen te tabben, maar kan de hoofdinhoud direct in beeld brengen.

Skip-links zijn handig

Gebruikers die kunnen zien, scannen snel een pagina en negeren vervolgens de herhaalde inhoud waarna ze zich richten op de hoofdinhoud. Met skip-links kunnen we dezelfde gebruikerservaring bieden voor gebruikers van ondersteunde technologieën.

Onderzoek door WebAIM toont aan dat 30,2% van de schermlezergebruikers skip-links vaak gebruikt. Hoewel uit dit onderzoek ook blijkt dat dit aantal afneemt, is het nog steeds een aanzienlijk aantal gebruikers. Door geen skip-links aan te bieden voor die gebruikers maak je het navigeren op een webpagina moeilijker.

Omdat skip-links toegankelijkheidsverbeteringen bieden, maken ze deel uit van de Web Content Accessibility Guidelines (WCAG). In de WCAG worden skip-links beschreven in het gedeelte over voorbijgaande blokken. Een ander argument voor het implementeren van skip-links is dat websites moeten voldoen aan de WCAG om juridische redenen. Zo heeft de EU wetgeving opgesteld die WCAG-naleving verplicht stelt.

Implementatie van skip-links

Een van de redenen waarom skip-links mogelijk onderbenut of verwarrend zijn voor gebruikers is omdat ze vaak niet consequent worden geïmplementeerd. Dit artikel beschrijft hoe je effectieve skip-links maakt. Wanneer je skip-links maakt, zorg er dan voor dat je het volgende doet:

De skip-link is het eerste focusbare element op de pagina.
Een skip-link is altijd een <a> die verwijst naar een id van de sectie waarnaar het linkt.
De doelsectie moet focusbaar zijn.
Het label van een skip-link moet in eenvoudige taal beschrijven naar welke sectie het verwijst.

Hieronder volgt een voorbeeld van een correcte skip-link. Maak een anker met een id dat verwijst naar de sectie waar de gebruiker naartoe springt. Geef een duidelijk label in het anker tag.

<a href="#content" class="skip-link">
    Skip to main content
</a>

Voeg een id toe aan het element waarnaar de skip-link verwijst. Zorg ervoor dat u een negatieve tabindex toevoegt om de toegankelijkheid voor schermlezers te verbeteren.^[1]

<main id="content" tabindex="-1">
    ...
</main>

Wanneer een skip-link niet gefocust is, verberg de skip-link dan visueel, maar zorg ervoor dat deze in de DOM blijft.

.skip-link {
    position: absolute;
    top: 1rem;
    left: -9999rem;
    ...
}

.skip-link:focus {
    left: 1rem;
}

Implementeer skip-links correct en veel gebruikers, met of zonder beperking, zullen je dankbaar zijn.

Voetnoot

[1] Schermlezers bieden gebruikers twee manieren om te navigeren: met behulp van de systeemfocus en de schermlezercursor. De focus is een manier om over focusbare elementen te navigeren, de cursor wordt gebruikt om niet-focusbare elementen te openen. Wat er gebeurt wanneer je linkt naar een element zonder een negatieve tabindex, is dat de pagina naar het element scrollt en de browser zich focust op het volgende focusbare element.

Echter, de cursor zal achterblijven op de link. Dit betekent dat wanneer de gebruiker zijn cursor verplaatst, de informatie naast de link hardop wordt voorgelezen in plaats van de inhoud van het element waar de focus naartoe is gesprongen. Wanneer een element een negatieve tabindex krijgt, verplaatst zowel de focus als de cursor naar dat element.