Gratis tool: Toegankelijkheid

Toegankelijkheid van je website checken

Voer je adres in en wij testen die pagina plus maximaal vier belangrijke pagina’s in een echte browser op de regels van WCAG 2.2 niveau A en AA. Bij elke drempel krijg je het element, de pagina, een screenshot en uitleg over wie er last van heeft.

Gratis. Test in ongeveer een minuut tot vijf belangrijke pagina’s.

Wat deze tool controleert

  • Vijf pagina’s die je site vertegenwoordigen

    De pagina die je invoert, plus maximaal vier pagina’s die uit de links op die pagina worden gekozen op basis van het soort site. Bij een webshop zijn dat een collectie, een product, de winkelwagen en een contentpagina; bij andere sites pagina’s zoals prijzen, contact, een artikel of diensten. Templates herhalen zich, dus één productpagina laat meestal de problemen van alle productpagina’s zien.

  • WCAG-regels op de gerenderde pagina

    Elke pagina laadt in Chromium op 1366 × 900, en axe-core, de opensource-regelengine van Deque, voert zijn regels voor WCAG 2.0, 2.1 en 2.2 niveau A en AA uit nadat de scripts van de pagina hebben gedraaid. Zo vind je ook problemen die een thema of app pas veroorzaakt wanneer de pagina in de browser wordt opgebouwd.

  • Impact en succescriteria

    Elke regel die faalt, toont zijn impact (kritiek, ernstig, matig of gering), de WCAG-succescriteria waaraan hij gekoppeld is, en hoeveel elementen en pagina’s hij raakt.

  • Het falende element, omlijnd

    De HTML van een voorbeeldelement en een screenshot van de pagina waarop dat element is omlijnd, zodat jij of je developer het zonder giswerk in de template terugvindt.

  • Punten waarover een mens moet beslissen

    Als axe-core iets vindt waarover het geen uitsluitsel kan geven, zoals tekst op een achtergrondafbeelding waarvan het het contrast niet kan meten, wordt het punt vermeld als “beoordeling nodig”. Het telt nooit mee als fout.

  • Een toetsenbordtest

    Op de eerste pagina drukken we 40 keer op Tab en leggen we vast waar de focus naartoe gaat: of die überhaupt beweegt, of die in een lus vastloopt (vaak in een cookiebanner), of de eerste stop een skiplink is, en welke gefocuste elementen geen zichtbare focusindicator tonen. Die laatste controle is een heuristiek, dus die wordt getoond als “beoordeling nodig”.

Wat de tool niet kan controleren

  • Horen wat een schermlezer voorleest. Software kan bevestigen dat een knop een naam heeft, niet dat die naam logisch klinkt als hij wordt voorgelezen.
  • Ondertiteling, transcripties of audiodescriptie bij video en audio beoordelen.
  • Cognitieve en inhoudelijke criteria beoordelen, zoals of instructies duidelijk zijn of foutmeldingen mensen helpen hun fout te herstellen.
  • Pagina’s testen achter een login, een wachtwoord of botbescherming, of een checkout doorlopen.
  • Je vertellen of je site conform WCAG is of aan een wet voldoet. Geautomatiseerde regels vinden een deel van de problemen; voor de rest zijn mensen nodig.

Waarom het belangrijk is

Toegankelijkheidsdrempels zijn vaak kleine fouten in een template met grote gevolgen. Een winkelwagenknop met alleen een icoon en zonder toegankelijke naam wordt voorgelezen als alleen “knop”, zodat iemand met een schermlezer niet weet wat die knop doet. Grijze tekst op wit die de contrastverhouding van 4,5:1 niet haalt, is moeilijk leesbaar voor veel slechtziende mensen, en voor iedereen die een telefoon in fel zonlicht gebruikt.

Omdat dezelfde header, productkaart en footer op elke pagina terugkomen, kan één aanpassing in een template honderden fouten tegelijk oplossen. Daarom zijn de resultaten gegroepeerd per regel, met het aantal elementen en pagina’s, in plaats van elke vindplaats als apart probleem te tonen.

Toegankelijkheid heeft in veel landen ook een juridische kant. Een scan kan je niet vertellen of een wet op jou van toepassing is of dat je eraan voldoet. Wat je wel krijgt, is een gedateerde lijst van echte drempels op je eigen pagina’s, en daar begin je hoe dan ook het best mee.

Zo lees je de resultaten

Kritiek
De drempel kan sommige mensen helemaal verhinderen het element te gebruiken, bijvoorbeeld een formulierveld zonder label of een knop zonder naam. Los deze als eerste op.
Ernstig
De drempel maakt een taak voor sommige mensen veel moeilijker, zoals broodtekst die niet aan de contrastverhouding voldoet.
Matig
De drempel veroorzaakt moeite of verwarring, maar mensen kunnen er meestal omheen werken.
Gering
Een klein probleem of een ergernis. Toch de moeite waard om op te lossen wanneer je die template weer bewerkt.
WCAG-succescriteria
De nummers naast een regel, zoals 1.1.1 of 1.4.3, zijn de criteria die de regel test. Een regel zonder criterium is een best practice en geen WCAG-eis.
Elementen en pagina’s
Hoeveel elementen niet aan de regel voldeden en op hoeveel van de geteste pagina’s. Een regel die op elke pagina faalt, zit meestal in een gedeeld onderdeel zoals de header, het menu of de footer.
Beoordeling nodig
axe-core vond iets waarover het niet kon beslissen. Bekijk het element zelf: het kan slagen of falen. Deze punten tellen niet mee als fout.
Focusval
Tab bleef rondgaan door dezelfde paar elementen. Als die bij een cookiebanner horen, kunnen toetsenbordgebruikers de rest van de pagina misschien niet bereiken.
Focus beweegt niet (Focus doesn’t move)
Op Tab drukken gaf nooit iets de focus. Links en knoppen zijn misschien gebouwd met div- of span-elementen, of een script vangt de toets af.
Skiplink
Of de eerste Tab-stop een link “Direct naar inhoud” is. Zonder zo’n link tabben toetsenbordgebruikers op elke pagina door de hele header. Ook landmarks en koppen kunnen voldoen aan WCAG 2.4.1 Blokken omzeilen.
Geen zichtbare focusindicator
Gefocuste elementen waarbij we geen outline, box-shadow of onderstreping zagen. Een andere stijl, zoals een kleurverandering, kan nog steeds zichtbaar zijn, dus tab er zelf doorheen om het te bevestigen.

