Controleer handmatig of alle aangepaste bedieningselementen via het toetsenbord kunnen worden gefocust en een focusindicator worden weergegeven. De volgorde waarin de elementen worden gefocust, moet erop gericht zijn de DOM-volgorde te volgen. Als u niet zeker weet welke elementen aandacht moeten krijgen, bekijk dan de focusmodule in de cursus Learn Accessibility op web.dev.
Handmatig testen
Om te testen of het aangepaste besturingselement focusbaar is en een focusindicator weergeeft, bladert u eerst door uw site. Gebruik TAB
(of SHIFT + TAB
) om tussen de besturingselementen te schakelen, en gebruik de pijltoetsen en ENTER
en SPACE
om hun waarden te manipuleren (zie ook Basisprincipes van toetsenbordtoegang ):
Kunt u alle interactieve bedieningselementen op de pagina bereiken? Is er een focusindicator op elke interactieve bediening?
Hoe te repareren
Als u niet door alle elementen op een pagina kunt bladeren, moet u mogelijk tabindex
gebruiken om de focus van deze besturingselementen te verbeteren.
Om een aangepast besturingselement focusseerbaar te maken, voegt u het aangepaste besturingselement in de natuurlijke tabvolgorde in met behulp van tabindex="0"
(zie ook Focus besturen 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 u geen focusindicator ziet, kunt u overwegen om :focus
te gebruiken om altijd een focusindicator weer te geven. Ongeacht of u een muis of een toetsenbord gebruikt om ernaar toe te gaan, de focusindicator van de knop ziet er altijd hetzelfde uit (zie ook Stijlfocus ).
Waarom dit ertoe doet
Voor gebruikers die geen muis kunnen of willen gebruiken, is toetsenbordnavigatie het belangrijkste middel om alles op een scherm te bereiken. Goede toetsenbordervaringen zijn afhankelijk van een logische tabvolgorde en waarneembare focusstijlen. Als een toetsenbordgebruiker niet kan zien of leren wat er in focus is, kan hij of zij niet met de pagina communiceren.
Meer informatie vindt u in Een toegankelijkheidsbeoordeling uitvoeren .
Bronnen
- De broncode voor interactieve besturingselementen is een audit die via het toetsenbord kan worden gefocust .
- Sommige elementen hebben een
[tabindex]
-waarde groter dan0
. - Gebruik semantische HTML voor eenvoudige toetsenbordoverwinningen.