Fokus mit Tabindex steuern

bookmark_border Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Rob Dodson

Alexandra Klepper

Standard-HTML-Elemente wie <button> oder <input> sind standardmäßig über die Tastatur zugänglich und sollten nach Möglichkeit verwendet werden. Wenn Sie jedoch benutzerdefinierte interaktive Elemente erstellen müssen, können Sie das erwartete Nutzerverhalten durch Hinzufügen von tabindex simulieren.

Fügen Sie tabindex nur interaktiven Inhalten hinzu. Auch wenn Inhalte wichtig sind, z. B. ein Schlüsselbild, können Nutzer von Screenreadern sie ohne Fokus verstehen.

Was ist „tabindex“?

Wenn Sie die standardmäßige Tab-Reihenfolge ändern möchten, die von integrierten Elementen bereitgestellt wird, können Sie das HTML-Attribut tabindex verwenden, um die Tab-Position eines Elements explizit festzulegen.

tabindex kann auf jedes Element angewendet werden, sollte aber nur auf interaktive Elemente angewendet werden und kann eine Reihe von Ganzzahlwerten annehmen. Mit tabindex können Sie eine explizite Reihenfolge für fokussierbare Seitenelemente angeben, ein ansonsten nicht fokussierbares Element in die Tabulatorreihenfolge einfügen und Elemente aus der Tabulatorreihenfolge entfernen. Beispiel:

tabindex="0": Fügt ein Element in die natürliche Tabulatorreihenfolge ein. Das Element kann durch Drücken der Tabulatortaste und durch Aufrufen der focus()-Methode des Elements fokussiert werden.

tabindex="-1": Entfernt ein Element aus der natürlichen Tab-Reihenfolge. Das Element kann aber weiterhin fokussiert werden, indem seine focus()-Methode aufgerufen wird.

tabindex="5": Jeder Tabindex, der größer als 0 ist, verschiebt das Element an den Anfang der natürlichen Tab-Reihenfolge. Wenn es mehrere Elemente mit einem Tabindex größer als 0 gibt, beginnt die Tab-Reihenfolge mit dem niedrigsten Wert, der größer als null ist, und wird dann aufwärts fortgesetzt. Die Verwendung eines tabindex-Werts, der größer als 0 ist, gilt als Anti-Pattern.

Sorgen Sie dafür, dass Steuerelemente über die Tastatur zugänglich sind.

Mit einem Tool wie Lighthouse lassen sich bestimmte Probleme mit der Barrierefreiheit automatisch erkennen. Einige Tests müssen jedoch manuell von einem Menschen durchgeführt werden.

Versuchen Sie, mit der Tab-Taste auf Ihrer Website zu navigieren. 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.

Fokus auf Seitenebene verwalten

Manchmal trägt tabindex zu einer reibungslosen Nutzererfahrung bei. Angenommen, Sie erstellen eine robuste Einzelseite mit verschiedenen Inhaltsbereichen, wobei einige Inhalte zu unterschiedlichen Zeitpunkten des Seitenaufrufs ausgeblendet werden. Das kann bedeuten, dass Navigationslinks den sichtbaren Inhalt ändern, ohne dass die Seite aktualisiert wird.

Identifizieren Sie in diesem Fall den ausgewählten Inhaltsbereich, geben Sie ihm einen tabindex von -1 und rufen Sie seine focus-Methode auf. So wird dafür gesorgt, dass die Inhalte nicht in der natürlichen Tab-Reihenfolge angezeigt werden. Mit dieser Technik, die als Fokusverwaltung bezeichnet wird, wird der vom Nutzer wahrgenommene Kontext mit den visuellen Inhalten der Website synchronisiert.

Fokus in Komponenten verwalten

In einigen Fällen müssen Sie den Fokus auch auf Steuerelementebene verwalten, z. B. mit benutzerdefinierten Elementen.

