Eine logische TAB-Reihenfolge ist wichtig für eine reibungslose Tastaturnutzung. Screenreader und andere Hilfstechnologien bewegen sich auf der Seite in DOM-Reihenfolge. Der Informationsfluss sollte Sinn ergeben.
Manuelle Tests
Um zu prüfen, ob die Tab-Reihenfolge Ihrer Anwendung logisch ist, wechseln Sie mit der Tabulatortaste durch die Seite. Im Allgemeinen sollte der Fokus der Lesereihenfolge folgen, also von oben nach unten auf der Seite. In den meisten Sprachen wird von links nach rechts gelesen. In einigen Sprachen wie Arabisch und Hebräisch wird von rechts nach links gelesen.
Es gibt zwei Hauptideen, die Sie bei der Bewertung der TAB-Reihenfolge beachten sollten:
- Sind die Elemente im DOM in einer logischen Reihenfolge angeordnet?
- Sind Inhalte außerhalb des Bildschirms korrekt aus der Navigation ausgeblendet?
Achten Sie auf unnötige Navigationssprünge. Achten Sie auch auf Sprünge außerhalb des Bildschirms, bei denen Sie durch Drücken der Tabulatortaste zu Inhalten gelangen, die nicht sichtbar sein sollen.
Weitere Informationen zu den Grundlagen des Tastaturzugriffs
Lösung
Wenn die Fokusreihenfolge nicht stimmt, ordnen Sie die Elemente im DOM so an, dass die TAB-Reihenfolge natürlicher wird.
Verwenden Sie CSS nicht, um Elemente visuell neu zu positionieren, da Nutzer von Hilfstechnologien sonst eine sinnlose Navigation erleben. Statt CSS zu verwenden, verschieben Sie das Element an eine frühere Position im DOM.
Wenn Inhalte außerhalb des Bildschirms weiterhin über die Tastatur gesteuert werden können, sollten Sie sie mit tabindex="-1" entfernen.
Weitere Informationen finden Sie unter Fokus mit Tabindex steuern.
Ressourcen
Quellcode für die Prüfung Visuelle Reihenfolge auf der Seite folgt der DOM-Reihenfolge