Für Standard-HTML-Elemente wie <button> oder <input> sind Tastaturbedienungselemente integriert und sollten 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 erreichen.
Füge tabindex nur interaktiven Inhalten hinzu. Selbst wenn Inhalte wichtig sind, z. B. ein Schlüsselbild, können Nutzer des Screenreaders sie verstehen, ohne den Fokus zu verschleiern.
Was ist tabindex?
Wenn Sie die standardmäßige TAB-Reihenfolge von integrierten Elementen ändern möchten, können Sie das HTML-Attribut tabindex verwenden, um die Tab-Position eines Elements explizit festzulegen.
tabindex kann auf jedes Element angewendet werden, sollte aber nur auf interaktive Elemente angewendet werden und verwendet einen Bereich von Ganzzahlwerten. Mit tabindex können Sie eine explizite Reihenfolge für fokussierbare Seitenelemente festlegen, ansonsten nicht fokussierbare Elemente in die Tab-Reihenfolge einfügen und Elemente aus der TAB-Reihenfolge entfernen. Beispiel:
tabindex="0": Fügt ein Element in die natürliche TAB-Reihenfolge ein. Das Element lässt sich durch Drücken der Tabulatortaste fokussieren, das Element lässt sich durch Aufrufen der Methode focus() fokussieren.
tabindex="-1": Entfernt ein Element aus der natürlichen TAB-Reihenfolge, aber das Element kann weiterhin durch Aufrufen seiner focus()-Methode fokussiert werden.
tabindex="5": Wenn ein Tabindex größer als 0 ist, wird dieses Element am Anfang der natürlichen Tabreihenfolge platziert. Wenn es mehrere Elemente mit einem Tabindex größer als 0 gibt, beginnt die TAB-Reihenfolge vom niedrigsten Wert, der größer als null ist, und arbeitet nach oben. Die Verwendung eines Tabindex, der größer als 0 ist, wird als Antimuster betrachtet.
Sicherstellen, dass die Steuerelemente per Tastatur zugänglich sind
Ein Tool wie Lighthouse eignet sich hervorragend zur automatischen Erkennung bestimmter Probleme mit der Barrierefreiheit. Einige Tests müssen jedoch manuell von einem Menschen durchgeführt werden.
Drücke die Tab-Taste, um durch deine Website zu navigieren. Können Sie alle interaktiven Steuerelemente
auf der Seite erreichen? Falls nicht, müssen Sie möglicherweise tabindex verwenden, um die Fokussierung dieser Steuerelemente zu verbessern.
Fokus auf Seitenebene verwalten
Manchmal hilft tabindex dabei, eine nahtlose User Experience zu schaffen. Das ist beispielsweise der Fall, wenn Sie eine umfangreiche einzelne Seite mit unterschiedlichen Inhaltsbereichen erstellen, bei denen einige Inhalte an verschiedenen Stellen beim Seitenaufbau ausgeblendet werden. Das kann bedeuten, dass die sichtbaren Inhalte durch Navigationslinks geändert werden, ohne dass die Seite aktualisiert werden muss.
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. Dadurch wird sichergestellt, dass der Inhalt nicht
in der natürlichen Tab-Reihenfolge angezeigt wird. Diese Technik, die als Fokusverwaltung bezeichnet wird, synchronisiert den vom Nutzer wahrgenommenen Kontext mit den visuellen Inhalten der Website.
Fokus in Komponenten verwalten
In einigen Fällen müssen Sie den Fokus auch auf Steuerelementebene verwalten, z. B. mit benutzerdefinierten Elementen.
Es kann schwierig sein, zu wissen, welche Tastaturfunktionen zu implementieren sind. Im Leitfaden Accessible Rich Internet Applications (ARIA) Authoring Praactices werden Komponententypen und unterstützte Tastaturaktionen aufgelistet.
Ein 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. Es kann jedoch weiterhin durch Aufrufen der zugehörigen focus()-Methode hervorgehoben werden.
Das Anwenden von tabindex="-1" auf ein Element hat keinen Einfluss auf die untergeordneten Elemente. Wenn sie sich naturgemäß in der Tab-Reihenfolge befinden oder aufgrund eines tabindex-Werts vorhanden sind, bleiben sie in der Tab-Reihenfolge.
Wenn Sie ein Element und alle untergeordneten Elemente aus der TAB-Reihenfolge entfernen möchten, können Sie den inert-Polyfill des WICG verwenden.
Der Polyfill emuliert das Verhalten eines vorgeschlagenen inert-Attributs, das 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 der natürlichen Tab-Reihenfolge gesprungen. Wenn es mehrere Elemente mit einer tabindex größer 0 gibt, beginnt die Tab-Reihenfolge vom niedrigsten Wert, der größer als null ist, und arbeitet sich nach oben fort.
Die Verwendung eines tabindex größer als 0 wird als Antimuster betrachtet, da Screenreader in der DOM- und nicht in der TAB-Reihenfolge auf der Seite navigieren. Wenn ein Element früher in der Tab-Reihenfolge erscheinen soll, sollte es an eine frühere Stelle im DOM verschoben werden.
Mit Lighthouse können Sie Elemente mit einem tabindex > 0 identifizieren. Führen Sie das Audit der Barrierefreiheit aus (Lighthouse > Optionen > Bedienungshilfen) und suchen Sie nach den Ergebnissen der Prüfung „Kein Element hat einen [tabindex]-Wert größer als 0“.
"tabindex" verwenden
Wenn Sie eine komplexe Komponente erstellen, müssen Sie möglicherweise über den Fokus hinaus zusätzliche Tastaturunterstützung hinzufügen. Verwende nach Möglichkeit das integrierte select-Element. Es ist fokussierbar und bietet zusätzliche auswählbare Optionen über die Pfeiltasten.
Um ähnliche Funktionen in Ihren eigenen Komponenten zu implementieren, können Sie eine Technik verwenden, die als „roving tabindex“ bezeichnet wird. Für das Roving von Tabindex wird tabindex für alle untergeordneten Elemente mit Ausnahme des derzeit aktiven Elements auf -1 gesetzt. Die Komponente verwendet dann einen Tastaturereignis-Listener, um zu ermitteln, welche Taste der Nutzer gedrückt hat.
In diesem Fall setzt die Komponente die tabindex des zuvor fokussierten untergeordneten Elements auf -1, setzt das tabindex des untergeordneten Elements auf 0 und ruft dafür die Methode focus() auf.
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 Art von Tastaturunterstützung Ihre benutzerdefinierten Komponenten möglicherweise benötigen, können Sie die Informationen unter ARIA Authoring Practices 1.1 lesen. In diesem Leitfaden sind gängige UI-Muster aufgeführt. Außerdem wird erläutert, welche Schlüssel von den Komponenten unterstützt werden sollten.