1.1 Website is bruikbaar met het toetsenbord

Alle functionaliteit die de website biedt, moet behalve met de muis ook met het toetsenbord te gebruiken zijn. Dit betekent ondermeer dat alle links en formuliervelden bereikbaar zijn met de tabtoets en activeerbaar met de entertoets. Het moet visueel ook steeds duidelijk zijn welke link of welk formulierveld de focus heeft.

Focus

Browsers tonen standaard welk element de focus heeft. Het is niet toegestaan deze markering op te heffen. Maak via CSS visueel duidelijk welk element focus heeft. Op die manier weet een toetsenbordgebruiker op elk moment waar hij zich op de pagina bevindt.

Voorbeeld (niet goed)

a:focus { 
 outline: none; 
}
a:focus { 
 outline: 0; 
} 

Voorbeeld (goed)

Definieer een "focusstate" voor links in de CSS.

a:focus { 
 color: #fff; 
 background: #00F; 
}

Deze simpele aanpassing is niet zichtbaar voor muisgebruikers en is een enorme hulp voor personen met een motorische beperking.

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. Let echter wel op met het horizontaal floaten van elementen.

De tabvolgorde kan ook gemanipuleerd worden met het tabindex-attribuut. Gebruik enkel de waarden 0 en -1.

Een belangrijke opmerking is dat enkel links en buttons in de tabvolgorde worden opgenomen. Als u 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.

Uitklapmenu's

Als u CSS gebruikt om subniveaus te verbergen in een uitklapmenu, is het vaak niet mogelijk om links in die subniveaus te bereiken met de tabtoets. Dat lost u op door:

Veel voorkomende problemen

  • Links binnen een pagina zoals skip links werken in de meeste browsers enkel als u tabindex="-1" toevoegt aan het doel van de link. Zie het artikel Skip links die voor iedereen werken.
  • Leg de gebruiker geen specifieke timing op voor toetsaanslagen. Bijvoorbeeld de spatiebalk ingedrukt houden of driemaal snel Enter drukken.
  • Gebruikt u grafische links, lees dan ook het ijkpunt over alt-teksten bij afbeeldingen.
  • Als links geactiveerd worden met behulp van JavaScript, gebruik dan uitsluitend apparaatonafhankelijke event handlers. Meer in dit artikel van webAIM.
  • Ook serverside image maps vallen onder dit ijkpunt. Het gebruik ervan vereist een manipulatie met de muis en daarom zijn ze niet toegestaan tenzij er een toegankelijk alternatief is voorzien.
  • Let erop dat de bedieningsknoppen van video bruikbaar zijn met het toetsenbord onafhankelijk van de gebruikte technologie.
  • Sommige teksten verschijnen enkel als tooltip. Toetsenbordgebruikers krijgen deze niet te zien. In dit voorbeeld verschijnt de helptekst enkel als je met de muis over het vraagteken beweegt. Door een link toe te voegen kunnen we de afbeelding toetsenbordfocus geven en een script zorgt ervoor dat de tekst verschijnt.

Aanbevelingen

  • Als u accesskeys op uw site gebruikt, wijs ze dan toe aan cijfers omdat die minder als snelkoppeling worden gebruikt.
  • Om mensen met een motorische beperking te helpen, kan u met behulp van CSS (a:hover) het klikgebied van een link extra in de verf zetten bij mouseover. Bijvoorbeeld door links te omlijnen of van een achtergrondkleur te voorzien wanneer men er met de muis overgaat.
  • Vermijd het gebruik van dropdownlijsten waar meerdere keuzes geselecteerd kunnen worden. Meer info in onze blogpost Meerdere selecties in keuzelijst.

Uitzondering

Er geldt een uitzondering voor zaken die onmogelijk uit te voeren zijn met het toetsenbord zoals een tekening maken. Opgelet, rechte lijnen trekken, vensters schalen of objecten slepen zijn wel mogelijk met het toetsenbord.

Zelf testen

Leg de muis aan de kant en probeer of u alle links kunt bereiken met de tabtoets. Houd de shifttoets ingedrukt terwijl u op tab drukt om een stap terug te keren. Met de entertoets activeert u een link. Wees extra aandachtig bij het testen van de bereikbaarheid van links in uitklapmenu's. Om te kunnen testen op Mac moet u eerst uw instellingen aanpassen.