Campus Design System

Appearance

2.1.1 Toetsenbordtoegankelijkheid (Keyboard Accessible) niveau A ​

Uitleg ​

Het WCAG-criterium 2.1.1 Toetsenbordtoegankelijkheid vereist dat alle functionaliteit van een webpagina beschikbaar moet zijn via het toetsenbord. Dit betekent dat gebruikers die geen muis gebruiken (zoals gebruikers met motorische beperkingen of blinden die een schermlezer gebruiken), dezelfde functionaliteit moeten kunnen bereiken en gebruiken met alleen het toetsenbord.

Toegankelijkheid via toetsenbord is essentieel, omdat veel gebruikers, bijvoorbeeld mensen met een beperking in hun handen of armen, geen muis kunnen gebruiken en afhankelijk zijn van toetsenbordnavigatie. Dit geldt niet alleen voor eenvoudige elementen zoals links en knoppen, maar voor alle interactieve elementen op de pagina, zoals formulieren, menu’s, en dynamische inhoud.

Wat betekent dit in de praktijk? ​

  • Toetsenbordnavigatie: Alle interactieve elementen (zoals links, knoppen, formulieren, en menu’s) moeten beschikbaar zijn via toetsenbordnavigatie. Dit betekent dat gebruikers naar de verschillende elementen moeten kunnen navigeren door de Tab-toets (en Shift + Tab om terug te gaan) te gebruiken.
  • Acties uitvoeren via toetsenbord: Als een element kan worden geactiveerd met de muis (zoals een knop, link of formulier), moet de gebruiker dit ook kunnen doen via het toetsenbord (bijvoorbeeld met de Enter-toets of de Spatiebalk).
  • Focusbeheer: De focus moet logisch en duidelijk door de pagina bewegen wanneer een gebruiker via het toetsenbord navigeert. Het huidige gefocuste element moet visueel duidelijk zijn (bijvoorbeeld door middel van een focus-indicator) zodat de gebruiker weet waar hij zich bevindt.

Waarom is dit belangrijk? ​

Dit criterium is belangrijk voor gebruikers die geen muis kunnen gebruiken, zoals mensen met motorische beperkingen (bijvoorbeeld mensen met een dwarslaesie, artritis, of tremoren) of mensen die alleen toetsenbordnavigatie gebruiken om de webpagina te bedienen (zoals bij gebruik van schermlezers of spraakbesturing). Het waarborgen van volledige toetsenbordtoegankelijkheid maakt de website functioneel voor een breder publiek.

Voorbeeld van het probleem ​

Stel je voor dat een website een formulier heeft met een knop die alleen via de muis geactiveerd kan worden. Gebruikers die afhankelijk zijn van toetsenbordnavigatie kunnen de knop niet bereiken of activeren, wat de bruikbaarheid van de website aanzienlijk vermindert voor deze gebruikers.

Oplossing voor dit probleem ​

Zorg ervoor dat elk interactief element op de pagina toegankelijk is via het toetsenbord en dat de volgorde van focus logisch is.

Goed voorbeeld:

html
<!-- Correcte implementatie van toetsenbordtoegankelijkheid -->
<button onclick="doAction()">Klik hier</button>
  • In dit voorbeeld kan de gebruiker via de Tab-toets door de knoppen navigeren en de Enter-toets gebruiken om de knop te activeren. Dit is toegankelijk voor gebruikers die geen muis gebruiken.

Slecht voorbeeld:

html
<!-- Slechte implementatie van toetsenbordtoegankelijkheid -->
<div onclick="doAction()">Klik hier</div>
  • De div zelf is niet interactief via toetsenbord, tenzij er extra JavaScript wordt toegevoegd om de focus en toetsenbordinteracties te beheren. Dit zorgt ervoor dat toetsenbordgebruikers de functionaliteit niet kunnen bereiken.

Belangrijke overwegingen ​

  • Focusvolgorde: Zorg ervoor dat de focusvolgorde logisch is en overeenkomt met de visuele volgorde van elementen op de pagina. Dit voorkomt verwarring bij gebruikers die via toetsenbord navigeren.
  • Focusindicatoren: Voor gebruikers die toetsenbordnavigatie gebruiken, moeten de focusindicatoren (zoals een gemarkeerde rand of achtergrondkleur) duidelijk zijn om aan te geven welk element de focus heeft.
  • Formulieren: Zorg ervoor dat formuliervelden, zoals invoervelden, selectievakjes en keuzerondjes, allemaal toegankelijk zijn via het toetsenbord.

Alternatieve benaderingen ​

  • ARIA (Accessible Rich Internet Applications): Gebruik van ARIA-rolattributen en interactieve elementen zoals aria-labelledby en aria-pressed kan helpen om de toegankelijkheid van dynamische inhoud en niet-standaard interactieve elementen te verbeteren.
  • Toetsenbordafhandelingsbibliotheken: Gebruik bibliotheken zoals focus-trap voor modale vensters of keuzelijsten om ervoor te zorgen dat de focus binnen de modale inhoud blijft en dat de navigatie vloeiend is.

Belangrijkste punten ​

  • Zorg ervoor dat alle interactieve elementen op de pagina via het toetsenbord toegankelijk zijn.
  • Zorg ervoor dat de focus duidelijk zichtbaar is en in een logische volgorde beweegt.
  • Verzeker je ervan dat de gebruikerservaring consistent blijft voor toetsenbordgebruikers door een volledige toetsenbordinterface te bieden.

Tools en Hulpmiddelen ​

  • aXe Accessibility Tool: Deze tool helpt bij het testen van de toetsenbordtoegankelijkheid van je website. Het identificeert interactie-elementen die mogelijk niet toegankelijk zijn via toetsenbord. aXe Tool.
  • WAVE (Web Accessibility Evaluation Tool): Deze tool kan toetsenbordtoegankelijkheidsproblemen detecteren, zoals het ontbreken van focus op interactieve elementen. WAVE Tool.

Betekenis voor toegankelijkheid ​

Toetsenbordtoegankelijkheid zorgt ervoor dat alle gebruikers, ongeacht hun beperking, toegang hebben tot de volledige functionaliteit van de website. Dit bevordert inclusiviteit en zorgt ervoor dat de website bruikbaar is voor iedereen, ook voor diegenen die geen muis kunnen gebruiken.

Referenties ​