u bent hier: Home > In de praktijk > AnySurfer checklist > 1.1 Website is bruikbaar met het toetsenbord

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. Benadruk liever het element dat de focus krijgt op visuele wijze door middel van CSS. 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. De tabvolgorde kan gemanipuleerd worden met het tabindex-attribuut. Let op met het gebruik van tabindex. Als u het gebruikt, dient u alle HTML-elementen een tabindex te geven die in de tabvolgorde voorkomen. Gebruik dan bij voorkeur tientallen. Op die manier kan u later makkelijk nieuwe elementen toevoegen zonder de volledige nummering aan te passen.

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:

  • een uitklapmenu te gebruiken dat wel met het toetsenbord kan bediend worden, bijvoorbeeld Ultimate Dropdown Menu
  • door de onbereikbare items uit de subnavigatie te herhalen op een onderliggende pagina die wel met het toetsenbord is te activeren. Een voorbeeld vindt u op de website van de Provincie Oost-Vlaanderen.
  • of een optioneel stijlblad (CSS-switcher) te voorzien dat alle subniveaus tegelijk weergeeft, zoals in een sitemap.

Veel voorkomende problemen

  • Leg de gebruiker geen specifieke timing op voor toetsaanslagen. Bijvoorbeeld de spatiebalk ingedrukt houden of driemaal snel enter indrukken.
  • 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.