Viele verschiedene Nutzer nutzen die Tastatur, um in Anwendungen zu navigieren, von Nutzern mit vorübergehenden und dauerhaften motorischen Beeinträchtigungen bis hin zu Nutzern, die Tastenkombinationen verwenden, um effizienter und produktiver zu sein. Eine logische Tabulatorreihenfolge ist ein wichtiger Bestandteil einer reibungslosen Tastaturnavigation.
Manuelles Testen
Um zu prüfen, ob die Tab-Reihenfolge Ihrer Anwendung logisch ist, wechseln Sie mit der Tabulatortaste durch die Seite. Die Reihenfolge, in der Elemente fokussiert werden, sollte der DOM-Reihenfolge folgen. Im Allgemeinen sollte der Fokus der Lesereihenfolge folgen, also von links nach rechts und von oben nach unten auf der Seite.
Weitere Informationen zu den Grundlagen des Tastaturzugriffs
Können Sie alle interaktiven Steuerelemente auf der Seite erreichen?
Andernfalls müssen Sie möglicherweise tabindex verwenden, um die Fokussierbarkeit dieser Steuerelemente zu verbessern.
Als Faustregel gilt, dass jedes Steuerelement, mit dem Nutzer interagieren oder Eingaben machen können, fokussierbar sein und eine Fokusanzeige haben sollte.
Wenn ein Nutzer mit Tastatur nicht sehen kann, was gerade fokussiert ist, kann er nicht mit der Seite interagieren.
Lösung
Wenn die Fokusreihenfolge falsch erscheint, sollten Sie die Elemente im DOM neu anordnen, um die Tabulatorreihenfolge natürlicher zu gestalten.
Wenn Sie nicht auf alle interaktiven Steuerelemente auf der Seite zugreifen können, sollten Sie als Erstes benutzerdefinierte Steuerelemente durch standardisierte HTML-Alternativen ersetzen.
Ersetzen Sie beispielsweise ein <div>, das als Schaltfläche dient, durch <button>.
Mithilfe von integrierten HTML-Elementen lässt sich die Barrierefreiheit Ihrer Website erheblich verbessern und Ihre Arbeitslast deutlich reduzieren.
Wenn Sie benutzerdefinierte interaktive Komponenten erstellen, die kein standardisiertes HTML-Äquivalent haben, verwenden Sie das Attribut tabindex, um sicherzustellen, dass sie per Tastatur zugänglich sind.
Beispiel:
<div tabindex="0">Focus me with the TAB key</div>
Weitere Informationen finden Sie unter Tabindex zum Steuern des Fokus.
Ressourcen
Quellcode für die Prüfung Die Seite hat eine logische Tabulatorreihenfolge