Es kann schwierig sein, zu wissen, welche Tastaturfunktionen implementiert werden sollen. Im Leitfaden Accessible Rich Internet Applications (ARIA) Authoring Practices sind die verschiedenen Komponententypen und die unterstützten Tastaturaktionen aufgeführt.

Element in die Tabulatorreihenfolge einfügen

Mit tabindex="0" können Sie ein Element in die natürliche Tab-Reihenfolge einfügen. Beispiel:

<div tabindex="0">Focus me with the TAB key</div>

Wenn Sie ein Element fokussieren möchten, drücken Sie die Taste Tab oder rufen Sie die Methode focus() des Elements auf.

Element aus der Tabulatorreihenfolge entfernen

Entfernen Sie ein Element mit tabindex="-1". Beispiel:

<button tabindex="-1">Can't reach me with the TAB key!</button>

Dadurch wird ein Element aus der natürlichen Tab-Reihenfolge entfernt. Das Element kann aber weiterhin fokussiert werden, indem seine focus()-Methode aufgerufen wird.

Wenn Sie tabindex="-1" auf ein Element anwenden, hat das keine Auswirkungen auf die untergeordneten Elemente. Wenn sie von Natur aus oder aufgrund eines tabindex-Werts in der Tabulatorreihenfolge enthalten sind, bleiben sie in der Tabulatorreihenfolge. Wenn Sie ein Element und alle untergeordneten Elemente aus der Tab-Reihenfolge entfernen möchten, können Sie das inert-Polyfill des WICG verwenden. Das Polyfill emuliert das Verhalten eines vorgeschlagenen inert-Attributs, das verhindert, dass Elemente von Hilfstechnologien ausgewählt oder gelesen werden.

Auf tabindex > 0 verzichten

Bei einem tabindex-Wert größer als 0 wird das Element an den Anfang der natürlichen Tabulatorreihenfolge verschoben. Wenn es mehrere Elemente mit einem tabindex-Wert größer als 0 gibt, beginnt die Tabulatorreihenfolge mit dem niedrigsten Wert größer als 0 und wird dann aufsteigend fortgesetzt.

Die Verwendung eines tabindex-Werts größer als 0 gilt als Antimuster, da Screenreader die Seite in der DOM-Reihenfolge und nicht in der Tab-Reihenfolge durchlaufen. Wenn ein Element in der Tab-Reihenfolge früher erscheinen soll, muss es im DOM an eine frühere Stelle verschoben werden.

Mit Lighthouse können Sie Elemente mit einem tabindex > 0 identifizieren. Führen Sie den Bedienungshilfe-Audit aus (Lighthouse > Optionen > Bedienungshilfe) und sehen Sie sich die Ergebnisse des Audits „Kein Element hat einen [tabindex]-Wert größer als 0“ an.

„Roving tabindex“ verwenden

Wenn Sie eine komplexe Komponente entwickeln, müssen Sie möglicherweise zusätzliche Tastaturunterstützung über den Fokus hinaus hinzufügen. Verwenden Sie nach Möglichkeit das integrierte select-Element. Es ist fokussierbar und ermöglicht es, mit den Pfeiltasten zusätzliche auswählbare Optionen aufzurufen.

Wenn Sie ähnliche Funktionen in Ihren eigenen Komponenten implementieren möchten, können Sie eine Technik namens „roving tabindex“ verwenden. Dabei 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 legt die Komponente den tabindex-Wert des zuvor fokussierten untergeordneten Elements auf -1 fest, den tabindex-Wert des untergeordneten Elements, das fokussiert werden soll, auf 0 und ruft die Methode focus() für dieses Element 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>

Rezepte für Tastaturzugriff

Wenn Sie sich nicht sicher sind, welche Tastaturunterstützung Ihre benutzerdefinierten Komponenten benötigen, können Sie die ARIA Authoring Practices 1.1 konsultieren. In diesem Leitfaden werden gängige UI-Muster aufgeführt und die Tasten angegeben, die von Ihren Komponenten unterstützt werden sollten.