We gebruiken cookies om ervoor te zorgen dat onze website zo soepel mogelijk draait. Als je doorgaat met het gebruiken van de website, gaan we er vanuit dat ermee instemt.OkCookiemelding sluiten
  • Door naar de hoofd inhoud
  • Spring naar de voettekst
Logo DDAI
  • Kennisbank
  • Aanbieders
  • Waarmerk
  • Aanmelden
  • Nieuws
  • Contact
  • Ga naar zoeken
Home » Kennisbank » Onderzoek & wetgeving » Overig » Handige browser-scripts om de toegankelijkheid te testen

Handige browser-scripts om de toegankelijkheid te testen

Bart Pluijms van Cardan Technobility
Aantal keer bekeken453 16 december 2021 2 minuten lezen

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.

  1. Tekstafstand bladwijzer
    Past de website aan zodat je ‘m kan controleren voor succescriterium 1.4.12 Tekstafstand.
  2. 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.
  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.
  4. 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.
  5. 44×44 pixel cursor
    Voor succescriterium 2.5.5 (AAA) wordt een doelgrootte van tenminste 44 x 44 pixels verwacht.
  6. 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.
  7. 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.
  8. Visual ARIA Bookmarklet
    Toont alle ARIA-informatie op een website, ideaal voor o.a. succescriterium 4.1.2.
  9. Toon aria-hidden
    Dit script markeert alle elementen met aria-hidden.
  10. Toon lege buttons en links
    Toont links en knoppen zonder inhoud, waardoor voor succescriterium 2.4.4 Linkdoel een probleem kan ontstaan.
  11. 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:

  • Digitala11y.com Accessibility Bookmarklets Testing
  • :last-child Accessibility Bookmarklets

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.

Over de auteur

  • Volg Bart Pluijms op LinkedIn
Bart Pluijms van Cardan Technobility

Na bijna 10 jaar binnen zijn eigen bedrijf op diverse 'stoelen' te hebben gezeten van projectleider, UX-designer en frontend-developer deelt Bart nu zijn kennis en ervaringen als adviseur en trainer digitale toegankelijkheid bij Cardan Technobilty. Zijn doel: een gezelliger internet voor iedereen.

Nieuwtje?

Heb jij nieuws om te delen? Laat het ons weten en neem contact op.

Footer

Actueel

  • Nieuws
  • Agenda
  • Opleiding & training
  • DDAI - Dutch Digital Accessibility Index op LinkedIn
  • DDAI - Dutch Digital Accessibility Index op Facebook
  • DDAI - Dutch Digital Accessibility Index op Twitter

DDAI

  • Startpunt toegankelijkheid
  • Aanbieders
  • Over DDAI

Mijn DDAI

  • Aanmelden
  • Aanmeldprocedure en kosten
  • Mijn account

Kennisbank

De kennisbank van DDAI is jouw wegwijzer op het gebied van digitale toegankelijkheid.

Ga naar de kennisbank

  • Privacyverklaring
  • Algemene voorwaarden
  • Sitemap
  • Over deze website
  • Toegankelijkheidsverklaring
  • Logo Waarmerk drempelvrij.nl 2 sterren Ga naar het certificaat van toegankelijkheid

Website door Cardan en PEP