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 eine benutzerdefinierten interaktiven Elementen, können Sie das erwartete Nutzerverhalten erzeugen, indem Sie tabindex wird hinzugefügt.

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 standardmäßige TAB-Reihenfolge des integrierten Elemente enthalten, können Sie mit dem HTML-Attribut tabindex explizit ein an der Tab-Position des Elements.

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.

Sicherstellen, dass die Steuerelemente per Tastatur zugänglich sind

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

Drücke die Tab-Taste, um durch deine Website zu navigieren. Können Sie interaktive Steuerelemente auf der Seite? Ist dies nicht der Fall, müssen Sie tabindex um die Fokussierung dieser Steuerelemente zu verbessern.

Fokus auf Seitenebene verwalten

Manchmal hilft tabindex dabei, eine nahtlose User Experience zu schaffen. Beispiel: wenn ihr eine ausdrucksstarke einzelne Seite mit unterschiedlichen Inhaltsbereichen erstellst, werden die Inhalte an verschiedenen Punkten des Seitenaufbaus ausgeblendet. Das könnte bedeuten, Navigationslinks ändern den sichtbaren Inhalt, ohne dass die Seite aktualisiert wird.

Identifizieren Sie in diesem Fall den ausgewählten Inhaltsbereich und weisen Sie ihm das Attribut tabindex -1 und rufen Sie die zugehörige focus-Methode auf. Dadurch wird sichergestellt, dass die Inhalte nicht die natürliche TAB-Reihenfolge. Mit dieser Technik, die als Fokusmanagement bezeichnet wird, den vom Nutzer wahrgenommenen Kontext synchron mit den visuellen Inhalten der Website.

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 zu implementieren sind. Die Accessible Rich Internet Applications (ARIA) Authoring Best Practices enthält Komponententypen und die unterstützten Tastaturaktionen.

Element in die TAB-Reihenfolge einfügen

Fügen Sie mithilfe von 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 Tab-Taste oder rufen Sie die focus()-Methode 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, durch Aufrufen der focus()-Methode.

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. Der Polyfill emuliert das Verhalten eines vorgeschlagenen inert-Attributs. und verhindert, dass Elemente von Hilfstechnologien ausgewählt oder gelesen werden.

Auf tabindex > 0 verzichten

Ist tabindex größer als 0, wird das Element an den Anfang des natürlichen Tabs verschoben Reihenfolge. 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 größer als 0 wird als Antimuster betrachtet, da navigieren Screenreader in der DOM-Reihenfolge auf der Seite, nicht in der TAB-Reihenfolge. Wenn Sie eine in der TAB-Reihenfolge früher verfügbar sein soll, sollte es an eine frühere Position verschoben werden. im DOM.

In Lighthouse können Sie Elemente mit einem tabindex identifizieren. > 0. 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. Verwende 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 eine Tastatur Event-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 nicht sicher sind, welche Tastatur Ihre benutzerdefinierten Komponenten finden Sie in den 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.