Jij wil natuurlijk ook dat jouw site voldoet aan de WCAG eisen. Want daar wordt je site niet alleen toegankelijker van, maar ook fijner om te gebruiken. Met als fijne bonus dat het een positief effect heeft op je SEO en AIO (AI optimalisatie).
Maar je site doorakkeren op 55 criteria is tijdrovend. Daarbij zie je snel dingen over het hoofd.
Deze tools gebruik ik bij het uitvoeren van een WCAG audit, ze helpen je bij het sneller vinden van toegankelijkheidsproblemen.
Text spacing bookmarklet
Succescriterium (SC) 1.4.12 gaat over text-spacing. Als de gebruiker ruimte tussen tekst zo instelt als in dit SC beschreven is er geen verlies van content of functionaliteit. Deze bookmarklet maakt het testen hiervan een makkie. Klik hem aan en je ziet meteen het effect van de opgegeven css aanpassingen.
Bookmarklet?
Een bookmarklet is een bladwijzer die JavaScript code uitvoert in plaats van naar een nieuwe pagina te navigeren. Het is een kleine snippet JavaScript die je in je browser kunt opslaan als een bladwijzer of als een link. Wanneer je op deze bookmarklet klikt, voert de browser de JavaScript code uit op de huidige webpagina.
Target size bookmarklet
Als je ergens op moet klikken, dan moet je daar voldoende ruimte voor hebben. WCAG heeft daar dan ook eisen aan gesteld in SC 2.5.8 (Target size). Deze bookmarklet checkt of er elementen zijn die elkaar overlappen (afkeur) en toont visueel ook de target size zodat je snel kan nagaan of je overal genoeg ruimte pakt.
Bonus: deze 44x44 cursor bookmarklet maakt van je cursor een vierkant vlakje van 44 bij 44 pixels zodat je visueel kan zien of je hit areas groot genoeg zijn.
KeyShortcuts Bookmarklet
Omdat screenreaders gebruik maken van sneltoetsen kunnen andere sneltoetsen die je op je site gebruikt in de weg zitten. Daarom moet je ze - SC 2.1.4 - altijd uit kunnen zetten of wijzigen. Deze bookmarklet checkt op de aanwezigheid van sneltoetsen zodat je dit snel weet (en niet iedere letter hoeft te proberen).
Focus
De focus order moet logisch zijn en interactieve elementen moeten een zichtbare focus state hebben.
De Focus Order bookmarklet laat je snel zien hoe de tabvolgorde is (wat krijg in welke volgorde focus).
De WTFocus bookmarklet geeft je allerlei aanvullende info: Wat is de naam van het element, wat is de rol, wat voor HTML element is het, etc.
Daarnaast checkt het ook of elementen een unieke naam hebben, in dit voorbeeld heb ik 2x dezelfde knop op de pagina staan en zie ik dat dus ook snel terug als ik door de pagina heen tab:
Axe dev tools
Zoek je een tool waarmee je een site kan testen op de WCAG richtlijnen? Probeer dan eens Axe DevTools van Deque. Dit is een chrome extensie waarmee je makkelijk een pagina scant op de WCAG richtlijnen. Je krijgt meteen terug of er fouten in zitten, onderverdeeld in prioriteit (Critical, Moderate, Serious of Minor). Is er een fout gevonden, dan kan je ook snel zien waar op de pagina die fout zit.
Dikke vette disclaimer: Je gaat niet alle fouten vinden met deze tool. WCAG bevat 55 criteria, het is voor een tool bijna niet te doen om alle 55 goed te testen, zeker omdat er ook vaak context bij komt kijken. En een stuk interpretatie: hoe heeft de auteur het bedoeld?
Kun je met een tool als Axe DevTools nagaan of je voldoet aan de WCAG richtlijnen? Nee dus, helaas. Je zal zelf echt nog handmatig pagina's moeten doornemen om te zien wat er gemist is. Tools als deze kunnen je wel een heel eind op weg helpen. Zeker gebruiken dus.
Deque, de maker van deze extensie, is ook bezig met AI. Een getrainde AI-bot die ook nog visuele checks kan uitvoeren zal tot betere resultaten komen. Misschien zelfs wel 90–95% halen. Maar zover is het nu dus nog niet.
Oh ja, er is ook een betaalde versie. Deze heb ik uitgeprobeerd maar is op dit moment nog niet echt het geld waard, als je het mij vraagt. Voegt nog te weinig toe, de Intelligent Guided tests werken niet fijn genoeg en zal je in gevallen toch nog handmatig moeten nalopen. Maar hou ze in de gaten, best kans dat het over een paar maanden al een stuk beter werkt.
Headingsmap (Chrome Extensie)
Snel zien of je headings (H1, H2, etc.) een logische semantische volgorde hebben? Of dat koppen ook echt wel koppen zijn en niet misbruikt om opmaak te forceren? Dan is headingsmap een handige extensie. Geen poespas, maar gewoon een lijstje van de headings en landmarks op je pagina.
Navigate like a screenreader (Chrome Extensie)
Als je niet gewend bent om een screenreader te gebruiken, is het best wel even inkomen. Tijdens mijn opleiding tot WCAG specialist mocht ik meemaken hoe Tom, een blinde gebruiker, werkt met een screenreader. Ongelofelijk hoe snel Tom zijn weg wist te vinden. Vooral door slim gebruik te maken van de lijsten die een screenreader voor hem voor kan lezen. Bijvoorbeeld een lijstje met alle headings of alle links. De chrome extensie Navigate like a screenreader laat je ook op deze manier door de site navigeren. Als ware het een screenreader. Maar dan dus zonder het geluid. Het helpt je om snel te zien of headings, links en formulier onderdelen allemaal begrijpelijk zijn als je ze met een screenreader zou "zien".
