Fokus mit Tabindex steuern

Rob Dodson

Alexandra Klepper

Für Standard-HTML-Elemente wie <button> oder <input> sind Tastaturbedienungselemente integriert 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üge tabindex nur interaktiven Inhalten hinzu. Auch wenn Inhalte wichtig sind, z. B. ein wichtiges Bild, können Nutzer von Screenreadern sie verstehen, ohne den Fokus darauf zu legen.

Was ist „tabindex“?

Wenn Sie die standardmäßige TAB-Reihenfolge von integrierten Elementen ändern möchten, 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 verwendet einen Bereich von Ganzzahlwerten. 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": Hiermit wird ein Element in die natürliche Tab-Reihenfolge eingefügt. Das Element kann durch Drücken der Tabulatortaste oder durch Aufrufen der Methode focus() den Fokus erhalten.

tabindex="-1": Entfernt ein Element aus der natürlichen Tab-Reihenfolge. Das Element kann jedoch weiterhin durch Aufrufen der focus()-Methode fokussiert werden.

tabindex="5": Ein Tabindex, der größer als 0 ist, bringt das Element an den Anfang der natürlichen Tabulatorreihenfolge. Wenn es mehrere Elemente mit einem Tabindex größer als 0 gibt, beginnt die TAB-Reihenfolge vom niedrigsten Wert, der größer als null ist, und arbeitet nach oben. Die Verwendung eines Tabindex, der größer als 0 ist, gilt als Anti-Pattern.

Steuerelemente müssen per Tastatur zugänglich sein

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.

Drücken Sie die Taste Tab, um sich auf Ihrer Website zu bewegen. 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 dazu bei, die Nutzerfreundlichkeit zu verbessern. Das ist beispielsweise der Fall, wenn Sie eine robuste einzelne Seite mit verschiedenen Inhaltsbereichen erstellen, bei der einige Inhalte an verschiedenen Stellen beim Laden der Seite ausgeblendet werden. Das kann bedeuten, dass Navigationslinks die sichtbaren Inhalte ändern, ohne dass die Seite aktualisiert wird.

In diesem Fall müssen Sie den ausgewählten Inhaltsbereich identifizieren, ihm die tabindex -1 zuweisen und die Methode focus aufrufen. So wird verhindert, dass die Inhalte in der natürlichen Tab-Reihenfolge angezeigt werden. Diese Technik, die als Fokusverwaltung bezeichnet wird, sorgt dafür, dass der wahrgenommene Kontext des Nutzers mit den visuellen Inhalten der Website übereinstimmt.

Fokus in Komponenten verwalten

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

Es kann schwierig sein, zu wissen, welche Tastaturfunktionen Sie implementieren sollten. Im Leitfaden Accessible Rich Internet Applications (ARIA) Authoring Practices (Praktiken für die Erstellung barrierefreier Rich Internet Applications) werden die Arten von Komponenten und die von ihnen unterstützten Tastaturaktionen aufgeführt.

Element in die Tabulatorreihenfolge einfügen

Fügen Sie mit tabindex="0" ein Element in die natürliche Tab-Reihenfolge ein. Beispiel:

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

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

Element aus der TAB-Reihenfolge 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, es kann aber weiterhin durch Aufrufen der focus()-Methode fokussiert werden.

Wenn Sie tabindex="-1" auf ein Element anwenden, hat das keine Auswirkungen auf die untergeordneten Elemente. Wenn sie sich aufgrund ihrer natürlichen Position oder eines tabindex-Werts in der Tabulatorreihenfolge befinden, bleiben sie dort. Wenn Sie ein Element und alle untergeordneten Elemente aus der TAB-Reihenfolge entfernen möchten, können Sie den inert-Polyfill des WICG verwenden. Die 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 gesetzt. Wenn mehrere Elemente einen tabindex-Wert haben, der größer als 0 ist, beginnt die Tab-Reihenfolge mit dem niedrigsten Wert, der größer als 0 ist, und geht dann nach oben.

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

Mit Lighthouse können Sie Elemente mit einem tabindex > 0 identifizieren. Führen Sie die Prüfung der Barrierefreiheit durch (Lighthouse > Optionen > Barrierefreiheit) und sehen Sie sich die Ergebnisse der Prüfung „Kein Element hat einen [tabindex]-Wert größer als 0“ an.

„tabindex“ verwenden

Wenn Sie eine komplexe Komponente erstellen, müssen Sie möglicherweise zusätzlichen Tastatursupport hinzufügen, der über den Fokus hinausgeht. Verwende nach Möglichkeit das integrierte select-Element. Es kann fokussiert werden und mit den Pfeiltasten können zusätzliche auswählbare Optionen angezeigt werden.

Wenn Sie ähnliche Funktionen in Ihren eigenen Komponenten implementieren möchten, können Sie ein Verfahren namens „Rover-tabindex“ verwenden. Dabei wird tabindex für alle untergeordneten Elemente außer dem aktuell aktiven Element auf -1 gesetzt. Die Komponente verwendet dann einen Tastatur-Ereignis-Listener, um zu ermitteln, welche Taste der Nutzer gedrückt hat.

In diesem Fall setzt die Komponente den Wert tabindex des zuvor fokussierten untergeordneten Elements auf -1, den Wert tabindex des untergeordneten Elements, das fokussiert werden soll, auf 0 und ruft die Methode focus() darauf 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 den Tastaturzugriff

Wenn Sie nicht sicher sind, welche Art von Tastaturunterstützung Ihre benutzerdefinierten Komponenten möglicherweise benötigen, können Sie die Informationen unter ARIA Authoring Practices 1.1 lesen. In diesem Leitfaden werden gängige UI-Muster aufgeführt und angegeben, welche Tasten Ihre Komponenten unterstützen sollten.