Fokus mit Tabindex steuern

Rob Dodson

Alexandra Klepper

Standard-HTML-Elemente wie <button> oder <input> sind mit der Tastatur barrierefrei. und sollte 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, etwa ein Schlüsselbild, verstehen Nutzer eines Screenreaders, fokussiert werden.

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 und verwendet einen Bereich von ganzzahligen Werten. Mit tabindex können Sie eine explizite Reihenfolge für fokussierbare Seitenelemente festlegen ein ansonsten nicht fokussierbares Element in die TAB-Reihenfolge einfügen und Elemente entfernen aus der TAB-Reihenfolge. Beispiel:

tabindex="0": Fügt ein Element in die natürliche TAB-Reihenfolge ein. Das Element kann wird durch Drücken der Tabulatortaste fokussiert. Das Element lässt sich durch Aufrufen des ihre focus()-Methode.

tabindex="-1": Entfernt ein Element aus der natürlichen TAB-Reihenfolge, aber das Element weiterhin durch Aufrufen der focus()-Methode fokussiert werden kann.

tabindex="5": Wenn ein Tabindex größer als 0 ist, wird dieses Element in den Vordergrund gestellt. der natürlichen TAB-Reihenfolge. Wenn es mehrere Elemente mit einem als 0, beginnt die TAB-Reihenfolge vom niedrigsten Wert, der größer als null ist und arbeitet sich nach oben vor. Die Verwendung eines Tabindex-Werts, der größer als 0 ist, wird als Antimuster.

Steuerelemente müssen per Tastatur zugänglich sein

Ein Tool wie Lighthouse erkennt Barrierefreiheit sehr gut automatisch. Einige Tests müssen jedoch manuell von einem Mitarbeiter durchgeführt werden.

Drücken Sie die Taste Tab, um sich auf Ihrer Website zu bewegen. Können Sie interaktive Steuerelemente auf der Seite? Andernfalls müssen Sie möglicherweise tabindex verwenden, um die Fokussierbarkeit dieser Steuerelemente zu verbessern.

Fokus auf Seitenebene verwalten

Manchmal hilft tabindex dabei, eine nahtlose User Experience zu schaffen. Beispiel: wenn ihr eine solide einzelne Seite mit unterschiedlichen Inhaltsbereichen erstellt, werden die Inhalte an verschiedenen Punkten des Seitenaufbaus ausgeblendet. Das könnte bedeuten, Navigationslinks ändern den sichtbaren Inhalt, 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 Kontrollebene verwalten, z. B. mit Benutzerdefinierte Elemente:

Es kann schwierig sein, zu wissen, welche Tastaturfunktionen implementiert werden sollten. Die Accessible Rich Internet Applications (ARIA) Authoring Best Practices enthält die Komponententypen und die unterstützten Tastaturaktionen.

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.

Das Anwenden von tabindex="-1" auf ein Element wirkt sich nicht auf seine untergeordneten Elemente aus. wenn sie sich natürlich in der TAB-Reihenfolge befinden, oder aufgrund eines tabindex-Werts. bleiben sie in der TAB-Reihenfolge. Um ein Element und alle untergeordneten Elemente aus der TAB-Reihenfolge zu entfernen, verwenden Sie inert-Polyfill des WICG. 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 es mehrere Elemente mit einer tabindex größer als 0 gibt, wird der Tab beginnt mit dem niedrigsten Wert größer als 0 und arbeitet sich nach oben vor.

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 Sie eine in der TAB-Reihenfolge früher verfügbar sein soll, sollte es an eine frühere Position verschoben werden. im DOM.

Mit Lighthouse können Sie Elemente mit einem tabindex > 0 identifizieren. Führen Sie den Prüfung der Barrierefreiheit (Lighthouse > Optionen > Bedienungshilfen) und suchen Sie nach der Ausgabe von „Kein Element hat einen [tabindex]-Wert größer als 0“ Prüfung.

"tabindex" verwenden

Wenn Sie eine komplexe Komponente erstellen, müssen Sie unter Umständen zusätzliche Tastaturen hinzufügen über den Fokus hinaus. Verwenden Sie nach Möglichkeit das integrierte select-Element. Es ist fokussierbar und ermöglicht über die Pfeiltasten weitere auswählbare Optionen.

Um ähnliche Funktionen in Ihren eigenen Komponenten zu implementieren, können Sie eine bekannte Technik verwenden, als „umherziehende tabindex“. Beim Umwandeln des Tabindex wird tabindex auf -1 für alle untergeordneten Elemente außer dem derzeit aktiven Die Komponente verwendet dann einen Tastatur-Ereignis-Listener, um zu ermitteln, welche Taste der Nutzer gedrückt hat.

In diesem Fall legt die Komponente das tabindex-Element des zuvor fokussierten untergeordneten Elements fest. auf -1, setzt die tabindex des Kindes auf 0 und ruft die Funktion focus() auf -Methode hinzu.

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 sind gängige UI-Muster aufgeführt und es wird ermittelt, welche Schlüssel die Komponenten unterstützen sollen.