NL

Toetsenbordtest

Test je eigen website met alleen het toetsenbord. Tien korte stappen laten zien wat werkt en wat niet, met een tip bij elk punt.

Toetsenbordtest

Toetsenbordtest

E-powermentToetsenbordtest

Voor je begint

  • Open de website die je wilt testen in een ander tabblad of venster. Houd deze pagina ernaast, of wissel steeds even.
  • Leg je muis weg. Gebruik ook je touchpad of touchscreen niet: alles gaat met de toetsen.
  • De focus is de plek waar je toetsenbord nu is: de link, knop of het veld dat reageert als je op Enter drukt. Meestal zie je hem als een rand.
  • Werk je op een Mac? Kies dan in het Apple-menu ‘Systeeminstellingen’ en dan ‘Toetsenbord’, en zet ‘Toetsenbordnavigatie’ aan. Anders komt Tab niet bij alle knoppen.
  • Werk je met Safari? Kies dan ook in Safari ‘Instellingen’ en dan ‘Geavanceerd’, en zet ‘Tab-toets markeert elk onderdeel op webpagina’ aan. Anders slaat Tab links over.

Bijvoorbeeld het adres of de naam van je organisatie. Het komt boven je uitkomst.

De test in tien stappen

Beantwoord: 0 van 10

  1. Het menu overslaan

    Doe dit
    Open de pagina en druk één keer op Tab.
    Dit hoort te gebeuren
    Er verschijnt een link zoals ‘Naar de inhoud’. Druk je op Enter, dan spring je over het menu heen. Druk je daarna nog een keer op Tab, dan kom je bij de eerste link in de inhoud.

    Let op: Zo’n link is niet de enige manier om aan de eis te voldoen: goede koppen en een duidelijke indeling van de pagina tellen ook. Maar wie alleen het toetsenbord gebruikt, heeft het meest aan de link.

    WCAG 2.2: 2.4.1 Blokken omzeilen (niveau A) 

    Werkt het?
    Werkt het niet? Zo los je het op

    Vraag wie je website bouwt om bovenaan elke pagina een link ‘Naar de inhoud’ te zetten, als eerste link. Hij springt naar het begin van de inhoud, bijvoorbeeld naar <main id="inhoud">. De link mag verborgen zijn tot hij de focus krijgt.

  2. Alles bereikbaar, in een logische volgorde

    Doe dit
    Druk steeds op Tab tot je onderaan de pagina bent. Ga daarna met Shift + Tab terug naar boven.
    Dit hoort te gebeuren
    Je komt bij elke link, knop en elk invulveld dat je ook met de muis kunt gebruiken. De volgorde klopt met hoe je de pagina leest: meestal van boven naar beneden en van links naar rechts. Je springt niet ineens heen en weer.

    WCAG 2.2: 2.1.1 Toetsenbord (niveau A) , 2.4.3 Focus volgorde (niveau A) 

    Werkt het?
    Werkt het niet? Zo los je het op

    Gebruik gewone links (<a href>) en knoppen (<button>): die werken vanzelf met het toetsenbord. Zet de code in dezelfde volgorde als wat je op het scherm ziet. Gebruik geen tabindex met een getal hoger dan 0.

  3. Je ziet waar je bent

    Doe dit
    Druk weer een paar keer op Tab. Kijk bij elke stap waar je nu bent: in het menu, in de tekst en onderaan de pagina.
    Dit hoort te gebeuren
    Om de link of knop die de focus heeft, staat een duidelijke rand. Of hij verandert goed zichtbaar, bijvoorbeeld van kleur én met een streep eronder. Je raakt nergens kwijt waar je bent.

    WCAG 2.2: 2.4.7 Focus zichtbaar (niveau AA) 

    Werkt het?
    Werkt het niet? Zo los je het op

    Vraag wie je website bouwt om de focusrand nooit weg te halen (outline: none) zonder er iets duidelijks voor terug te zetten. Een rand van minstens 2 pixels dik, in een kleur die goed afsteekt tegen de achtergrond, zie je makkelijk.

  4. De focus zit niet verstopt

    Doe dit
    Tab verder naar beneden en daarna met Shift + Tab terug. Let op dingen die blijven staan als je scrolt: een vaste balk bovenaan, een cookiemelding of een chatknop.
    Dit hoort te gebeuren
    De link of knop met de focus is altijd te zien. Een vaste balk of melding bedekt hem nooit helemaal.

    Let op: Opende je zelf iets, zoals een uitklapmenu, en bedekt dat de focus? Dat telt niet als fout als je het kunt wegdoen zonder dat de focus verspringt, bijvoorbeeld met Esc. Een cookiemelding of vaste balk die de focus helemaal bedekt, is wel een fout. Half bedekt is volgens de eis nog net goed, maar het maakt je website wel lastiger.

    WCAG 2.2: 2.4.11 Focus niet bedekt (minimum) (niveau AA) 

    Werkt het?
    Werkt het niet? Zo los je het op

    Vraag wie je website bouwt om ruimte te houden voor vaste balken, bijvoorbeeld met scroll-padding-top in de CSS. Laat een cookiemelding eerst beantwoorden voordat je verder kunt op de pagina, of zet hem zo neer dat hij niets bedekt.

  5. Knoppen en links werken met Enter en Spatie

    Doe dit
    Ga met Tab naar een link en druk op Enter. Ga naar een knop en druk op Enter. Probeer een andere knop met Spatie.
    Dit hoort te gebeuren
    Een link opent met Enter. Een knop werkt met Enter én met Spatie. Druk je op Spatie bij een knop, dan scrolt de pagina niet naar beneden: de knop doet wat hij moet doen.

    Let op: Werkt een knop wel met Enter maar niet met Spatie? Dan kun je hem toch bedienen, en is het volgens WCAG meestal geen fout. Het is wel wat mensen verwachten, en vaak een teken dat het geen echte knop is. Kies dan ‘werkt’ en schrijf het in je notitie.

    WCAG 2.2: 2.1.1 Toetsenbord (niveau A) , 4.1.2 Naam, rol, waarde (niveau A) 

    Werkt het?
    Werkt het niet? Zo los je het op

    Werkt iets dat eruitziet als een knop alleen met de muis? Dan is het vaak geen echte knop. Vraag wie je website bouwt om voor een actie een <button> te gebruiken, en voor een andere pagina een link (<a href>).

  6. Het menu gaat open en dicht

    Doe dit
    Ga met Tab naar het menu. Heeft het een knop zoals ‘Menu’, of een onderdeel dat uitklapt? Open het met Enter of Spatie. Ga door de onderdelen met Tab of de pijltjestoetsen. Sluit het met Esc of met dezelfde knop. Maak je browservenster daarna smal, zodat je het menu van de telefoon ziet, en doe het nog een keer.
    Dit hoort te gebeuren
    Het menu gaat open zonder muis. Je komt bij alle onderdelen, ook in een uitklapmenu. Het menu gaat ook weer dicht, en de focus staat dan weer op de knop waarmee je het opende.

    Let op: Sluiten met Esc is geen harde eis van WCAG, maar wel wat mensen verwachten. Gaat het menu dicht met dezelfde knop, dan werkt het.

    WCAG 2.2: 2.1.1 Toetsenbord (niveau A) 

    Werkt het?
    Werkt het niet? Zo los je het op

    Een uitklapmenu dat alleen opent als je er met de muis overheen gaat, werkt niet met het toetsenbord. Vraag wie je website bouwt om een knop die het menu opent en sluit, en die aan een schermlezer laat weten of het menu open is (aria-expanded).

  7. Een formulier invullen

    Doe dit
    Zoek een formulier, bijvoorbeeld om te zoeken, om contact op te nemen of om je aan te melden. Vul het in zonder muis. Typ in de velden. Kies een keuzerondje met de pijltjestoetsen. Zet een vinkje met Spatie. Kies in een keuzelijst met de pijltjestoetsen. Versturen hoeft nog niet.
    Dit hoort te gebeuren
    Je komt bij elk veld en kunt alles invullen en kiezen. Er gebeurt niets onverwachts terwijl je kiest: de website gaat bijvoorbeeld niet meteen naar een andere pagina zodra je iets kiest in een keuzelijst.

    WCAG 2.2: 2.1.1 Toetsenbord (niveau A) , 3.2.2 Bij input (niveau A) 

    Werkt het?
    Werkt het niet? Zo los je het op

    Gebruik gewone invulvelden, keuzerondjes, vinkjes en keuzelijsten uit HTML: die werken vanzelf met het toetsenbord. Laat een keuze nooit meteen een andere pagina openen. Zet er een knop naast, zoals ‘Toon’.

  8. Foutmeldingen zijn te vinden

    Doe dit
    Laat in hetzelfde formulier een verplicht veld leeg, of typ iets wat niet klopt, zoals een e-mailadres zonder @. Verstuur het formulier met Enter of met de knop.
    Dit hoort te gebeuren
    Je ziet een melding die in woorden zegt wat er mis is, en bij welk veld. De focus gaat naar de melding of naar het veld, of je komt er met Tab bij. Je kunt de fout verbeteren zonder muis.

    Let op: Verstuur je iets wat echt aankomt, zoals een aanmelding? Doe dan geen proef met echte gegevens.

    WCAG 2.2: 3.3.1 Foutidentificatie (niveau A) 

    Werkt het?
    Werkt het niet? Zo los je het op

    Vraag wie je website bouwt om bij een fout de focus naar de melding of naar het eerste veld met een fout te zetten. Zet de melding in woorden bij het veld, niet alleen als rode rand. Koppel de melding aan het veld (aria-describedby), zodat een schermlezer hem voorleest.

  9. Een venster op de pagina werkt goed

    Doe dit
    Open iets dat als venster over de pagina komt: een pop-up, de instellingen van een cookiemelding of een foto die groot opent. Druk een paar keer op Tab. Druk daarna op Esc.
    Dit hoort te gebeuren
    Als het venster opent, gaat de focus erin. Met Tab blijf je in het venster en kom je niet op de pagina erachter. Met Esc of met een knop om te sluiten gaat het dicht. Daarna staat de focus weer op de knop waarmee je het opende.

    Let op: Sluiten met Esc is geen harde eis van WCAG. Het is wel wat mensen verwachten, en W3C raadt het aan. Een knop om te sluiten die je met het toetsenbord bereikt, moet er in elk geval zijn.

    WCAG 2.2: 2.4.3 Focus volgorde (niveau A) , 2.1.2 Geen toetsenbordval (niveau A) 

    Werkt het?
    Werkt het niet? Zo los je het op

    Vraag wie je website bouwt om een echt dialoogvenster te gebruiken, bijvoorbeeld het HTML-element <dialog> met showModal(). Dat houdt de focus in het venster en sluit met Esc. Controleer daarna dat de focus terugkomt op de knop die het venster opende.

  10. Je loopt nergens vast

    Doe dit
    Ga met Tab naar alles wat van een andere partij in de pagina zit: een video, een kaart, een chatvenster of een formulier. Probeer er met Tab en Shift + Tab weer uit te komen.
    Dit hoort te gebeuren
    Je komt overal weer uit met Tab of Shift + Tab. Is daar een andere toets voor nodig, dan staat erbij welke.

    WCAG 2.2: 2.1.2 Geen toetsenbordval (niveau A) 

    Werkt het?
    Werkt het niet? Zo los je het op

    Loop je vast, dan kan iemand die alleen het toetsenbord gebruikt niet meer verder op de pagina. Dat is een ernstige fout. Vraag wie je website bouwt, of de maker van de video, kaart of chat, om een versie die wel met het toetsenbord werkt. Of zet er een link naast naar dezelfde informatie, bijvoorbeeld als gewone tekst.

