Een logische tabvolgorde is belangrijk voor een soepele toetsenbordervaring van 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 boven naar beneden op uw pagina. In de meeste talen beweegt de leesvolgorde van links naar rechts. In sommige talen, zoals in het Arabisch en het Hebreeuws, gaat de leesvolgorde van rechts naar links.
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 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 op te lossen
Als de focusvolgorde verkeerd lijkt, herschikt u de elementen in de DOM om de tabvolgorde natuurlijker te maken.
Vermijd het gebruik van CSS om elementen visueel te verplaatsen, aangezien gebruikers van ondersteunende technologie een onzinnige navigatie zullen 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