Standard-HTML-Elemente wie <button>
oder <input>
sind mit der Tastatur barrierefrei.
und sollte nach Möglichkeit verwendet werden. Wenn Sie jedoch eine
benutzerdefinierten interaktiven Elementen, können Sie das erwartete Nutzerverhalten erzeugen, indem Sie
tabindex
wird hinzugefügt.
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
Füge tabindex
nur interaktiven Inhalten hinzu. Auch wenn Inhalte
wichtig, etwa ein Schlüsselbild, verstehen Nutzer eines Screenreaders,
fokussiert werden.
Was ist tabindex?
Wenn Sie die standardmäßige TAB-Reihenfolge des integrierten
Elemente enthalten, können Sie mit dem HTML-Attribut tabindex
explizit ein
an der Tab-Position des Elements.
tabindex
kann auf jedes Element angewendet werden, sollte aber nur auf
interaktive Elemente und verwendet einen Bereich von ganzzahligen Werten. Mit
tabindex
können Sie eine explizite Reihenfolge für fokussierbare Seitenelemente festlegen
ein ansonsten nicht fokussierbares Element in die TAB-Reihenfolge einfügen und Elemente entfernen
aus der TAB-Reihenfolge. Beispiel:
tabindex="0"
: Fügt ein Element in die natürliche TAB-Reihenfolge ein. Das Element kann
wird durch Drücken der Tabulatortaste fokussiert. Das Element lässt sich durch Aufrufen des
ihre focus()
-Methode.
tabindex="-1"
: Entfernt ein Element aus der natürlichen TAB-Reihenfolge, aber das Element
weiterhin durch Aufrufen der focus()
-Methode fokussiert werden kann.
tabindex="5"
: Wenn ein Tabindex größer als 0
ist, wird dieses Element in den Vordergrund gestellt.
der natürlichen TAB-Reihenfolge. Wenn es mehrere Elemente mit einem
als 0
, beginnt die TAB-Reihenfolge vom niedrigsten Wert, der größer als null ist
und arbeitet sich nach oben vor. Die Verwendung eines Tabindex-Werts, der größer als 0
ist, wird als
Antimuster.
Sicherstellen, dass die Steuerelemente per Tastatur zugänglich sind
Ein Tool wie Lighthouse erkennt Barrierefreiheit sehr gut automatisch. Einige Tests müssen jedoch manuell von einem Mitarbeiter durchgeführt werden.
Drücke die Tab
-Taste, um durch deine Website zu navigieren. Können Sie
interaktive Steuerelemente
auf der Seite? Ist dies nicht der Fall, müssen Sie
tabindex
um die Fokussierung dieser Steuerelemente zu verbessern.
Fokus auf Seitenebene verwalten
Manchmal hilft tabindex
dabei, eine nahtlose User Experience zu schaffen. Beispiel:
wenn ihr eine ausdrucksstarke einzelne Seite mit unterschiedlichen Inhaltsbereichen erstellst,
werden die Inhalte an verschiedenen Punkten des Seitenaufbaus ausgeblendet. Das könnte bedeuten,
Navigationslinks ändern den sichtbaren Inhalt, ohne dass die Seite aktualisiert wird.
Identifizieren Sie in diesem Fall den ausgewählten Inhaltsbereich und weisen Sie ihm das Attribut tabindex
-1
und rufen Sie die zugehörige focus
-Methode auf. Dadurch wird sichergestellt, dass die Inhalte nicht
die natürliche TAB-Reihenfolge. Mit dieser Technik, die als Fokusmanagement bezeichnet wird,
den vom Nutzer wahrgenommenen Kontext synchron mit den visuellen Inhalten der Website.
Fokus in Komponenten verwalten
In einigen Fällen müssen Sie den Fokus auch auf Kontrollebene verwalten, z. B. mit Benutzerdefinierte Elemente:
Es kann schwierig sein, zu wissen, welche Tastaturfunktionen zu implementieren sind. Die Accessible Rich Internet Applications (ARIA) Authoring Best Practices enthält Komponententypen und die unterstützten Tastaturaktionen.
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,
durch Aufrufen der focus()
-Methode.
Das Anwenden von tabindex="-1"
auf ein Element wirkt sich nicht auf seine untergeordneten Elemente aus.
wenn sie sich natürlich in der TAB-Reihenfolge befinden,
oder aufgrund eines tabindex
-Werts.
bleiben sie in der TAB-Reihenfolge.
Um ein Element und alle untergeordneten Elemente aus der TAB-Reihenfolge zu entfernen, verwenden Sie
inert
-Polyfill des WICG.
Der Polyfill emuliert das Verhalten eines vorgeschlagenen inert
-Attributs.
und 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 des natürlichen Tabs verschoben
Reihenfolge. Wenn es mehrere Elemente mit einer tabindex
größer als 0 gibt, wird der Tab
beginnt mit dem niedrigsten Wert größer als 0
und arbeitet sich nach oben vor.
Die Verwendung eines tabindex
größer als 0 wird als Antimuster betrachtet, da
navigieren Screenreader in der DOM-Reihenfolge auf der Seite, nicht in der TAB-Reihenfolge. Wenn Sie eine
in der TAB-Reihenfolge früher verfügbar sein soll, sollte es an eine frühere Position verschoben werden.
im DOM.
In Lighthouse können Sie Elemente mit einem tabindex
identifizieren. > 0. Führen Sie den
Prüfung der Barrierefreiheit (Lighthouse > Optionen > Bedienungshilfen) und suchen Sie nach
der Ausgabe von „Kein Element hat einen [tabindex]
-Wert größer als 0“ Prüfung.
"tabindex
" verwenden
Wenn Sie eine komplexe Komponente erstellen, müssen Sie unter Umständen zusätzliche Tastaturen hinzufügen
über den Fokus hinaus. Verwende nach Möglichkeit das integrierte select
-Element. Es ist
fokussierbar und ermöglicht über die Pfeiltasten weitere auswählbare
Optionen.
Um ähnliche Funktionen in Ihren eigenen Komponenten zu implementieren, können Sie eine bekannte Technik verwenden,
als „umherziehende tabindex
“. Beim Umwandeln des Tabindex wird tabindex
auf -1 für
alle untergeordneten Elemente außer dem derzeit aktiven Die Komponente verwendet dann eine Tastatur
Event-Listener, um zu ermitteln, welche Taste der Nutzer gedrückt hat.
In diesem Fall legt die Komponente das tabindex
-Element des zuvor fokussierten untergeordneten Elements fest.
auf -1, setzt die tabindex
des Kindes auf 0 und ruft die Funktion focus()
auf
-Methode hinzu.
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 Tastatur Ihre benutzerdefinierten Komponenten finden Sie in den ARIA Authoring Practices 1.1. In diesem Leitfaden sind gängige UI-Muster aufgeführt und es wird ermittelt, welche Schlüssel die Komponenten unterstützen sollen.