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 TAB-Reihenfolge ist ein wichtiger Bestandteil für eine reibungslose Bedienung über die Tastatur.
Manuelle Tests
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 auf alle interaktiven Steuerelemente auf der Seite zugreifen?
Andernfalls müssen Sie möglicherweise tabindex verwenden, um die Fokussierbarkeit dieser Steuerelemente zu verbessern.
Als Faustregel gilt: Jede Steuerung, mit der Nutzende interagieren oder Eingaben machen können
sollte fokussierbar sein und eine Fokusanzeige anzeigen.
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,
Die erste Korrektur besteht darin, die benutzerdefinierten Steuerelemente durch standardisierte HTML-Alternativen zu 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 TAB-Reihenfolge