Viele verschiedene Nutzer verlassen sich auf die Tastatur, um in Anwendungen zu navigieren, von Nutzern mit vorübergehenden und dauerhaften motorischen Einschränkungen bis hin zu Nutzern, die Tastenkombinationen verwenden, um effizienter und produktiver zu sein. Eine logische TAB-Reihenfolge ist wichtig, um eine reibungslose Navigation über die Tastatur zu ermöglichen.
Manuelles Testen
Versuchen Sie, mit der Tabulatortaste durch die Seite zu navigieren, um zu prüfen, ob die TAB-Reihenfolge Ihrer Anwendung logisch ist. Die Reihenfolge, in der Elemente fokussiert werden, sollte der DOM-Reihenfolge entsprechen. Im Allgemeinen sollte der Fokus der Lesereihenfolge entsprechen, also von links nach rechts, vom oberen zum unteren Rand der Seite.
Können Sie auf alle interaktiven Steuerelemente auf der Seite zugreifen?
Ist dies nicht der Fall, musst du eventuell tabindex verwenden, um die Fokussierbarkeit dieser Steuerelemente zu verbessern.
Als Faustregel gilt: Alle Steuerelemente, mit denen der Nutzer interagieren oder die er eingeben kann, muss fokussierbar sein und eine Fokusanzeige anzeigen.
Wenn Tastaturnutzer den Fokus nicht sehen, haben sie keine Möglichkeit, mit der Seite zu interagieren.
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 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 <div>, das wie eine Schaltfläche aussieht, durch <button>.
Die Verwendung integrierter HTML-Elemente kann die Zugänglichkeit Ihrer Website erheblich verbessern und Ihren Arbeitsaufwand erheblich reduzieren.
Wenn Sie benutzerdefinierte interaktive Komponenten ohne standardisierte HTML-Entsprechungen erstellen, verwenden Sie das Attribut tabindex, um sicherzustellen, dass sie über die Tastatur zugänglich sind.
Beispiel:
<div tabindex="0">Focus me with the TAB key</div>
Weitere Informationen finden Sie unter Fokus mit Tabindex steuern.
Ressourcen
Quellcode für die Prüfung Die Seite weist eine logische TAB-Reihenfolge auf