Veel verschillende gebruikers vertrouwen op het toetsenbord om door toepassingen te navigeren, van gebruikers met tijdelijke en permanente motorische beperkingen tot gebruikers die sneltoetsen gebruiken om efficiënter en productiever te zijn. Een logische tabvolgorde is een belangrijk onderdeel van een soepele toetsenbordnavigatie.
Handmatig testen
Om te controleren of de tabvolgorde van uw toepassing logisch is, bladert u door uw pagina. De volgorde waarin de elementen worden gefocust, moet erop gericht zijn de DOM-volgorde te volgen. Over het algemeen moet de focus de leesvolgorde volgen, van links naar rechts, van boven naar beneden op uw pagina.
Meer informatie vindt u in Basisprincipes van toetsenbordtoegang .
Kunt u alle interactieve bedieningselementen op de pagina bereiken? Als dat niet het geval is, moet u mogelijk tabindex gebruiken om de focusbaarheid van deze besturingselementen te verbeteren. De algemene vuistregel is dat elk besturingselement waarmee een gebruiker kan communiceren of input kan geven, focusseerbaar moet zijn en een focusindicator moet weergeven. Als een toetsenbordgebruiker niet kan zien wat de focus is, heeft hij geen enkele mogelijkheid om met de pagina te communiceren.
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 niet alle interactieve besturingselementen op de pagina kunt bereiken, is de eerste oplossing het vervangen van aangepaste besturingselementen door gestandaardiseerde HTML-alternatieven. Vervang bijvoorbeeld een <div> die als een knop fungeert, door <button> . Het gebruik van ingebouwde HTML-elementen kan de toegankelijkheid van uw site aanzienlijk verbeteren en uw werklast aanzienlijk verminderen.
Als u aangepaste interactieve componenten bouwt zonder gestandaardiseerd HTML-equivalent, gebruikt u het tabindex attribuut om ervoor te zorgen dat ze via het toetsenbord toegankelijk zijn. Bijvoorbeeld:
<div tabindex="0">Focus me with the TAB key</div>
Meer informatie vindt u in Focus beheren met tabindex .
Bronnen
Broncode voor De pagina heeft een logische tabvolgorde -audit