Interactieve bedieningselementen zijn focusbaar met het toetsenbord

Gepubliceerd: 2 mei 2019

Controleer handmatig of alle aangepaste bedieningselementen de toetsenbordfocus kunnen krijgen en een focusindicator tonen. De volgorde waarin elementen worden gefocust, moet de DOM-volgorde volgen. Als je niet zeker weet welke elementen de focus moeten krijgen, ga je naar de focusmodule in de cursus Toegankelijkheid leren op web.dev.

Handmatig testen

Als je wilt testen of het aangepaste bedieningselement focusbaar is en een focusindicator toont, begin je door met de Tab-toets door je site te navigeren. Gebruik TAB (of SHIFT + TAB) om tussen besturingselementen te navigeren en gebruik de pijltoetsen en ENTER en SPACE om de waarden te wijzigen (zie ook Basisprincipes van toetsenbordtoegang):

Kun je alle interactieve bedieningselementen op de pagina bereiken? Is er een focusindicator voor elk interactief bedieningselement?

Oplossing

Als je niet door alle elementen op een pagina kunt tabben, moet je misschien tabindex gebruiken om de focusbaarheid van die bedieningselementen te verbeteren.

Als je een aangepast bedieningselement focusseerbaar wilt maken, voeg je het aangepaste bedieningselement in de natuurlijke tabvolgorde in met tabindex="0" (zie ook Focus op bedieningselementen met tabindex). Voorbeeld:

<div tabindex="0">Focus me with the TAB key</div>

Misschien moet je ook de juiste ARIA-rollen toevoegen aan de aangepaste bedieningselementen. Ga naar Aangepaste bedieningselementen hebben ARIA-rollen.

Als er geen focusindicator wordt getoond, kunt u :focus gebruiken om altijd een focusindicator te tonen. Of je nu een muis of een toetsenbord gebruikt om naar de knop te gaan, de focusindicator van de knop ziet er altijd hetzelfde uit (zie ook Focus opmaken).

Waarom dit belangrijk is

Voor gebruikers die geen muis kunnen of willen gebruiken, is toetsenbordnavigatie de belangrijkste manier om alles op een scherm te bereiken. Een goede toetsenbordfunctionaliteit is gebaseerd op een logische tabvolgorde en herkenbare focusstijlen. Als een toetsenbordgebruiker niet kan zien of weet wat de focus is, kan die niet met de pagina werken.

Ga naar Learn Accessibility voor meer informatie over toegankelijkheid.

Bronnen