Toetsenbordbediening, de toegankelijke basis van je website

Ondersteuning voor het bedienen van je website via een toetsenbord is onmisbaar voor een toegankelijke website. We kijken naar de redenen waarom, waar je op moet letten en hoe je toetsenbordbediening kunt testen.

Waarom is het belangrijk?

Voor veel mensen is het bedienen van de computer via een muis de meest gebruikte manier. Ook de vinger of een stylus op een telefoon of tablet wordt veel gebruikt.

Maar wat als je deze opties niet hebt, omdat je een (tijdelijke) lichamelijke of motorische beperking hebt? Bijvoorbeeld als iemand last hebt van trillende handen of problemen met de fijne motoriek. Sommige mensen kampen met klachten als RSI (Repeated Stress Injury) waardoor langdurige muis gebruik voor pijnlijke klachten kan zorgen.

Verder gebruiken blinden en andere gebruikers van screenreaders ook het toetsenbord om je pagina te bedienen. Er zijn ook mensen, die hun handen helemaal niet (meer) kunnen gebruiken. Ze maken gebruik van speciale hulpmiddelen zoals een aangepast toetsenbord, een schakelaar, een aanwijsstok of spraaksoftware om een computer te bedienen.

Voor al deze situaties is het belangrijk dat je website met een toetsenbord bedient kan worden. Dat geldt ook als een bezoeker geen toetsenbord kan gebruiken! De beschikbare hulpmiddelen maken namelijk vaak gebruik van de toetsenbordinterface om hun signalen te verwerken.

Waar moet je op letten?

Er ontstaan veel verschillende problemen als een website niet goed via het toetsenbord te bedienen is. Laten we kijken naar enkele voorbeelden:

Focus-indicatie

Een van de meest voorkomende problemen bij toetsenbordbediening is het slecht zichtbaar zijn (of compleet ontbreken) van focus-indicatie op het actieve element.

Standaard geeft een browser bij toetsenbordbediening een omlijning om het actieve element. Deze indicatoren variëren van een blauw-witte kring tot een stippellijntje in verschillende browsers. Er zijn ook mogelijkheden voor gebruikers om deze stijlen naar behoefte aan te passen.

Een vaak gemaakte fout is dat dergelijke aanwijzingen worden uitgeschakeld via CSS met een outline: 0; of outline: none; waarde. Dit gebeurt meestal uit ontwerp oogpunt, maar hierdoor is niet meer te herkennen waar de toetsenbordfocus zicht bevindt. In plaats van deze indicatoren uit te schakelen kun je ze een eigen passende styling geven die bij de vormgeving past en ook nog eens toegankelijk is.

Vaak gebeurt het ontbreken van deze indicaties in combinatie met het volgende voorbeeld. Een link krijgt wel styling mee voor de hover status, als er met een muis overheen gegaan wordt, maar de styling niet wordt toegepast als er via het toetsenbord focus op komt.

Zorg ervoor dat je met beide situaties rekening houdt. Vaak kan dat al oplost worden door naast de CSS-selector :hover ook de selector :focus mee te nemen als je eigen focus indicatoren toepast.

Toetsenbordval

Er ontstaan situaties op een website waarbij de toetsenbordfocus vast komt te zitten en navigeren naar andere elementen niet meer lukt. Deze zogenaamde toetsenbordvallen komen regelmatig voor bij het gebruik van een modal (pop-up scherm) en andere complexere elementen als widgets.

Ze ontstaan bijvoorbeeld wanneer een modal geopend wordt en de focus beperkt wordt tot deze pop-up. Deze techniek is belangrijk om verwarrende situaties voorkomen. Maar doordat het knopje om het venster te sluiten bijvoorbeeld niet als echte <button> wordt opgemaakt, kan alleen via de muis nog de modal gesloten worden. 

Een oplossing is om de sluit-knop beschikbaar te maken via het toetsenbord en bijvoorbeeld het venster te laten sluiten als de escape-toets ESC wordt ingedrukt.

Snelkoppelingen / sneltoetsen

We hebben tegenwoordig allerlei online applicaties. Van online tekstverwerkers tot uitgebreidere email omgevingen als Gmail en Hotmail. Deze toepassingen maken soms gebruik van snelkoppelingen om acties uit te voeren. Vaak zijn deze sneltoetsen gebaseerd op 1 letter of teken. 

Zo heeft de webomgeving van Gmail sneltoetsen voor het archiveren of beantwoorden van email. Deze sneltoetsen kun je uit zetten bij de instellingen. 