Uitkomst

  • 0werkt
  • 0werkt niet
  • 0niet van toepassing
  • 10nog niet getest

Je hebt nog geen stap beantwoord. Begin bij stap 1.

Nog niet getest

  • 1. Het menu overslaan
  • 2. Alles bereikbaar, in een logische volgorde
  • 3. Je ziet waar je bent
  • 4. De focus zit niet verstopt
  • 5. Knoppen en links werken met Enter en Spatie
  • 6. Het menu gaat open en dicht
  • 7. Een formulier invullen
  • 8. Foutmeldingen zijn te vinden
  • 9. Een venster op de pagina werkt goed
  • 10. Je loopt nergens vast

Deze test gaat alleen over het toetsenbord. Er is meer dat een website toegankelijk maakt. Test ook:

Gemaakt met de Toetsenbordtest van E-powerment: e-powerment.nl/hulpmiddelen/toetsenbordtest/

Zo werkt het

  1. Open de website die je wilt testen in een ander tabblad. Leg je muis weg.
  2. Doe de tien stappen. Bij elke stap staat wat je doet en wat er hoort te gebeuren.
  3. Kies bij elke stap: werkt, werkt niet of niet van toepassing. Schrijf erbij wat je zag, als je wilt.
  4. Na de tien stappen volgt de uitkomst: wat niet werkt, met bij elk punt wat je eraan kunt doen.
  5. Kies Druk af of Kopieer de tekst, boven het hulpmiddel. Bijvoorbeeld om de uitkomst te mailen aan wie je website bouwt.

