Is jouw website bruikbaar met het toetsenbord?

Je gebruikt het toetsenbord om te typen en de muis om door de website te navigeren en links en knoppen aan te klikken. Maar niet iedereen kan gebruik maken van de muis, bijvoorbeeld Iemand met een motorische handicap zoals MS, artritis of Parkinson. Wie blind is, gebruikt ook geen muis.

Hoe kunnen we ervoor zorgen dat ook zij gebruik kunnen maken van uw website? 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 doorh 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-attribuut dat ook de tabvolgorde beïnvloedt. Bij juist gebruik, kan je in widgets op websites de tabvolgorde verbeteren. Bij foutief gebruik, kan het tabindex-attribuut het gebruiksgemak voor toetsenbordgebruikers totaal verstoren.