Die standardmäßige TAB-Reihenfolge, die durch die DOM-Position semantischen 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 realisierbar. 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. Stattdessen wird ein Bereich von ganzzahligen Werten verwendet. 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.
Dies gilt insbesondere für Elemente, die keine Eingabe sind, wie Header, Bilder oder Artikeltitel. Wenn möglich, sollten Sie den Quellcode so anordnen, dass die DOM-Sequenz eine logische TAB-Reihenfolge bietet. Wenn Sie tabindex verwenden, sollten Sie es auf benutzerdefinierte interaktive Steuerelemente wie Schaltflächen, Tabs, Drop-down-Menüs und Textfelder beschränken, also auf Elemente, für die der Nutzer möglicherweise Eingaben macht.
Füge tabindex nur interaktiven Inhalten hinzu. Selbst wenn wichtige Inhalte wichtig sind, z. B. ein Schlüsselbild, können Nutzer des Screenreaders sie verstehen, ohne den Fokus zu verschleiern.
Fokus auf Seitenebene verwalten
Manchmal ist tabindex für eine nahtlose Nutzererfahrung erforderlich. Dies ist beispielsweise der Fall, wenn Sie eine einzelne Seite mit verschiedenen Inhaltsbereichen erstellen, in denen nicht alle Inhalte gleichzeitig sichtbar sind. Das könnte bedeuten, dass Navigationslinks
den sichtbaren Inhalt ändern, 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. 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 Steuerebene verwalten, z. B. bei benutzerdefinierten Komponenten.
Beispielsweise kann das Element select einen Basisfokus erhalten. Danach können Sie über die Pfeiltasten weitere auswählbare Optionen einblenden.
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 zu implementieren sind. Im Leitfaden Accessible Rich Internet Applications (ARIA) Authoring Praactices werden Komponententypen und unterstützte Tastaturaktionen aufgelistet.
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, einschließlich der Eigenschaftentabelle für Optionsfeldgruppen. Dies ist die vorhandene Komponente, die am ehesten mit dem neuen Element übereinstimmt.
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 derzeit aktiven untergeordneten Bereichs 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 bestimmen, welche Taste der Nutzer drückt. In diesem Fall wird das tabindex des zuvor fokussierten untergeordneten Elements auf -1 gesetzt, das tabindex des untergeordneten Elements auf 0 gesetzt und die Fokusmethode dafür 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 untergeordnete Element erreicht (oder das erste, abhängig von der Richtung, in der der Fokus bewegt wird), wird der Fokus wieder zum ersten (oder letzten) untergeordneten Element verschoben.
Versuchen Sie es mit dem folgenden Beispiel. Überprüfen Sie das Element in den Entwicklertools, um zu beobachten, wie sich der Tabindex von einem Optionsfeld zum nächsten bewegt.
Modalen und Tastaturfallen
Es ist empfehlenswert, den Fokus nicht manuell zu steuern, 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 Tastaturfalle genannt und kann für den Nutzer sehr frustrierend sein.
In Abschnitt 2.1.2 der WCAG ist festgelegt, dass der Tastaturfokus nie auf einem bestimmten Seitenelement fixiert oder darin eingeschlossen werden darf. Der Nutzer sollte nur über die Tastatur zu und von allen Seitenelementen navigieren können.
Die Ausnahme von dieser Regel sind modale Anzeigen. Allerdings sollten Sie beim Erstellen eines modalen Fensters tabindex nicht verwenden. Mit inert können Sie dafür sorgen, dass Nutzer nicht versehentlich mit einem Element interagieren (ein beabsichtigter Tastaturfall). Verwenden Sie das standardmäßig inaktive Element <dialog>, um ein modales Element für Nutzer zu erstellen und gleichzeitig Klicks und Tabs außerhalb des modalen Fensters zu blockieren. So können sich die Nutzenden auf eine erforderliche Auswahl konzentrieren.