Ook als je met de standaard embed methode van YouTube een video op je eigen pagina zet komen daar sneltoetsen bij. Deze moet je zelf deactiveren door het disablekb=1 attribuut toe te voegen aan je embed URL. Hieronder volgt een stukje voorbeeldcode daarvoor. 

<iframe
	width="560" 
	height="315" 
	src="https://www.youtube.com/embed/XXXXXX?disablekb=1&autoplay=0" 
	title="YouTube video player" 
	frameborder="0">
</iframe>

Niet alleen voor mensen die een toetsenbord gebruiken, maar ook voor mensen die gebruikmaken van spraakbesturing kunnen dergelijke sneltoetsen voor problemen zorgen als bijvoorbeeld een woord uitgespeld wordt in losse letters. Het is daarom belangrijk dat er aan bepaalde voorwaarden wordt voldaan.

De WCAG stelt dat een van de volgende oplossingen aanwezig is:

1. Er is een manier aanwezig om de sneltoetsen uit te schakelen.
2. Er is een manier aanwezig om de sneltoetsen aan te passen met ondersteuning voor niet-printbare toetsen als Ctrl of Alt of Cmd
3. De sneltoets is alleen actief als het betreffende element de focus heeft.

Eigen componenten

Voor meer complexe websites ontstaat vaak de behoefte om eigen componenten te bouwen die passen bij de informatie die je aanbiedt. Enkele voorbeelden zijn een aangepaste vorm van navigatie of het hebben van een filter op resultaten. Bij het bouwen van eigen componenten is het extra belangrijk om rekening te houden met toetsenbordbediening.

Zorg er allereerst voor dat elementen te benaderen. En wanneer je, als het echt niet anders kan, afwijkt van standaard  HTML-elementen als een <button> , je via JavaScript zorgt dat ze wel op dezelfde manier werken.

Logische volgorde

Controleer daarnaast of de tab volgorde van de pagina in een logische volgorde verloopt. Dit past goed in combinatie met het eerste punt, namelijk dat een actief element goed zichtbaar moet zijn.

De logisch volgorde is belangrijk voor de hele pagina. Zowel op het vlak van structuur van je content, maar ook voor toetsenbordbediening. Zorg ervoor dat de volgorde overeenkomt met wat er te zien is en voorkom dat je focus van boven naar beneden over de pagina springt. Ook bij de hierboven genoemde eigen componenten is dit een belangrijk onderdeel om te controleren.

Een andere plek waar de volgorde regelmatig verkeerd loopt zijn formulieren. Hier wordt de volgorde van velden in de code nog wel eens aangepast om een visuele weergave te bereiken. Zorg ervoor dat bij elkaar horende velden, zoals een voornaam en achternaam veld, ook na elkaar komen.

Tabindex

Het tabindex attribuut geeft de mogelijkheid om een element dat normaal geen toetsenbordfocus kan krijgen toe te voegen aan de tab volgorde van een pagina. Ook kun je een element ermee uit de tabvolgorde halen of de tabvolgorde compleet aanpassen. 

Door het gebruik van tabindex="0" kunnen elementen die normaal geen focus krijgen toegevoegd worden aan de natuurlijke tabvolgorde. Dit kan in sommige gevallen nodig zijn om content voor toetsenbordgebruikers beschikbaar te maken.

Een voorbeeld daarvan is het stukje YouTube code eerder op deze pagina. In dit element kunnen regels zo lang worden dat verticaal scrollen nodig is. Door het toegevoegde tabindex="0" attribuut op de container kan dit scrollen ook via de pijltjestoetsen gebeuren.

Een tabindex="-1" waarde haalt een element uit de tabvolgorde. Er kan dan niet langer met een toetsenbord naartoe genavigeerd worden.

Elementen met een tabindex waarde hoger dan 0 komen, op volgorde, helemaal vooraan de tabvolgorde terecht. Ze worden daarmee uit de natuurlijke volgorde op de pagina gehaald wat betekent dat deze elementen altijd eerst focus krijgen. Ook als zo'n element helemaal onderaan de pagina staat! Hierbij is dus uiterste zorgvuldigheid geboden en het gebruik ervan wordt sterk afgeraden!

Toetsenbordbediening zelf testen

Zoals je hebt kunnen lezen is het controleren van toetsenbordbediening een van de belangrijkste zaken die je kunt doen voor digitale toegankelijkheid. Bovendien kun je het als ontwikkelaar ook prima zelf al doen tijdens het bouwen en je hebt er dan nog het meeste invloed op ook!

Hieronder staan de meest gebruikte toetscombinaties die je hiervoor kunt gebruiken.