Test een paar verschillende pagina’s: de homepage, een pagina met een formulier en een pagina met een video of een kaart. Past een stap niet bij de pagina, kies dan ‘niet van toepassing’.

De toetsen

Tab
Naar de volgende link, knop of het volgende veld.
Shift + Tab
Terug naar de vorige.
Enter
Een link volgen of een knop gebruiken. Op een Mac heet deze toets soms return.
Spatie
Een knop gebruiken, of een vinkje zetten en weghalen.
De pijltjestoetsen
Kiezen tussen keuzerondjes of in een keuzelijst, en soms door een menu gaan.
Esc
Een menu, pop-up of venster sluiten.

Goed om te weten

  • Dit is een eerste check, geen volledige toets aan de regels. Werkt alles? Dan weet je dat het toetsenbord goed werkt op de pagina’s die je testte. Of je hele website voldoet, laat je testen door iemand die daar verstand van heeft.
  • Je hebt een toetsenbord nodig. Op een telefoon of tablet zonder toetsenbord kun je deze test niet doen.
  • Bij elke stap staat welke eis uit WCAG 2.2 erbij hoort. WCAG is de internationale standaard voor toegankelijke websites, en zo’n eis heet daar een succescriterium. Alle stappen horen bij niveau A of AA. A is het minimum, AA is de gewone norm. Lees meer in wat is WCAG.
  • Waarom dit ertoe doet: niet iedereen gebruikt een muis, bijvoorbeeld wie blind is of wie trillende handen heeft. Lees meer in Bedienbaar: alles werkt, ook zonder muis.
  • Wat er hoort te gebeuren, volgt de uitleg van W3C, de organisatie achter WCAG. Soms is iets geen harde eis, maar wel wat mensen verwachten, zoals een venster sluiten met Esc. Dat staat er dan bij.

