Zorg dat alle functionaliteiten via het toetsenbord te bereiken en te bedienen zijn, in logische volgorde

Webpagina’s moeten volledig te gebruiken zijn met alleen het toetsenbord. Zorg dus dat alle onderdelen via het toetsenbord te bereiken zijn en dat je nergens komt vast te zitten als je alleen met het toetsenbord navigeert. Zorg daarnaast ook dat je kunt zien waar je bent én dat de volgorde van navigeren logisch blijft.

Hoe pas je dit toe?

Alles bereikbaar en bedienbaar met het toetsenbord

Zorg dat alle functies op een webpagina te bereiken en te bedienen zijn met het toetsenbord of een toetsenbordinterface. Bijvoorbeeld de zoekfunctie, navigatiemenu’s, links in de lopende tekst, mediaspelers, formulieren, enzoverder. Het is niet erg als een functie anders werkt met het toetsenbord, zolang hetzelfde doel maar kan worden bereikt.

Voor een groot gedeelte kun je dit bereiken door simpelweg de juiste HTML-elementen op correcte wijze te gebruiken voor bijvoorbeeld links en formulieren. Daarnaast moet je erop letten dat bepaalde functies en effecten niet gebonden zijn aan alleen een muis. Als er scripts worden gebruikt om acties uit te voeren, dan moeten die scripts (ook) reageren op acties die met het toetsenbord worden uitgevoerd. En effecten die plaatsvinden als een bezoeker zijn muis over een onderdeel beweegt (‘hovert’) kun je ook toepassen als het onderdeel focus krijgt via het toetsenbord.

Geen toetsenbordval

Met een toetsenbordval wordt een onderdeel op de webpagina bedoeld waar je wel naartoe kunt navigeren met het toetsenbord, maar niet meer vandaan. Je komt dan niet meer verder. Dit gebeurt soms als er plugins worden gebruikt zoals Flash, Silverlight of Java. Zelfs als de applicatie waarvoor de plugin nodig is kan worden bestuurd met het toetsenbord, kan het voorkomen dat de bezoeker niet verder kan navigeren om de rest van de pagina te gebruiken. Hij zou dan met de muis buiten de applicatie moeten klikken. Omdat niet iedere bezoeker een muis gebruikt moet dit ook met alleen het toetsenbord mogelijk zijn.

Logische focusvolgorde

De volgorde waarin onderdelen van de webpagina focus krijgen als een bezoeker met het toetsenbord navigeert moet logisch zijn. Met andere woorden: de betekenis van de inhoud mag door de volgorde waarin de onderdelen focus krijgen niet verloren gaan en de onderdelen moeten goed bruikbaar blijven.

De standaard focusvolgorde wordt in HTML bepaald door de volgorde waarin de onderdelen in de broncode staan, zolang je hier niet met extra code of script iets aan verandert. Als de visuele volgorde van de onderdelen gelijk is aan de volgorde in de broncode dan is de focusvolgorde vaak ook logisch. Stel dat het navigatiemenu bovenaan de pagina staat, dan bereik je dit met het toetsenbord ook als één van de eerste onderdelen. In situaties waarbij de volgorde in de broncode niet gelijk is aan de visuele volgorde moet de focusvolgorde toch logisch zijn.

Tonen en verbergen van onderdelen

Ook als je met scripts onderdelen toont en verbergt als de bezoeker op een link of knop drukt, moet je de focusvolgorde in de gaten houden. Denk bijvoorbeeld aan een uitklapbaar menu of een pop-up die over de website wordt geplaatst. Pas deze techniek als volgt toe:

1. Gebruik altijd een link (<a> element) of HTML-formulierelement (zoals <select>, <input> type=”checkbox”>, <input type=”button”>, <button>, <input type=”submit”>) om het tonen/verbergen te activeren. Deze elementen kunnen standaard de focus krijgen in browsers. In scripts moet je het ‘onClick’-event gebruiken van deze elementen. 
2. Plaats de inhoud die wordt getoond door het aanklikken van de link of het formulierelement direct na de link of het element in de broncode. Je kunt het HTML-element dat de nieuwe inhoud bevat van tevoren al op die plek in de code plaatsen en met CSS verbergen (‘display:none’) of pas invoegen op het moment dat deze wordt geactiveerd.
   • In het eerste geval hoef je met script alleen de zichtbaarheid aan te passen (‘display:block’)
   • In het tweede geval voeg je de nieuwe inhoud zelf met script toe. Door de plaatsing ná het activerende element wordt de nieuwe inhoud het eerstvolgende onderdeel dat de focus zal krijgen.

Focus zichtbaar maken

Als een onderdeel op de pagina de focus heeft, moet dit zichtbaar zijn. Browsers hebben standaard al een focusindicator ingebouwd die getoond wordt bij alle standaard HTML-elementen die focus krijgen (bijvoorbeeld de velden in een formulier). Als je geen extra CSS-code of script toevoegt en je gebruikt alleen standaard HTML-elementen, voldoe je daarom al aan deze eis. Een voordeel is dat bezoekers die dat nodig hebben met hun eigen programma’s de standaard focusindicator kunnen vervangen door bijvoorbeeld een beter zichtbare.

Wat je in bovenstaande situatie niet mag doen, is met CSS de focus-lijn (outline) van actieve onderdelen verwijderen. Doe je dit wel, dan moet je zelf in CSS stijlen aanmaken voor de focus van elementen of hiervoor script gebruiken.

Voorbeelden

Alternatieve mogelijkheden voor toetsenbordgebruikers bieden

Bij een lijst die met de muis via ‘drag and drop’ (verslepen) gesorteerd kan worden, kun je als toevoeging knoppen plaatsen waarmee bezoekers die het toetsenbord gebruiken de items naar boven of naar beneden kunnen verplaatsen. Het doel (sorteren van het lijstje) kan hierdoor op verschillende manieren bereikt worden. Het is belangrijk dat de volgorde niet alleen visueel wijzigt, maar ook in de broncode (door gebruik van script).

Logische focusvolgorde

Bij een webpagina waarop 2 formulieren naast elkaar zijn geplaatst, moet de focusvolgorde de logische leesvolgorde volgen. Dat betekent dat je met het toetsenbord eerst helemaal door het eerste formulier moet kunnen tabben en daarna pas door het tweede formulier.

Focus zichtbaar maken

Met de volgende CSS-code wordt de achtergrond- en voorgrondkleur van een link (het <a> element) gewijzigd bij muis- en toetsenbordfocus.

a:hover, a:active, a:focus {
background-color: #DCFFFF;
color: #000066;
}

 

Voor ontwikkelaars

De bouwer moet zorgen dat alle onderdelen van de website met het toetsenbord te bereiken en te bedienen zijn, in een logische volgorde en met een zichtbare focus.