Testen van toegankelijkheid voor en met toetsenbord
Testen met een toetsenbord is een essentieel onderdeel van het testen van de toegankelijkheid van je website. Maar waar moet je op letten? Welke toetsen op je toetsenbord moet je gebruiken om te testen? Op deze pagina leg ik het allemaal uit.
Waar je op moet letten
- Elk interactief element kan worden bereikt.
- links
- knoppen
- controls van formulieren (invoervelden, keuzelijsten, radio buttons, checkboxen)
- dingen die getriggerd worden door
:hoverzoals tooltips - widgets en custom componenten, bijv. een date picker
- Elk interactief element krijgt een focusindicator.
- Navigatievolgorde moet logisch en intuïtief zijn.
- Bij modals en overlays:
- Deze moeten de volledige toetsenbordfocus hebben en behouden. Dat wil zeggen dat enkel de interactieve elementen in het venster bedienbaar zijn en focus krijgen. Als het venster wordt gesloten, dan pas is de achterliggende website weer bedienbaar met het toetsenbord.
- Wanneer het venster sluit, moet de focus meestal teruggaan naar het element dat het venster opende.
- Bij custom componenten en widgets worden de ARIA Authoring Practices gerespecteerd. En dan vooral de aanwijzingen die over bediening met toetsenbord gaan.
- Controleer de broncode op het gebruik van
tabindex. - Controleer dat event handlers in JavaScript device-onafhankelijk zijn.
💡 Opmerking: Een link is alleen toegankelijk voor toetsenbordgebruikers of wordt aan screenreaders gepresenteerd als een link wanneer het een href-attribuut heeft dat niet leeg is. Een link zonder href-attribuut of zonder ingevuld href-attribuut mogen niet worden gebruikt voor links.
De toetsen die je dient te gebruiken
De volgende tabel bevat veel van de meest voorkomende online interacties en de toetsen die daar gebruikt voor dienen te worden.
| Element of component | Te gebruiken toets(en) |
|---|---|
| Navigeren naar interactieve elementen |
|
| Link | Enter om de link te openen. |
| Knop | Enter of Spatiebalk om de knop te activeren. |
| Selectievakjes (checkboxen) | Spatiebalk om een vakje wel of niet aan te kruisen. |
| Keuzerondjes (radio buttons) |
|
| Keuzelijst (dropdown) |
|
| Automatisch aanvullen (autocomplete) |
|
| Dialogs, modals en overlays | Esc om te sluiten. |
Conclusie
Je moet met een toetsenbord de volgende interactieve elementen kunnen bedienen:
- links
- knoppen
- controls van formulieren (tekstvelden, keuzelijsten, radio buttons, checkboxen, …)
- dingen die getriggerd worden door
:hoverzoals tooltips - widgets, bijv. een date picker
Als je een element niet kan bedienen, is dit een inbreuk op succescriterium 2.1.1 Toetsenbord in de Richtlijnen voor Toegankelijkheid van Webcontent (WCAG).
👉️ Opmerkingen? Vragen? Iets onduidelijk of onvolledig? Of vond je het helemaal geweldig? Stuur me een mailtje met je feedback!