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 kannst du das HTML-Attribut tabindex verwenden, um die Tabposition eines Elements explizit festzulegen.

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 Tab-Reihenfolge eingefügt. Das Element kann durch Drücken der Tabulatortaste oder durch Aufrufen der Methode focus() den Fokus erhalten.

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 einen Tabindex haben, der größer als 0 ist, 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 nahtlose 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 bedeutet, dass Navigationslinks den sichtbaren Inhalt ändern können, ohne dass die Seite aktualisiert wird.

Identifizieren Sie in diesem Fall den ausgewählten Inhaltsbereich, weisen Sie ihm ein tabindex von -1 zu und rufen Sie die zugehörige focus-Methode auf. So wird sichergestellt, dass der Inhalt nicht in der natürlichen Tab-Reihenfolge erscheint. 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 du ein benutzerdefiniertes select-Element erstellst, ist es wichtig, dieses Verhalten zu replizieren, damit Tastaturnutzer weiterhin mit deinem 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 auf ihre ganz eigene Art und Weise aussehen und funktionieren.

<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 zur erforderlichen Tastaturunterstützung finden Sie im ARIA-Leitfaden zu Authoring-Practices. Abschnitt 2 enthält eine Liste von Designmustern, darunter eine Tabelle mit den Merkmalen von Optionsgruppen, die der vorhandenen Komponente entspricht, die Ihrem neuen Element am ehesten entspricht.

Eines der gängigen Tastaturfunktionen, die unterstützt werden sollten, sind die Aufwärts-, Abwärts-, Links- und Rechtspfeiltasten. Um der neuen Komponente dieses Verhalten hinzuzufügen, verwenden wir die Methode roving tabindex.

Für den Roving-Tabindex wird tabindex für alle untergeordneten Elemente mit Ausnahme des aktuell aktiven Elements 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. Überprüfen Sie das Element in den Entwicklertools, um zu beobachten, wie sich der Tabindex von einem Optionsfeld 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. Beispiel: Ein Widget für die automatische Vervollständigung, das versucht, den Fokus zu verwalten und das Verhalten des Tabs zu erfassen, aber den Nutzer daran hindert, es zu verlassen, bis der Vorgang abgeschlossen 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. Der Nutzer sollte nur über die Tastatur zu und von allen Seitenelementen navigieren können.

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