Fokus mit Tabindex steuern

Rob Dodson

Alexandra Klepper

Standard-HTML-Elemente wie <button> oder <input> sind für die Bedienung per Tastatur optimiert 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 Inhalten hinzu, die interaktiv sind. 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 Standardtabreihenfolge von integrierten Elementen ändern möchten, können Sie mit dem HTML-Attribut tabindex die Tabposition eines Elements explizit festlegen.

tabindex kann auf jedes Element angewendet werden, sollte aber nur auf interaktive Elemente angewendet werden. Es 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": Hiermit wird ein Element in die natürliche Tabulatorreihenfolge eingefügt. Das Element kann durch Drücken der Tabulatortaste oder durch Aufrufen der Methode focus() hervorgehoben werden.

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

tabindex="5": Ein Tabindex, der größer als 0 ist, bringt das Element an den Anfang der natürlichen Tabulatorreihenfolge. Wenn mehrere Elemente mit einem Tabindex größer als 0 vorhanden sind, beginnt die Tabulatorreihenfolge mit dem niedrigsten Wert, der größer als null ist, und geht dann 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.

Elemente 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 die inert-Polyfill-Funktion 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 größer als 0 haben, beginnt die Tab-Reihenfolge mit dem niedrigsten Wert größer als null 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. Verwenden Sie nach Möglichkeit das integrierte select-Element. Es kann fokussiert werden und mit den Pfeiltasten können weitere 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 das tabindex des zuvor fokussierten untergeordneten Elements auf -1, das tabindex des zu fokussierenden untergeordneten Elements auf 0 und ruft die focus()-Methode 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 sich nicht sicher sind, welche Tastaturunterstützung Ihre benutzerdefinierten Komponenten benötigen, lesen Sie den Artikel ARIA Authoring Practices 1.1. In diesem Leitfaden werden gängige UI-Muster aufgeführt und angegeben, welche Tasten Ihre Komponenten unterstützen sollten.