Het implementeren van een logische tabvolgorde is een belangrijk onderdeel van het bieden van een soepele toetsenbordnavigatie aan uw gebruikers. Schermlezers en andere ondersteunende technologieën navigeren door de pagina in DOM-volgorde. De informatiestroom moet zinvol zijn.
Handmatig testen
Om te controleren of de tabvolgorde van uw toepassing logisch is, bladert u door uw pagina. Over het algemeen moet de focus de leesvolgorde volgen, van links naar rechts, van boven naar beneden op uw pagina.
Er zijn twee belangrijke ideeën waarmee u rekening moet houden bij het beoordelen van uw tabbladvolgorde:
- Zijn de elementen in de DOM in een logische volgorde gerangschikt?
- Wordt de inhoud buiten het scherm correct verborgen voor navigatie?
Let op eventuele sprongen in de navigatie die schokkend lijken. Let ook op eventuele sprongen buiten het scherm, waarbij tabben u naar inhoud brengt die niet bedoeld is om zichtbaar te zijn.
Meer informatie vindt u in Basisprincipes van toetsenbordtoegang .
Hoe te repareren
Als de focusvolgorde verkeerd lijkt, moet u de elementen in de DOM opnieuw rangschikken om de tabvolgorde natuurlijker te maken.
Als u CSS hebt gebruikt om elementen visueel te verplaatsen, zullen gebruikers van ondersteunende technologie een onzinnige navigatie ervaren. In plaats van CSS te gebruiken, verplaatst u het element naar een eerdere positie in de DOM.
Als inhoud buiten het scherm nog steeds toegankelijk is via toetsenbordbediening, kunt u overwegen deze te verwijderen met tabindex="-1" .
Meer informatie vindt u in Focus beheren met tabindex .
Bronnen
Broncode voor visuele bestelling op de pagina volgt DOM-bestellingscontrole