Tabindex verwenden

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

Die Standardtabulatorreihenfolge, die sich aus der DOM-Position semantisch korrekter HTML-Elemente ergibt, ist praktisch. Es kann jedoch vorkommen, dass Sie die Tabulatorreihenfolge ändern müssen. Das Verschieben von Elementen im HTML-Code ist ideal, aber möglicherweise nicht möglich. In diesen Fällen können Sie mit dem HTML-Attribut tabindex die Tabposition eines Elements explizit festlegen.

tabindex kann auf jedes Element angewendet werden, ist aber nicht unbedingt für jedes Element nützlich. 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 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 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.

Das gilt insbesondere für Elemente, die keine Eingaben sind, z. B. Überschriften, Bilder oder Artikeltitel. Achten Sie nach Möglichkeit darauf, dass die DOM-Sequenz eine logische Tab-Reihenfolge aufweist. Wenn Sie tabindex verwenden, beschränken Sie sie auf benutzerdefinierte interaktive Steuerelemente wie Schaltflächen, Tabs, Drop-down-Listen und Textfelder, also Elemente, in die der Nutzer Eingaben vornehmen kann.

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.

Fokus auf Seitenebene verwalten

Manchmal ist tabindex für eine reibungslose Nutzererfahrung erforderlich. Das ist beispielsweise der Fall, wenn Sie eine robuste Startseite mit verschiedenen Inhaltsbereichen erstellen, bei der nicht alle Inhalte gleichzeitig sichtbar sind. Das kann bedeuten, dass Navigationslinks den sichtbaren Inhalt ä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 Steuerebene verwalten, z. B. bei benutzerdefinierten Komponenten.

Das select-Element kann beispielsweise den grundlegenden Fokus erhalten. Anschließend können Sie mit den Pfeiltasten weitere auswählbare Optionen aufrufen. Wenn Sie ein benutzerdefiniertes select-Element erstellen, ist es wichtig, dieses Verhalten zu replizieren, damit Nutzer mit Tastatur weiterhin mit Ihrem Steuerelement interagieren können.

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.

Vielleicht arbeiten Sie an benutzerdefinierten Elementen, die einer Reihe von Optionsfeldern ähneln, aber mit einem individuellen Erscheinungsbild und Verhalten.

<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>

Welche Tastaturunterstützung erforderlich ist, können Sie im Leitfaden zu ARIA-Autorisierungspraktiken nachlesen. Abschnitt 2 enthält eine Liste von Designmustern, darunter eine Tabelle mit den Merkmalen von Radiogruppen, die vorhandene Komponente, die Ihrem neuen Element am ehesten entspricht.

Eine der gängigen Tastaturfunktionen, die unterstützt werden sollten, sind die Pfeiltasten (auf/ab/links/rechts). Um der neuen Komponente dieses Verhalten hinzuzufügen, verwenden wir ein Verfahren namens Roaming Tabindex.

Bei einem aktiven Tabindex wird tabindex für alle untergeordneten Elemente außer dem aktuell aktiven Element 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 Tastatur-Ereignis-Listener, um zu ermitteln, welche Taste der Nutzer drückt. In diesem Fall wird das tabindex des zuvor fokussierten untergeordneten Elements auf -1 und das tabindex des untergeordneten Elements, das fokussiert werden soll, auf 0 gesetzt. Anschließend wird die Fokusmethode 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 nach Richtung, in die er den Fokus bewegt) untergeordnete Element erreicht, springt der Fokus zum ersten (oder letzten) untergeordneten Element zurück.

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

Modale Dialogfelder und Tastaturfallen

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

Abschnitt 2.1.2 der WCAG besagt, dass der Tastaturfokus niemals auf einem bestimmten Seitenelement fixiert oder eingefroren sein darf. Nutzer sollten alle Seitenelemente nur mit der Tastatur aufrufen und verlassen können.

Die einzige Ausnahme sind Modalfenster. Wir empfehlen jedoch, tabindex beim Erstellen eines modalen Dialogfelds nicht zu verwenden. Mit inert können Sie dafür sorgen, dass Nutzer nicht versehentlich mit einem Element interagieren können (eine vorsätzliche Tastaturfalle). Mit dem standardmäßig inaktiven Element <dialog> können Sie ein Modal für Nutzer erstellen und gleichzeitig Klicks und Tabs außerhalb des Modals blockieren. So kann sich der Nutzer auf eine erforderliche Auswahl konzentrieren.