Leg je muis in een lade, open je eigen website en druk op de Tab-toets. Binnen enkele minuten weet je of mensen die geen muis kunnen gebruiken echt met je site overweg kunnen: of ze zien waar ze zijn, of ze het menu bereiken, de cookiemelding kunnen sluiten, het contactformulier kunnen invullen en weer uit een pop-up raken. Voor deze test heb je geen software en geen technische kennis nodig. Je hebt een toetsenbord, tien minuten en een notitieblok nodig. Dit artikel neemt je stap voor stap mee, geeft je een checklist om af te drukken en legt uit hoe de vaakste problemen worden opgelost.
Waarom toetsenbordtoegang belangrijk is
Veel mensen raken nooit een muis aan. Het toetsenbord, of iets dat zich als een toetsenbord gedraagt, is hoe zij zich door elke website bewegen.
- Mensen met een motorische beperking, zoals trillende handen, verlamming of weinig beweeglijke vingers, kunnen een toetsenbord vaak veel makkelijker bedienen dan een klein pijltje op het scherm.
- Mensen die schakelaars gebruiken (een of twee grote knoppen, soms bediend met het hoofd of met de adem) of een schermtoetsenbord, steunen op hetzelfde mechanisme. Het W3C, de organisatie achter de webstandaarden, legt uit dat zulke hulpmiddelen zich als een toetsenbord voordoen: wat met het toetsenbord werkt, werkt ook met hen.
- Mensen die met spraakbesturing werken zeggen bijvoorbeeld "klik op Verzenden" of "volgend veld". Volgens het W3C helpt toetsenbordtoegang ook wie een website met de stem bedient.
- Gebruikers van een schermlezer, mensen die blind of slechtziend zijn en de pagina laten voorlezen door een computerstem, gaan met toetsenbordcommando's door pagina's en formulieren.
- Snelle gebruikers die gewoon liever het toetsenbord gebruiken omdat het sneller gaat, zeker bij lange formulieren.
Toetsenbordtoegang hoort bij de Web Content Accessibility Guidelines (WCAG), de internationale richtlijnen van het W3C waarop de meeste Europese toegankelijkheidsregels steunen. De basiseisen, "Toetsenbord" en "Geen toetsenbordval", zitten op niveau A, het meest elementaire niveau van de standaard.
Maak je computer klaar
Op Windows kun je in elke grote browser meteen met de Tab-toets door links en knoppen gaan. Deze stap mag je overslaan.
Op een Mac springt Tab standaard alleen tussen tekstvelden. Pas daarom eerst twee instellingen aan:
- Open het Apple-menu, kies Systeeminstellingen, klik in de zijbalk op Toetsenbord en zet de optie voor toetsenbordnavigatie aan (in het Engels heet ze Keyboard navigation).
- Test je in Safari, kies dan Safari > Instellingen, klik op Geavanceerd en vink de optie aan waarmee de Tab-toets elk onderdeel van een webpagina markeert (in het Engels: Press Tab to highlight each item on a webpage). Zonder die optie bereikt Safari links alleen met Option+Tab.
In Chrome op een Mac vind je een vergelijkbare optie bij Instellingen > Weergave: Tab markeert dan ook links en niet alleen formuliervelden. Herstart de browser nadat je deze instellingen hebt gewijzigd.
De zes toetsen die je nodig hebt
- Tab gaat vooruit naar de volgende link, knop of het volgende formulierveld.
- Shift+Tab gaat terug naar de vorige.
- Enter volgt een link of drukt een knop in.
- Spatiebalk drukt een knop in, vinkt een vakje aan en scrolt op de meeste pagina's naar beneden als er niets geselecteerd is.
- Pijltjestoetsen bewegen tussen keuzes binnen een groep: keuzerondjes, een keuzelijst, een schuifregelaar, tabbladen binnen een blok.
- Escape sluit een pop-up, een menu of een keuzelijst.
Elke plek waar de Tab-toets op landt, noemen we een stop. De rand of markering die toont op welke stop je staat, heet de focusindicator. Het grootste deel van deze test draait om die stops volgen en die indicator in het oog houden.
De test, stap voor stap
Kies één belangrijke pagina, zoals je startpagina, een productpagina of je contactpagina. Klik één keer in de adresbalk van de browser, druk dan op Tab en loop de controles hieronder af.
Zie je altijd waar je bent?
Elke stop heeft een zichtbare focusindicator nodig: een rand, een onderstreping, een andere kleur. Druk je op Tab en lijkt er niets te veranderen, dan staat de focus ergens waar je hem niet ziet. Dat is een fout volgens de WCAG-eis "Focus zichtbaar". Let ook op stops die verdwijnen achter een vaste kopbalk of een cookiemelding. WCAG 2.2 voegde daar een aparte eis voor toe, "Focus niet bedekt".
Is de volgorde logisch?
De stops volgen de pagina zoals je ze leest: van boven naar onder, van links naar rechts, eerst het menu en dan de inhoud, de velden van een formulier in de volgorde waarin ze staan. Springt de focus van de kopbalk naar de voettekst en dan terug naar het midden, dan raken mensen de draad kwijt.
Is er een link "Naar de hoofdinhoud"?
Op de meeste goed gebouwde sites toont de allereerste druk op Tab een link als "Naar de hoofdinhoud" of "Ga naar inhoud". Druk erop met Enter en de volgende Tab moet in de hoofdinhoud landen, niet opnieuw in het menu. Zonder zo'n link moet iemand met een toetsenbord op elke pagina door alle menu-items tabben.
Werken menu's en keuzelijsten?
Open het hoofdmenu en eventuele submenu's met Enter of de spatiebalk, ga erdoor met Tab of de pijltjestoetsen en sluit ze met Escape. Een submenu dat alleen opent als je er met de muis over beweegt, is een veelvoorkomende fout.
Raak je er altijd weer uit?
WCAG noemt dit een toetsenbordval (in het Engels "keyboard trap"): de focus gaat ergens in, vaak een ingesloten kaart, een chatvenster of een video, en Tab brengt je er niet meer uit. Zit je vast, probeer dan Escape en Shift+Tab. Helpt geen van beide, dan is het een val.
Nemen pop-ups de focus over en geven ze hem terug?
Opent er een pop-upvenster (een nieuwsbriefinschrijving, een aanmeldvenster, een fotoviewer), dan moet de focus erin springen. Tab blijft binnen het venster zolang het open is, Escape sluit het, en daarna keert de focus terug naar de knop die het venster opende. Zo beschrijft de richtlijn van het W3C het ook.
Kun je een formulier invullen en versturen?
Vul elk veld in, vink de vakjes aan, maak keuzes in de keuzelijsten en verstuur. Probeer het daarna opnieuw met een bewuste fout, zoals een e-mailadres zonder "@". Bereik je de foutmelding, en zegt die wat je moet verbeteren?
Kun je de cookiemelding sluiten?
Die staat vaak als eerste op de pagina. Bereik de knoppen met Tab, kies met Enter en controleer of de melding echt verdwijnt.
Carrousels en videospelers
Een diavoorstelling die vanzelf langer dan vijf seconden beweegt, heeft volgens de WCAG-eis "Pauzeren, stoppen, verbergen" een manier nodig om ze te pauzeren of te stoppen. Controleer of je die knop en de pijlen voor vorige en volgende kunt bereiken. In een videospeler kijk je of je afspelen, volume, ondertitels en volledig scherm kunt bereiken, en of je de speler met Tab weer kunt verlaten.
Je checklist om af te drukken
- De eerste druk op Tab toont een link "Naar de hoofdinhoud", en die werkt.
- Elke stop heeft een duidelijk zichtbare focusindicator.
- Geen enkele stop verdwijnt achter een vaste kopbalk, chatknop of cookiemelding.
- De volgorde van de stops volgt de zichtbare volgorde van de pagina.
- Alles wat je met de muis kunt aanklikken, kun je ook met het toetsenbord bereiken en gebruiken.
- Menu's en submenu's openen met Enter of de spatiebalk en sluiten met Escape.
- Je raakt nooit vast: Tab of Escape brengt je altijd verder.
- Pop-ups nemen de focus over bij het openen, houden hem vast, sluiten met Escape en geven de focus terug.
- Formulieren kun je invullen en versturen, en foutmeldingen zijn bereikbaar en begrijpelijk.
- De cookiemelding kun je met het toetsenbord lezen en sluiten.
- Bewegende diavoorstellingen kun je pauzeren, en de knoppen ervan zijn bereikbaar.
- Videospelers kun je met het toetsenbord starten, stoppen en verlaten.
Wat je noteert als iets misloopt
Een notitie als "het menu werkt niet" stuurt een ontwikkelaar op zoektocht. Een precieze notitie laat hem het probleem in enkele minuten oplossen. Noteer bij elk probleem drie dingen:
- Waar: het adres van de pagina en de plek op de pagina, bijvoorbeeld "startpagina, hoofdmenu, item Diensten".
- Wat je indrukte: de toetsen in volgorde, bijvoorbeeld "zes keer Tab, dan Enter".
- Wat er gebeurde, en wat je verwachtte: "het submenu ging niet open; ik verwachtte de pagina's onder Diensten te zien".
Een schermafbeelding of een korte schermopname helpt ook. Vermeld de browser en de computer die je gebruikte, want Safari op een Mac gedraagt zich soms anders dan Chrome op Windows.
Hoe de vaakste problemen worden opgelost
Je hoeft dit niet zelf op te lossen, maar als je de oorzaak kent, wordt het gesprek met je ontwikkelaar of met de ondersteuning van je sitebouwer een stuk makkelijker.
De focusrand is weggehaald
Browsers tekenen automatisch een focusrand. Ontwerpers halen die soms weg omdat ze hem lelijk vinden, en vergeten er iets anders voor in de plaats te zetten. WebAIM, de bekende toegankelijkheidsorganisatie van Utah State University, raadt af om die rand weg te halen. De oplossing is een duidelijke rand in je eigen huisstijl:
/* Vermijden: dit verbergt de rand voor iedereen */
a:focus {
outline: none;
}
/* Beter: een duidelijke rand zodra iemand het toetsenbord gebruikt */
a:focus-visible {
outline: 3px solid #1a5e3a;
outline-offset: 2px;
}De eerste regel verbergt waar je bent. De tweede tekent een dikke groene lijn op een kleine afstand rond een link, telkens wanneer iemand die met het toetsenbord bereikt. Werk je met een sitebouwer, zoek dan in de instellingen van je thema naar een veld voor eigen opmaak.
Een "knop" die eigenlijk geen knop is
Soms wordt een knop gemaakt van een gewoon vak dat alleen op een muisklik reageert. Het ziet eruit als een knop, maar je bereikt het niet met Tab en Enter doet niets. Een echte knop lost dat op, want browsers geven echte knoppen gratis toetsenbordondersteuning:
<!-- Werkt alleen met een muis --> <div class="btn" onclick="openMenu()">Menu</div> <!-- Werkt met muis, toetsenbord, spraakbesturing en schermlezers --> <button type="button" onclick="openMenu()">Menu</button>
Hetzelfde geldt voor links: een echte link bereik je met Tab en volg je met Enter; tekst die er alleen uitziet als een link, vaak niet.
Wat automatische controles wel en niet zien
Automatische toegankelijkheidscontroles zijn nuttig, maar ze kunnen geen toetsen indrukken en beoordelen wat er dan gebeurt. Ze vinden sommige oorzaken, zoals een ontbrekend label bij een formulierveld, maar niet of een menu opengaat, of de focus vastloopt in een chatvenster of of de volgorde van de stops klopt. Daarom is deze test van tien minuten belangrijk, ook als je site een automatische controle doorstaat.
De optionele "tweede blik van AI" van ibin kan je op weg helpen. Die volgt de toetsenbordvolgorde door de pagina, telt de stops en wijst stops zonder zichtbare rand aan. Zie dat als een lijst met plekken die je eerst zelf nakijkt, niet als een eindoordeel.
Probeer het op je eigen site
Begin vandaag met één pagina: loop de checklist af en noteer wat je vindt. Controleer die pagina daarna gratis met ibin om de problemen te vinden die automatische controles wel kunnen opsporen, met beelden van waar ze staan en eenvoudig advies om ze op te lossen. De herstelgidsen leggen de oplossingen verder uit, en als je je aanmeldt met je e-mailadres, kun je tot 200 pagina's van je site gratis laten controleren.
Kijk hoe je eigen site scoort
Controleer gratis een pagina, zonder account. Je krijgt een duidelijke lijst van wat je eerst oplost, met afbeeldingen van waar elk probleem zit.