Meer testen

Je antwoorden

Alles blijft in je browser. We bewaren je antwoorden en notities niet en we versturen niets. Ververs je de pagina of sluit je hem, dan zijn ze weg. Wil je de uitkomst bewaren? Print hem of kopieer hem. Kies je een link naar WCAG, dan ga je naar de website van W3C.

Bronnen

De stappen volgen WCAG 2.2 en de uitleg van W3C. Gelezen op 30 september 2026.

Meer hulpmiddelen

Bekijk alle hulpmiddelen 

  • SpelErvaring

    Hindernisbaan

    Probeer zelf hoe het is om een website te gebruiken als je slecht ziet, trilt, niet goed kunt lezen of alleen een toetsenbord hebt. Daarna repareer je de website en probeer je het opnieuw.

    Met je cliënt

  • CheckSchrijfhulp

    Alt-tekst hulp

    Schrijf een goede alt-tekst bij een afbeelding. Beantwoord een paar vragen en je krijgt advies en een voorstel dat je kunt kopiëren.

    Met je cliënt

  • CheckTekstcheck

    Taalcheck

    Check of je tekst makkelijk te lezen is. Je ziet lange zinnen en moeilijke woorden, met een makkelijker woord ernaast.

    Met je cliënt

Samen iets bouwen?

Stuur ons een berichtje als je een idee hebt, iets mist of een hulpmiddel wilt uitproberen met je team. Vertel in een paar zinnen waar het om gaat. We lezen alles, en het verplicht je tot niets.

Stuur een berichtje [email protected]