Für Standard-HTML-Elemente wie <button> oder <input> sind die Tastatureingaben kostenlos integriert. Wenn Sie benutzerdefinierte interaktive Komponenten erstellen, verwenden Sie jedoch das Attribut tabindex, damit diese per Tastatur zugänglich sind.
Prüfen, ob die Steuerelemente per Tastatur zugänglich sind
Ein Tool wie Lighthouse ist hervorragend dafür geeignet, bestimmte Probleme mit der Barrierefreiheit zu erkennen. Einige Dinge können jedoch nur von einem Menschen getestet werden.
Drücken Sie die Taste Tab, um durch Ihre Website zu navigieren. Können Sie auf alle interaktiven
Steuerelemente auf der Seite zugreifen? Ist dies nicht der Fall, müssen Sie möglicherweise tabindex verwenden, um die Fokussierbarkeit dieser Steuerelemente zu verbessern.
Elemente in die TAB-Reihenfolge einfügen
Fügen Sie ein Element mithilfe von tabindex="0" in die natürliche TAB-Reihenfolge ein. Beispiel:
<div tabindex="0">Focus me with the TAB key</div>
Um ein Element hervorzuheben, drücken Sie die Tab-Taste oder rufen Sie die focus()-Methode des Elements auf.
Ein Element aus der TAB-Reihenfolge entfernen
Mit tabindex="-1" können Sie ein Element entfernen. Beispiel:
<button tabindex="-1">Can't reach me with the TAB key!</button>
Dadurch wird ein Element aus der natürlichen TAB-Reihenfolge entfernt. Es kann jedoch weiterhin durch Aufrufen seiner Methode focus() fokussiert werden.
Das Anwenden von tabindex="-1" auf ein Element hat keine Auswirkungen auf die untergeordneten Elemente. Wenn sie sich von Natur aus in der TAB-Reihenfolge oder aufgrund eines tabindex-Werts befinden, bleiben sie in der TAB-Reihenfolge.
Wenn Sie ein Element und alle untergeordneten Elemente aus der TAB-Reihenfolge entfernen möchten, können Sie den inert-Polyfill der WICG verwenden.
Der Polyfill emuliert das Verhalten eines vorgeschlagenen inert-Attributs, das verhindert, dass Elemente von Hilfstechnologien ausgewählt oder gelesen werden.
Auf tabindex > 0 verzichten
Wenn tabindex größer als 0 ist, wird das Element an den Anfang der natürlichen TAB-Reihenfolge gebracht. Wenn es mehrere Elemente mit einem tabindex größer als 0 gibt, beginnt die TAB-Reihenfolge vom niedrigsten Wert größer als null und geht von oben nach oben vor.
Die Verwendung eines tabindex größer als 0 wird als Anti-Muster betrachtet, da Screenreader die Seite in der DOM-Reihenfolge und nicht in der TAB-Reihenfolge aufrufen. Wenn ein Element früher in der TAB-Reihenfolge angezeigt werden soll, sollten Sie es an eine frühere Position im DOM verschieben.
Mit Lighthouse lassen sich Elemente mit einem tabindex > 0 leicht identifizieren. Führen Sie die Prüfung der Barrierefreiheit (Lighthouse > Optionen > Barrierefreiheit) aus und suchen Sie nach den Ergebnissen der Prüfung „Kein Element hat einen [tabindex]-Wert größer als 0“.
Barrierefreie Komponenten mit „roving tabindex“ erstellen
Wenn Sie eine komplexe Komponente erstellen, müssen Sie möglicherweise zusätzliche Tastaturunterstützung hinzufügen, die über den Fokus hinausgeht. Betrachten Sie das integrierte select-Element. Es ist fokussierbar und Sie können mit den Pfeiltasten zusätzliche Funktionen (auswählbare Optionen) einblenden.
Um ähnliche Funktionen in Ihren eigenen Komponenten zu implementieren, verwenden Sie eine Technik, die als "roving tabindex" bezeichnet wird. Bei der Roving-Tabindex wird tabindex für alle untergeordneten Elemente mit Ausnahme des aktuell aktiven Elements auf -1 gesetzt. Die Komponente verwendet dann einen Tastaturereignis-Listener, um zu ermitteln, welche Taste der Nutzer gedrückt hat.
In diesem Fall setzt die Komponente die tabindex des zuvor fokussierten untergeordneten Elements auf -1, die tabindex des untergeordneten Elements im Fokus des untergeordneten Elements auf 0 und ruft die Methode focus() dafür auf.
Vorher
<div role="toolbar">
<button tabindex="-1">Undo</button>
<button tabindex="0">Redo</button>
<button tabindex="-1">Cut</button>
</div>
Nachher
<div role="toolbar">
<button tabindex="-1">Undo</button>
<button tabindex="-1">Redo</button>
<button tabindex="0">Cut</button>
</div>
AUFGABE: DevSite - Think and Check-Bewertung
Rezepte für den Tastaturzugriff
Wenn Sie sich nicht sicher sind, welche Tastaturunterstützung Ihre benutzerdefinierten Komponenten möglicherweise benötigen, lesen Sie ARIA Authoring Practices 1.1. In diesem praktischen Leitfaden sind gängige UI-Muster aufgeführt und es wird ermittelt, welche Schlüssel Ihre Komponenten unterstützen sollten.