Toetsenbord

De muis lijkt een klein detail in het ontwerp van een website. Toch kan die kleine muis voor sommige gebruikers een olifant worden: een barrière die bepaalt of ze een website wel of niet kunnen gebruiken.

Voor veel mensen is het gebruik van de muis de standaard manier om websites te bedienen (of aanraking bij apps), maar voor een hele grote groep mensen is dat geen optie. Zij zijn afhankelijk van andere manieren om websites en apps te kunnen bedienen, bijvoorbeeld via het toetsenbord of ondersteunende technologie. Dan moet dat wél kunnen. Dat is precies waar WCAG 2.1.1 Toetsenbord om gaat.

WCAG 2.1.1 – Toetsenbord

Succescriterium 2.1.1 vereist kortgezegd dat alle functionaliteit bedienbaar moet zijn via een toetsenbordinterface. Oftewel, alles wat je met een muis kan doen, moet ook met een toetsenbordinterface kunnen.

Toetsenbordinterface

Je ziet al dat we het hebben over een toetsenbordinterface. Een toetsenbordinterface omvat alle softwarematige manieren om toetsaanslagen door te geven. Dit kan een standaard toetsenbord zijn (zoals het QWERTY toetsenbord op je laptop), maar ook een aangepast of ergonomisch toetsenbord of een toetsenbordemulator. Toetsenbordemulators zijn applicaties die een toetsenbord nabootsen. Bijvoorbeeld spraak-naar-tekstapplicaties en zuig-/blaassoftware. Het hoeft dus niet altijd om een “fysiek” toetsenbord te gaan.

Zuig-/blaassoftware (sip and puff)

Zuig-/blaassoftware (“sip and puff” of SNP) maakt het voor mensen met een motorische beperking mogelijk om apparaten te bedienen via luchtdruk. Door te zuigen of blazen in een buisje wordt een signaal verstuurd naar het apparaat, waardoor specifieke acties worden uitgevoerd, vergelijkbaar met een toets of muisklik. Afhankelijk van de instellingen kan bijvoorbeeld:

• blazen zorgen voor navigatie door verschillende elementen

• zuigen een link of knop activeren.

Bekijk een toelichting van SNP of SNP in actie.

Wie heeft er baat bij toetsenbordbediening?

Zoals je misschien al wel kunt afleiden uit de voorbeelden hierboven, is een brede groep gebruikers gebaat bij het mogelijk maken van toetsenbordbediening. Denk aan:

• Mensen met RSI die door klachten moeite hebben met het gebruik van een muis

• Mensen die moeite hebben met fijne motoriek, bijvoorbeeld door trillingen of spasmes

• Mensen die gedeeltelijk of grotendeels verlamd zijn

• Maar ook mensen die niet kunnen zien en dus gebruik maken van voorleessoftware

• Mensen die slechtziend zijn en daardoor moeite hebben om een muis bij te houden op het scherm

• Of mensen met een situationele beperking zoals een gebroken arm of een kapotte muis.

Zorgen voor goede toetsenbordbediening is dus essentieel wil je de toegankelijkheid van je digitale producten op orde brengen.

Belangrijke aandachtspunten

Websites worden vaak ontworpen voor muisgebruik, omdat dat voor velen nog de standaard is. (Hetzelfde geldt ook voor apps.) Toetsenbordbediening wordt dan niet (voldoende) getest. Het gaat vaak mis wanneer er zelfgemaakte interactieve componenten worden gebouwd. Bijvoorbeeld klikbare rijen die uitgeklapt kunnen worden. Je ziet dan dat dit met de muis prima werkt, maar zodra je dit met het toetsenbord probeert te doen, lukt dat niet. Dat heeft vaak een van de volgende twee oorzaken:

• Een item kan geen toetsenbordfocus ontvangen: het element zit niet in de standaard focusvolgorde, waardoor deze bij het tabben door de interactieve componenten wordt overgeslagen.

• Een item kan wel toetsenbordfocus ontvangen, maar kan niet bediend worden: het element krijgt focus, maar reageert niet op acties zoals Enter of Spatie. Er is dan bijvoorbeeld een <div> met JavaScript klikbaar gemaakt, zonder toetsenbordondersteuning.

Beste oplossing

Gebruik zoveel mogelijk standaard HTML-elementen zoals <button> en <a> elementen. Of bijvoorbeeld een <details> en <summary> element voor accordions (uitklapbare componenten). Standaard HTML-elementen hebben van zichzelf al correcte toetsenbordondersteuning, dus is er vaak geen extra code of scripting meer nodig.

Andere veelvoorkomende problemen

Andere problemen die ik in mijn onderzoeken vaak tegenkom zijn bijvoorbeeld:

• Mobiele menu’s (hamburgermenu’s, met een icoon van drie horizontale strepen) waarvan de knop om het menu te openen geen toetsenbordfocus kan ontvangen.

• Navigatiemenu’s met items met een link én een submenu bij hover. Met het toetsenbord zie je dan vaak dat je de submenu’s niet kan bereiken, maar dat je alleen naar de pagina uit de link kan gaan.

• Tooltips (bijvoorbeeld met het icoon van een “i”) waarbij extra content verschijnt bij hover, maar waar je met het toetsenbord niet kan komen.

Ook hier geldt dat de problemen vaak opgelost kunnen worden door gebruik te maken van standaard HTML-elementen zoals een <button>.

Op de website van Cardan hebben we de dubbele interactie in het navigatiemenu bijvoorbeeld opgesplitst: je ziet bijvoorbeeld bij “Onze diensten” een submenu, maar je kan ook de link “Onze diensten” gebruiken om naar de diensten pagina te gaan. Met het toetsenbord krijgt eerst de link “Onze diensten” toetsenbordfocus, en daarna de knop om het submenu te bedienen.

De belangrijkste tip

Probeer eens om je eigen website of app (of een van je andere persoonlijke favorieten) met het toetsenbord te bedienen. Dan merk je snel waar de grootste uitdagingen en verbeterpunten liggen en waar die muis dus écht een olifant wordt. Met deze navigatietoetsen kom je al een eind:

• Tab: Ga vooruit door links, knoppen, formuliervelden en andere interactieve componenten.

• Shift + Tab: Ga achteruit door interactieve componenten.

• Enter: Activeer links, knoppen en verzend formulieren.

• Spatiebalk: Activeer knoppen, schakel selectievakjes in/uit en scrollen.

• Pijltjestoetsen: Navigeer binnen menu’s, keuzerondjes en scrollen.

• Esc: Sluit dialoogvensters of menu’s.