Fokus mit Tabindex steuern

Rob Dodson

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.

Hinweis : Verwenden Sie nach Möglichkeit ein integriertes HTML-Element, anstatt eine eigene benutzerdefinierte Version zu erstellen. <button> lässt sich beispielsweise sehr einfach gestalten und verfügt bereits über vollständige Tastaturunterstützung. So müssen Sie nicht mehr tabindex verwalten oder Semantik mit ARIA hinzufügen.

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.

Warnung : Wenn keine Fokusanzeige zu sehen ist, wurde sie möglicherweise vom CSS-Code ausgeblendet. Suchen Sie nach Stilen, in denen :focus { outline: none; } erwähnt wird. Weitere Informationen dazu, wie Sie dieses Problem beheben, finden Sie in diesem Leitfaden.

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.

Achtung : inert-Polyfill ist experimentell und funktioniert möglicherweise nicht in allen Fällen wie erwartet. Vor der Verwendung in der Produktion sorgfältig testen.

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>

Hinweis: Neugierig, wofür diese role=""-Attribute sind? Sie können damit die Semantik eines Elements ändern, damit es von einem Screenreader richtig vorgelesen wird. Weitere Informationen finden Sie in unserem Leitfaden zu den Screenreader-Grundlagen.

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.