Interactieve bedieningselementen kunnen via het toetsenbord worden gefocust

Gepubliceerd: 2 mei 2019

Controleer handmatig of alle aangepaste besturingselementen met het toetsenbord focusseerbaar zijn en een focusindicator weergeven. De volgorde waarin elementen focus krijgen, moet zoveel mogelijk de DOM-volgorde volgen. Als u niet zeker weet welke elementen focus moeten krijgen, raadpleeg dan de module over focus in de cursus 'Learn Accessibility' op web.dev.

Hoe handmatig testen

Om te testen of het aangepaste besturingselement focusseerbaar is en een focusindicator weergeeft, begint u met het navigeren door uw site met de tabtoets. Gebruik TAB (of SHIFT + TAB ) om tussen besturingselementen te schakelen en gebruik de pijltjes toetsen, ENTER en SPACE om hun waarden te wijzigen (zie ook Basisprincipes van toetsenbordtoegang ):

Kun je alle interactieve elementen op de pagina bereiken? Heeft elk interactief element een focusindicator?

Hoe los ik dit op?

Als je niet met de tabtoets door alle elementen op een pagina kunt navigeren, moet je mogelijk tabindex gebruiken om de focusseerbaarheid van die elementen te verbeteren.

Om een ​​aangepast besturingselement focusseerbaar te maken, voegt u het element van het aangepaste besturingselement in de normale tabvolgorde in met behulp van tabindex="0" (zie ook Focussen van besturingselementen met tabindex ). Bijvoorbeeld:

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

Mogelijk moet u ook de juiste ARIA-rollen toevoegen aan de aangepaste besturingselementen. Zie Aangepaste besturingselementen hebben ARIA-rollen .

Als je geen focusindicator ziet, kun je overwegen om :focus te gebruiken om altijd een focusindicator weer te geven. Ongeacht of je de muis of het toetsenbord gebruikt om ernaartoe te tabben, de focusindicator van de knop ziet er altijd hetzelfde uit (zie ook Focusstijl ).

Waarom dit belangrijk is

Voor gebruikers die geen muis kunnen of willen gebruiken, is toetsenbordnavigatie de belangrijkste manier om alles op het scherm te bereiken. Een goede toetsenbordervaring hangt af van een logische tabvolgorde en duidelijk herkenbare focusstijlen. Als een toetsenbordgebruiker niet kan zien of begrijpen wat er in focus is, kan hij of zij niet met de pagina interageren.

Leer meer over toegankelijkheid in Meer informatie over toegankelijkheid .

Bronnen