Is jouw website bruikbaar met het toetsenbord?

De manier waarop we een computer gebruiken is evident. Je gebruikt het toetsenbord om te typen en je gebruikt de muis om te navigeren door de website en het aanklikken van links en buttons. Simpel toch, niet? Voor de meesten onder ons is het inderdaad simpel maar niet iedereen kan gebruik maken van de muis. Iemand met een motorische handicap zoals bijv. MS, artritis of Parkinson en voor iemand die blind is het moeilijk om links aan te klikken die men niet kan zien.

Hoe kunnen we er dan voor zorgen dat die mensen niet uit de boot vallen en toch gebruik kunnen maken van uw website? Ook simpel: door ervoor te zorgen dat je website volledig bruikbaar is met enkel en alleen het toetsenbord.

Hoe doe je dat dan, navigeren door een website met het toetsenbord?

Leg de muis aan de kant en ga doorheen de website door enkel gebruik te maken van onderstaande toetsen en combinaties.

• TAB: naar volgende interactief element
• Shift+TAB: naar vorig interactief element
• Enter: link of knop activeren
• Spatie: checkbox of radioknop activeren
• Pijltjes naar beneden of boven: selectie maken in een lijst.

MacOS is niet altijd juist ingesteld om met het toetsenbord te kunnen navigeren maar met een kleine aanpassing van de instellingen is dat snel opgelost.

Alles wat met de muis kan, moet ook met het toetsenbord kunnen.

Er zijn 4 zaken waarmee we rekening moeten houden om te kunnen spreken over toetsenbordtoegankelijkheid.

1. Een goed zichtbare focus
   Kan je zien waar je bent op de website? Een toetsenbordgebruiker drukt op de tabtoets om de focus te verplaatsen langs de interactieve elementen van een webpagina. Je gaat zo dus van link naar link of in een formulier van veld naar veld. Het moet altijd visueel duidelijk zijn waar de focus zich bevindt.
   Een goed zichtbare focusstijl is belangrijk voor toetsenbordgebruikers, mensen met concentratiestoornissen, gebruikers van dicteersoftware, en verschillende bedieningsconcepten die de muis en het toetsenbord vervangen.
2. Een logische tabvolgorde
   Gebruikers die door de website navigeren met het toetsenbord hebben nood aan een logische en voorspelbare tabvolgorde. Wanneer de broncode gelijkloopt met de leesvolgorde van de site is aan deze vereiste voldaan.
   Een handige tip: als je de cookiebanner bovenaan plaatst in de broncode zal de focus daar als eerste op komen en is de banner gemakkelijk weg te klikken.
3. Bereikbaarheid
   Het is de bedoeling dat je met het toetsenbord alle interactieve elementen kan bereiken zoals links, buttons, navigatie en formuliervelden.
   Een belangrijke opmerking is dat enkel links en buttons in de tabvolgorde worden opgenomen. Als je andere afbeeldingen of div's klikbaar maakt met onClick is dat niet toegankelijk voor toetsenbordgebruikers. Gebruik daarom altijd echte links met en href="#"-attribuut of knoppen. Concrete technieken staan in het artikel JavaScript OnClick? Gebruik dan a of button.
4. Bedienbaar
   Toetsenbordnavigatie werkt altijd en zonder moeite met html-elementen: a, button, input, select, textarea … Bij custom widgets en zelfgebouwde formulierelementen moet je er zelf voor zorgen dat alles werkt door middel van authoring practices.
   Een andere oplossing kan zijn het gebruik van het tabindex-attribuutdat ook de tabvolgorde beïnvloedt. Bij juist gebruik, kan je in wedgets op websites de tabvolgorde verbeteren. Bij foutief gebruik, kan het tabindex-attribuut het gebruiksgemak voor toetsenbordgebruikers totaal verstoren.