Alle functionaliteit die de website biedt, moet behalve met de muis ook met het toetsenbord te gebruiken zijn. Dit betekent onder andere 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.
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 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.
Uitklapmenu's
Als je 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 los je op door:
- een uitklapmenu te gebruiken dat wel met het toetsenbord werkt, uitleg en voorbeelden in een blogpost over toegankelijke uitklapmenu's
- door de onbereikbare items uit de subnavigatie te herhalen op de onderliggende pagina's.
Veel voorkomende problemen
- Links binnen een pagina zoals skip links werken in de meeste browsers enkel als je
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.
- Als links geactiveerd worden met behulp van JavaScript, gebruik dan uitsluitend apparaatonafhankelijke event handlers. Meer in dit artikel van webAIM.
- 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
- Om mensen met een motorische beperking te helpen, kan je 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.
Hoe testen
Leg de muis aan de kant en probeer of je alle links kunt bereiken met de tabtoets. Houd de shifttoets ingedrukt terwijl je op tab drukt om een stap terug te keren. Met de entertoets activeer je een link. Wees extra aandachtig bij het testen van de bereikbaarheid van links in uitklapmenu's. Om te kunnen testen op Mac moet je eerst je instellingen controleren.
Reacties
Reageer als eerste