Toegankelijkheid bladwijzers zijn handige JavaScript-links waarmee je snel problemen op je website kunt herkennen. Ze helpen bij het testen van je website en ze werken ook in een mobiele browser, dus dat kan zo z’n voordelen hebben.
Zo werken toegankelijkheid bladwijzers
Een toegankelijkheid bladwijzer, of in het Engels Accessibility Bookmarklet, voeg je toe aan je ‘bladwijzers’ van je browser. Dat kan door de links op deze pagina te slepen naar je browserbalk. Door vervolgens in je bladwijzerbalk op de nieuwe ‘favoriet’ te klikken wordt het script uitgevoerd en zie je snel de resultaten op je eigen website.
In onderstaande video laten we zien hoe je dit doet.
10 + 1 handige toegankelijkheid bladwijzers
We hebben de meest handige Accessibility Bookmarlets voor je verzameld. De links verwijzen naar de originele bronnen van de makers van de bladwijzers.
- Tekstafstand bladwijzer
Past de website aan zodat je ‘m kan controleren voor succescriterium 1.4.12 Tekstafstand. - Toon focus volgorde
Toont bij ieder interactief element de focus volgorde met een nummertje. Zo controleer je snel je website voor succescriterium 2.4.3. - Testen met het toetsenbord
Deze bladwijzer verwijderd de muiscursor en blokkeert alle muisacties. Zo word je tijdens het testen voor succescriterium 2.1.1 en 2.1.2 niet verleid om toch terug te grijpen naar de muis. - 24×24 pixels cursor
Voor het nieuwe WCAG 2.2 succescriterium 2.5.8 wordt een doelgrootte van tenminste 24 x 24 pixels verwacht. Deze bladwijzer past je cursor aan in een vlakje van 24 x 24 pixels zodat je dit makkelijk test. - 44×44 pixel cursor
Voor succescriterium 2.5.5 (AAA) wordt een doelgrootte van tenminste 44 x 44 pixels verwacht. - Bekijk links zonder href-attribuut
Wanneer een a-element (link) geen href-attribuut heeft leidt dat tot verschillende problemen, bijvoorbeeld onder succescriterium 4.1.2. Deze bladwijzer markeert alle links op de pagina zonder href-attribuut. - Toon aria-label en aria-labelledby
Dit script markeert alle elementen met een aria-label of aria-labelledby. Handig om te controleren voor o.a. succescriterium 2.5.3 en 4.1.2. - Visual ARIA Bookmarklet
Toont alle ARIA-informatie op een website, ideaal voor o.a. succescriterium 4.1.2. - Toon aria-hidden
Dit script markeert alle elementen met aria-hidden. - Toon lege buttons en links
Toont links en knoppen zonder inhoud, waardoor voor succescriterium 2.4.4 Linkdoel een probleem kan ontstaan. - Highlight koppen
Deze bookmarklet toont alle koppen zoals voorleessoftware dat ook doet.
Meer handige Accessibility bookmarklets
Naast de 10 handige bookmarklets op deze pagina zijn er nog veel meer overzichten van javascript-links:
Deze bladwijzer javascript-links zijn handig om zelf je website te testen. Heb je hulp nodig bij een volledig WCAG-inspectie van je website? De specialisten van DDAI-leden Stichting Accessibility en Cardan Technobility helpen je graag verder.