Toetsenbord

Niet iedereen kan een muis gebruiken. Daarom moet alle functionaliteit van een website ook bedienbaar zijn met het toetsenbord. In de praktijk komt het er op neer dat je met gebruik van slechts een paar toetsen, een hele site moet kunnen bedienen:

TAB: hiermee spring je langs alle elementen die focus kunnen ontvangen zoals knoppen, links of invoervelden
Pijltjestoetsen: hiermee navigeer je door radiobuttons en dropdowns en beweeg je sliders
Enter: hiermee activeer je knoppen en links
Spatie: hiermee vink je checkboxen aan en uit of activeer je knoppen

Let er op dat er geen toetsenbordval is op de pagina, bijvoorbeeld als je wel met het toetsenbord een kalender kunt openen, maar er vervolgens alleen nog maar uitkomt door met de muis elders te klikken.

Logische volgorde

Let er op dat de tabvolgorde logisch is. In principe van boven naar beneden en van links naar rechts. Dit is met name van belang als er kolommen op een pagina gebruikt worden.

Skiplink

Het eerste element dat met de TAB bereikt moet worden is de ' skiplink'. Dit is een link die direct naar de hoofdinhoud van de pagina gaat. Hiermee slaat de link alle menu-items over die meestal bovenaan de pagina staan. Dat scheelt een hoop extra geklik voor mensen die afhankelijk zijn van navigatie via het toetsenbord.

Je bent vrij om extra skiplinks in te bouwen, bijvoorbeeld om direct naar de zoekfunctionaliteit te gaan.

Zichtbaarheid van de focus

Als je het navigeren met het toetsenbord goed hebt ingericht, is het daarna belangrijk dat de focus op de interactieve elementen goed zichtbaar is. Dit is ook voor ziende mensen fijn omdat dan duidelijk is waar je je op de pagina bevindt. Het heeft de voorkeur niet te vertrouwen op de standaard focuskleuren van een browser. Door de kleurinstelling van de pagina kan het zomaar zijn dat hierdoor de focus niet voldoende zichtbaar is.

De focus moet altijd zichtbaar zijn! Let op voldoende contrast met de tekst, maar ook met de kleur van de achtergrond. In de strengere succescriteria van WCAG 2.2 zal hier extra aandacht voor zijn. Beter overdrijven via dan een heel subtiel dun lijntje. IJe kunt via het CSS bepalen hoe de focusrand er uit gaat zien.