Tabindex verwenden

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

Die Standardtab-Reihenfolge, die durch die DOM-Position semantischer HTML-Elemente vorgegeben wird, ist praktisch. Es kann jedoch vorkommen, dass Sie die Tab-Reihenfolge ändern müssen. Das Verschieben von Elementen im HTML-Code ist ideal, aber möglicherweise nicht durchführbar. In diesen Fällen können Sie das HTML-Attribut tabindex verwenden, um die Tab-Position eines Elements explizit festzulegen.

tabindex kann auf jedes Element angewendet werden. Das ist jedoch nicht unbedingt für jedes Element sinnvoll. Es kann eine Reihe von Ganzzahlwerten annehmen. Mit tabindex können Sie eine explizite Reihenfolge für fokussierbare Seitenelemente festlegen, 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.

Das gilt insbesondere für Elemente, die keine Eingabe erfordern, wie Überschriften, Bilder oder Artikeltitel. Wenn möglich, sollten Sie Ihren Quellcode so anordnen, dass die DOM-Sequenz eine logische Tabulatorreihenfolge ergibt. Wenn Sie tabindex verwenden, beschränken Sie es auf benutzerdefinierte interaktive Steuerelemente wie Schaltflächen, Tabs, Drop-down-Listen und Textfelder, also Elemente, bei denen der Nutzer möglicherweise eine Eingabe erwartet.

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.

Fokus auf Seitenebene verwalten

Manchmal ist tabindex für eine reibungslose Nutzererfahrung erforderlich. Beispiel: Sie erstellen eine robuste Einzelseite mit verschiedenen Inhaltsbereichen, auf der nicht alle Inhalte gleichzeitig sichtbar sind. 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. Bei 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 Steuerungsebene verwalten, z. B. bei benutzerdefinierten Komponenten.

Das select-Element kann beispielsweise den Fokus erhalten. Wenn Sie sich dort befinden, können Sie mit den Pfeiltasten zusätzliche auswählbare Optionen aufrufen. Wenn Sie ein benutzerdefiniertes select-Element erstellen, ist es wichtig, dieses Verhalten zu replizieren, damit Tastaturnutzer weiterhin mit dem Steuerelement interagieren können.

Es kann schwierig sein, zu wissen, welche Tastaturfunktionen implementiert werden sollen. Im Leitfaden Accessible Rich Internet Applications (ARIA) Authoring Practices finden Sie eine Liste der Komponententypen und der unterstützten Tastaturaktionen.

Vielleicht arbeiten Sie an benutzerdefinierten Elementen, die einer Gruppe von Optionsfeldern ähneln, aber ein einzigartiges Erscheinungsbild und Verhalten haben.

<radio-group>
    <radio-button>Water</radio-button>
    <radio-button>Coffee</radio-button>
    <radio-button>Tea</radio-button>
    <radio-button>Cola</radio-button>
    <radio-button>Ginger Ale</radio-button>
</radio-group>

Informationen dazu, welche Tastaturunterstützung erforderlich ist, finden Sie im ARIA Authoring Practices Guide. Abschnitt 2 enthält eine Liste mit Designmustern, darunter eine Tabelle mit Merkmalen für Optionsfelder, die der vorhandenen Komponente entspricht, die Ihrem neuen Element am ehesten entspricht.

Eines der gängigen Tastaturverhalten, das unterstützt werden sollte, sind die Aufwärts-, Abwärts-, Links- und Rechtspfeiltasten. Um dieses Verhalten der neuen Komponente hinzuzufügen, verwenden wir eine Technik namens roving tabindex.

Beim roving tabindex wird tabindex für alle untergeordneten Elemente außer dem aktuell aktiven auf -1 gesetzt.

<radio-group>
  <radio-button tabindex="0">Water</radio-button>
  <radio-button tabindex="-1">Coffee</radio-button>
  <radio-button tabindex="-1">Tea</radio-button>
  <radio-button tabindex="-1">Cola</radio-button>
  <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

Die Komponente verwendet einen Tastaturereignis-Listener, um zu ermitteln, welche Taste der Nutzer drückt. Wenn dies geschieht, wird der tabindex des zuvor fokussierten untergeordneten Elements auf -1 gesetzt, der tabindex des zu fokussierenden untergeordneten Elements auf 0 und die Fokusmethode wird für das Element aufgerufen.

<radio-group>
    <!-- Assuming the user pressed the down arrow, we'll focus the next available child -->
    <radio-button tabindex="-1">Water</radio-button>
    <radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
    <radio-button tabindex="-1">Tea</radio-button>
    <radio-button tabindex="-1">Cola</radio-button>
    <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

Wenn der Nutzer das letzte (oder erste, je nachdem, in welche Richtung er den Fokus verschiebt) untergeordnete Element erreicht, wird der Fokus wieder auf das erste (oder letzte) untergeordnete Element verschoben.

Probieren Sie das folgende Beispiel aus. Sehen Sie sich das Element in den DevTools an, um zu beobachten, wie sich der Tabindex von einem Optionsfeld zum nächsten bewegt.

Modale Fenster und Tastaturfallen

Es ist am besten, den Fokus nicht manuell zu verwalten, da dies zu komplizierten Situationen führen kann. Ein Beispiel ist ein Widget zur automatischen Vervollständigung, das versucht, den Fokus zu verwalten und das Tab-Verhalten zu erfassen, aber den Nutzer daran hindert, es zu verlassen, bis es abgeschlossen ist. Dies wird als Tastaturfalle bezeichnet und kann für den Nutzer sehr frustrierend sein.

In Abschnitt 2.1.2 der WCAG wird festgelegt, dass der Tastaturfokus niemals auf ein bestimmtes Seitenelement beschränkt oder dort eingeschlossen werden darf. Der Nutzer muss alle Seitenelemente nur über die Tastatur erreichen und bedienen können.

Die Ausnahme von dieser Regel sind Modalfenster. Sie sollten jedoch weiterhin vermeiden, tabindex beim Erstellen eines Modals zu verwenden. Mit inert können Sie dafür sorgen, dass Nutzer nicht versehentlich mit einem Element interagieren (eine absichtliche Tastaturfalle). Verwenden Sie das Element <dialog>, das standardmäßig inaktiv ist, um ein Modal für Nutzer zu erstellen und gleichzeitig Klicks und Tabs außerhalb des Modals zu blockieren. So kann sich der Nutzer auf eine erforderliche Auswahl konzentrieren.