Geen geduld? Stel je eens voor dat je voor elk paginabezoek 73 menu items voorgelezen krijgt. Dat vergt pas geduld. Gelukkig is er de skiplink!
Als onderdeel van de Week van Digitale Toegankelijkheid schrijven wij deze gehele week verdiepingsartikelen hoe jouw website toegankelijker kan worden gebouwd.
Jij kunt een muis en je zicht gebruiken, fijn voor je! 😉
De kans is groot dat jij deze pagina leest door gebruik te maken van je muis en je ogen. Je ziet waar de navigatie zich bevindt en wanneer je naar een nieuwe pagina navigeert, zie je ook waar nieuwe inhoud zal verschijnen.
54,9% van de respondenten zonder handicap gebruikt altijd of vaak "skip" -links
Voorkom frustratie bij je gebruikers met en zonder een beperking
Maar stel je nou eens voor dat je slechtziend bent (ondanks een bril van GrandVision*) blind of fysiek niet in staat bent om die nieuwe inhoud rechtstreeks te bereiken? Zonder gebruik te maken van skiplinks, zou je bij het openen van elke nieuw paginabezoek, alle menu-items moeten doorlopen.
In het geval van een Nederlandse onlinekrant nu.nl betekent dit élke keer 73 navigatie-items doorlopen voordat je het nieuwe artikel lezen! En niet alleen dat, ook:
- Dat je 73 keer op de tab-toets moet drukken indien je alleen een toetsenbord kunt gebruiken voordat je bij het bericht bent, bijvoorbeeld voor mensen met Parkinson;
- Bij een schermlezer zouden al deze 73 items ook nog eens voorgelezen worden, voordat het eigenlijke nieuwsitem gestart wordt.
Alleen bij het idee word je toch al chagrijnig? Ik heb al niet het geduld om te wachten voor mijn Netflix show inlaadt*! Gelukkig zijn er oplossingen!
Deze oplossingen doorvoeren kost je developer waarschijnlijk net zoveel tijd, als dat die arme mensen kwijt zijn te wachten op die 73 menu-items . Let's go!
Optie 1. Verplaats repetitieve elementen
Je zou ervoor kunnen kiezen om repetitieve elementen naar de onderkant van je bron te verplaatsen. Dit is wat Stichting Accessibility doet voor hun hoofdmenu. Wel met de kanttekening dat gebruikers nu natuurlijk weer een manier nodig hebben om direct naar hoofdmenu te gaan, in plaats van te moeten wachten tot de hele pagina hardop is voorgelezen. Wat ze overigens bieden hoor.
Optie 2. Vereenvoudig het leven door inhoud over te slaan met skiplink
Maar het kan nog gebruiksvriendelijker! Binnen jouw website of webshop kun je deze gebruikersfrustratie namelijk verhelpen door een skiplink te introduceren.
Mocht je dit artikel trouwens lezen omdat je organisatie bij wet verplicht is een toegankelijk website te hebben, skiplinks zijn onderdeel van WCAG succescriterium 2.4.1: Bypass Blocks.
Hoe bouw je (als developer) skiplinks?
- Identificeer de belangrijkste inhoud door deze via HTML een id-attribuut te geven.
- Voeg vervolgens een skiplink in de hoofdtekst van je HTML-document in. Dit zou het eerste element moeten zijn, aangezien dit ook als eerste focus zal krijgen van een schermlezer of toetsenbord.
Op deze manier kan een bezoeker, wanneer hij de laatste menu-items al heeft doorlopen, direct naar de hoofdinhoud springen wanneer iemand met opzet naar die pagina navigeert. Briljante oplossing 😊
Skiplinks in actie, test het zelf!
Heb je het nog niet gevonden? Check het dan op deze website in actie! ( Dit werkt overigens het beste op desktopapparaten)
- Ga naar de eerste skiplink door hier te klikken;
- Bij gebruik van een scherm wordt een skip-link zichtbaar;
- Zelfs op een mobiel apparaat wordt de eerste skiplink zichtbaar in de linkerbovenhoek van het scherm. Dit is vaak de standaardpositie waar skiplinks zichtbaar worden;
- Je kunt nu middels via je toetsenbord op de tab-toets blijven drukken totdat de link in het eerste opsommingsteken wordt gemarkeerd met een CSS outline.
Onzichtbaar?
Skiplinks zijn vaak onzichtbaar totdat het focus krijgt. Houd er echter rekening mee dat je de weergave of zichtbaarheid van CSS-eigenschappen niet moet gebruiken om deze standaard onzichtbaar te maken.
Wanneer je dit zou doen voor dergelijke elementen of hun bovenliggende elementen, zouden je skiplinks nooit de focus kunnen krijgen en dus niet helpen niet-muisgerichte bezoekers (want dan worden ze niet “gezien”).
Praktische tip! Het CSS-framework Bootstrap heeft al CSS-klassen in hun codebase ingebakken om dit te bereiken. Bootstrap noemt ze sr-only, letterlijk voor "screenreader only".
Hebben alle grote organisaties wél een skiplink?
Nee, helaas niet. De drie genoemde organisaties uit dit artikel hebben we allen ge-audit.
- We ontdekten als onderdeel van een uitgebreidere audit dat de website van nu.nl geen skiplinks aanbiedt en dus sommige van haar potentïele gebruikers hier flink op een achterstand zet.
- Ook Netflix heeft geen skiplink. Netflix heeft echter geen grote blokken voor de hoofdinhoud;
- Ondanks dat GrandVision een leider is in optische detailhandel, bieden ook zij geen skiplinks om hun menu te omzeilen, om het hun toch als slechtziende gebruikers gemakkelijker te maken een bril te kopen.
Maar jij, jij weet nu wel hoe je door gebruik te maken van Skiplinks een gemakkelijker navigeerbare website kunt bouwen. Toch vragen? Neem contact met ons op!
