Zo zet je Skiplinks in op je website

De noodzaak van digitale toegankelijkheid is inmiddels wel duidelijk. Bij het werken aan een toegankelijke webervaring, springt één hulpmiddel eruit. Het is één van de belangrijkste én makkelijkste aanpassingen voor een website: de skiplink. Maar wat is een skiplink precies, waarom is het essentieel en hoe gebruik je het op je website? 

Wat is een Skiplink?

Een skiplink is een verborgen navigatielink bovenaan een webpagina waarmee gebruikers repetitieve inhoud kunnen overslaan en direct naar de hoofdinhoud van de pagina kunnen ‘skippen’. Het is vooral nuttig voor gebruikers die afhankelijk zijn van schermlezers of toetsenbordnavigatie: dankzij skiplinks hoeven zij niet op elke pagina opnieuw door het navigatiemenu te gaan.

Waarom moet ik Skiplinks gebruiken?

1. Verbeter digitale toegankelijkheid: Skiplinks zijn cruciaal voor gebruikers met een beperking en bieden hen een soepelere en efficiëntere browser-ervaring. Websitebezoekers die niet met de muis kunnen navigeren, zoals mensen met een visuele of motorische beperking, gebruiken daarvoor meestal het toetsenbord. Ze navigeren door een website met de tab-toets. Door tab en shift + tab te gebruiken, gaan ze naar de volgende of vorige link of knop op de pagina. Welk element actief is (de tabfocus), wordt zichtbaar doordat er een kader omheen komt te staan, de zogenaamde 'focus rectangle'.
2. WCAG 2.2 Richtlijnen: Het gebruik van skiplinks is opgenomen in de Web Content Accessibility Guidelines (WCAG) 2.2. Het naleven van deze richtlijnen helpt je website toegankelijker te maken voor een breder publiek en voldoet aan de internationale normen voor webtoegankelijkheid.
3. SEO voordelen: Zoekmachines waarderen toegankelijke websites. Het implementeren van skiplinks draagt bij aan een betere toegankelijkheid en daarmee betere SEO-prestaties.

Hoe kan ik Skiplinks implementeren?

Het implementeren van skiplinks is een eenvoudig proces, maar het is belangrijk om nauwkeurig te werk te gaan om fouten te voorkomen en ervoor te zorgen dat ze effectief werken. Met de onderstaande stappen kan je gemakkelijk zelf skiplinks op jouw website introduceren. 

Stap 1: Voeg de Skiplink toe aan je HTML

De eerste stap is het toevoegen van de skiplink aan je HTML code. Plaats deze bovenaan de body-inhoud van je webpagina, zo hoog mogelijk. Hier vind je een eenvoudig voorbeeld:

Stap 2: Definieer het begin van de content

Vervolgens definieer je het gedeelte van je pagina waar de hoofdinhoud begint. Hier zal de skiplink gebruikers heensturen. Voeg een ID toe aan deze container:

Stap 3: Style de Skiplink

Om ervoor te zorgen dat de skiplink alleen zichtbaar is wanneer dat nodig is (bijvoorbeeld wanneer een gebruiker met het toetsenbord navigeert), gebruik je CSS code. Hier is een voorbeeld van hoe je de styling van de skiplink kan instellen via CSS:

With this CSS code, you initially place the skiplink outside the screen. Once the skiplink gets focus (for example, when a user tabs to it), it will become visible. 

Step 4: Test de Skiplink

Test tenslotte je skiplink om ervoor te zorgen dat deze correct functioneert. Gebruik een toetsenbord om door je site te navigeren en zorg ervoor dat de skiplink verschijnt en werkt zoals verwacht. Test deze ook met schermlezers om te bevestigen dat de skiplink de beoogde toegankelijkheidsvoordelen biedt.

Is het gelukt om een Skiplink te implementeren? Zo niet, maak je geen zorgen: bij GX zetten we ons in om je te helpen toegankelijke en gebruiksvriendelijke webervaringen te creëren. Neem contact met ons op om je Skiplink te laten bouwen.

Hoe ver ben je trouwens met het toegankelijk maken van je digitale omgevingen? Laat ons een gratis Quickscan uitvoeren zodat je precies weet waar je staat. Vraag een gratis Quickscan aan in een gesprek met mijn collega Stef.