Zo los je de meest voorkomende problemen op

  • Tekst die de contrastverhouding niet haalt

    Normale tekst heeft minstens 4,5:1 contrast met de achtergrond nodig, en grote tekst (ongeveer 24 px, of ongeveer 18,7 px vet) 3:1. Pas de kleur aan in je thema-instellingen of design tokens in plaats van per element, en controleer daarna opnieuw placeholdertekst, hovertoestanden en tekst op afbeeldingen.

  • Afbeeldingen zonder alt-tekst

    Geef elke betekenisvolle afbeelding een alt-attribuut dat zegt wat die laat zien of doet, zoals de productnaam en de kleur. Decoratieve afbeeldingen krijgen een lege alt (alt=""), zodat schermlezers ze overslaan. In Shopify voeg je alt-tekst toe via de afbeelding in het onderdeel Media van het product; in WordPress in het veld Alternatieve tekst van de Mediabibliotheek.

  • Formuliervelden zonder label

    Koppel aan elk invoerveld een label met <label for> dat overeenkomt met de id van het veld, of gebruik aria-label als er geen zichtbare tekst is. Vertrouw niet op placeholdertekst als enige label: die verdwijnt zodra iemand begint te typen. Aanmeldformulieren voor nieuwsbrieven en zoekvelden in de header zijn de gebruikelijke boosdoeners.

  • Knoppen en links zonder toegankelijke naam

    Iconknoppen voor de winkelwagen, het zoeken, het menu of social media bevatten vaak alleen een SVG. Voeg zichtbare tekst toe of een aria-label dat zegt wat de knop doet (“Winkelwagen openen”, niet “icoon”), en zet aria-hidden="true" op de SVG zelf.

  • Een cookiebanner die de focus vasthoudt

    Zorg dat elke knop in de banner met Tab bereikbaar is en met Enter of de spatiebalk werkt, dat de focus na het sluiten van de banner terugkeert naar de pagina, en dat een banner die de pagina niet blokkeert de focus helemaal niet vasthoudt. Controleer de instellingen van je consenttool en werk die bij als het script verouderd is.

  • Focusranden verwijderd in CSS

    Zoek in je stylesheets naar outline: none of outline: 0 op links, knoppen en :focus. Vervang dat door een zichtbare stijl, zoals :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }.

Vragen over deze tool

Is deze toegankelijkheidscheck gratis?

Ja. Je hoeft je niet te registreren; je bevestigt alleen dat je de site bezit of beheert. Het betaalde Toegankelijkheidsrapport voegt tot 20 extra pagina’s uit je sitemap toe, plus een test met alleen het toetsenbord, een reflowcontrole op 320 px, voor-en-na-code op basis van je falende markup, AI-prompts, een pdf en 5 hertests.

Hoeveel van WCAG kan een geautomatiseerde checker testen?

Maar een deel. Een regel kan controleren dat een afbeelding alt-tekst heeft, niet dat die tekst de afbeelding beschrijft, en dat een veld een label heeft, niet dat het label duidelijk is. Zie de resultaten als een lijst van zekere problemen en test de rest met een toetsenbord en een schermlezer.

Als de scan niets vindt, voldoet mijn site dan aan de ADA of WCAG?

Nee. Geen enkele geautomatiseerde test kan aantonen dat een site conform WCAG is of voldoet aan de ADA, de European Accessibility Act of een andere wet. Een schoon resultaat betekent dat de geautomatiseerde regels op de geteste pagina’s geen fouten hebben gevonden.

Kan ik een stagingsite of pagina’s achter een login checken?

Pagina’s achter een login, een wachtwoord of botbescherming kunnen niet worden getest. Als je botbescherming de scan blokkeert, sta dan de user agent FixReportsScanner toe of test een openbare kopie van je stagingomgeving.

Ik heb een probleem opgelost. Waarom ziet het resultaat er hetzelfde uit?

Resultaten voor hetzelfde adres kunnen worden hergebruikt van een scan in het afgelopen uur. Wacht tot dat uur voorbij is en leeg eventuele paginacache of CDN-cache voordat je opnieuw test.

Bronnen

Gerelateerde tools

Het Toegankelijkheidsrapport ($174, eenmalig) begint bij de volledige gratis scan en voegt meer pagina’s toe, de aanpassing voor elke bevinding, een pdf en hertests om je oplossingen te controleren.

Over het Toegankelijkheidsrapport