Die Implementierung einer logischen TAB-Reihenfolge ist ein wichtiger Bestandteil einer reibungslosen Tastaturnavigation. Screenreader und andere assistive Technologien navigieren in der DOM-Reihenfolge auf der Seite. Der Informationsfluss sollte Sinn ergeben.
Manuelles Testen
Versuchen Sie, mit der Tabulatortaste durch die Seite zu navigieren, um zu prüfen, ob die TAB-Reihenfolge Ihrer Anwendung logisch ist. Im Allgemeinen sollte der Fokus der Lesereihenfolge entsprechen, also von links nach rechts, vom oberen zum unteren Rand der Seite.
Es gibt zwei Hauptideen, die Sie bei der Beurteilung Ihrer TAB-Reihenfolge berücksichtigen sollten:
- Sind die Elemente im DOM in einer logischen Reihenfolge angeordnet?
- Werden nicht sichtbare Inhalte korrekt aus der Navigation ausgeblendet?
Beachten Sie eventuelle Sprünge in der Navigation, die irritierend erscheinen. Achten Sie auch auf Sprünge außerhalb des Bildschirms, durch die Sie mit der Tabulatortaste zu nicht sichtbaren Inhalten gelangen.
Lösung
Wenn die Fokusreihenfolge falsch erscheint, sollten Sie die Elemente im DOM neu anordnen, um die TAB-Reihenfolge natürlicher zu gestalten.
Wenn Sie CSS verwendet haben, um Elemente visuell neu zu positionieren, wird Nutzern von Hilfstechnologien eine unverständliche Navigation angezeigt. Anstatt CSS zu verwenden, verschieben Sie das Element an eine frühere Position im DOM.
Wenn nicht sichtbare Inhalte weiterhin über die Tastatursteuerung zugänglich sind, empfiehlt es sich, sie mit tabindex="-1" zu entfernen.
Weitere Informationen finden Sie unter Fokus mit Tabindex steuern.
Ressourcen
Quellcode für die visuelle Reihenfolge auf der Seite folgt der Prüfung der DOM-Reihenfolge