Das  Globale Attribut tabindex gibt an, ob sein Element fokussiert werden kann, ob und an welcher Stelle es an der sequentiellen Tastaturnavigation beteiligt ist (normalerweise mit der Tabulatortaste, daher der Name).

Es akzeptiert einen Integer als Wert der zu unterschiedlichen Ergebnissen führt, abhängig von diesen Werten:

  • Ein negativer Wert (normalerweise tabindex="-1") bedeutet, dass das Element fokussierbar, jedoch nicht durch die sequenzielle Tastaturnavigation erreichbar sein sollte. Er ist meistens hilfreich um barrierefreie Widgets mit JavaScript zu erstellen.

Dies ist hilfreich, wenn Inhalte außerhalb des Bildschirms vorhanden sind, welche zu einem bestimmten Ereignis in Erscheinung treten. Es ist nicht möglich ein Element mit der Tastatur zu fokussieren, das einen negativen tabindex hat. Jedoch ist es möglich, es mittels der focus() Methode aufzurufen.

  • tabindex="0" bedeutet, dass das Element mittels der sequenziellen Tastaturnavigation fokussierbar ist, wobei die Aufrufreihenfolge von der Quellreihenfolge des Dokuments definiert ist

Die CSS-Positionierung wirkt sich nicht auf die Tab-Reihenfolge aus. Es wird sich nur die visuelle Reihenfolge der Elemente ändern. Tab-Reihenfolge entspricht der Quellreihenfolge! 

Vermeiden Sie die Verwendung von tabindex-Werten größer als 0. Dies erschwert es Benutzern, die auf assistive Technologie angewiesen sind, durch Seiteninhalte zu Navigieren und sie zu Bedienen.

  • A positive value means the element should be focusable in sequential keyboard navigation, with its order defined by the value of the number. That is, tabindex="4" would be focused before tabindex="5", but after tabindex="3". If multiple elements share the same positive tabindex value, their order relative to each other follows their position in the document source.

  • Ein positiver Wert bedeutet, dass das Element in der sequenziellen Tastaturnavigation fokussierbar sein kann, wobei seine Reihenfolge durch den Wert der Zahl definiert wird. tabindex="4" würde also vor tabindex="5", aber nach tabindex="3" fokussiert werden. Wenn mehrere Elemente den gleichen positiven tabindex-Wert haben, folgt ihre Reihenfolge relativ zu ihrer Position in der Dokumentquelle.

Es wird nicht empfohlen, den Elementen positive Werte zu geben. Am Ende springt der Fokus zwischen den Elementen und es wird verwirrend, die tabindex-Attributwerte einzelner Elemente zu manipulieren. Empfehlenswert ist, sie in einer geeigneten DOM-Sequenz zu schreiben.

Wenn das tabindex-Attribut für ein <div> festgelegt wird, kann der untergeordnete Inhalt nicht mit den Pfeiltasten gescrollt werden. Außer, der tabindex wurde für den Inhalt festgelegt. Folgendes fiddle hilft beim Verstehen der Scrolleffekte des tabindex.

Hinweis: Der maximale Wert für tabindex ist 32767. Wenn er nicht spezifiziert ist, wird der Standardwert von 0 angenommen.

Bedenken zur Barrierefreiheit

 

Vermeiden Sie die Verwendung des tabindex-Attributs in Verbindung mit nichtinteraktiven Inhalten, um Elemente durch die Tastatureingabe interaktiv fokussierbar zu machen, wie etwa zum Beispiel die Verwendung eines <div> Elements, um eine Schaltfläche zu erzeugen, anstelle des <button> Elements.

Interaktive Komponenten, die mit nichtinteraktiven Elementen erstellt wurden, gelangen nicht in der accessibility tree für Eingabehilfen aufgeführt. Dadurch wird verhindert, dass assistive Technologien zu ihnen navigieren und sie manipulieren können. Der Inhalt sollte semantisch mit interaktiven Elementen (<a>, <button>, <details>, <input>, <select>, <textarea>, etc.) beschrieben werden. Diese Elemente verfügen über integrierte Rollen und Zustände, die den Status der Zugänglichkeit mitteilen, die andernfalls durch ARIA verwaltet werden müsste.

Spezifikationen

Spezifikation Status Kommentar
HTML Living Standard
Die Definition von 'tabindex' in dieser Spezifikation.
Lebender Standard No change from latest snapshot, HTML 5.1.
HTML 5.1
Die Definition von 'tabindex' in dieser Spezifikation.
Empfehlung Snapshot of HTML Living Standard, no change from HTML5.
HTML5
Die Definition von 'tabindex' in dieser Spezifikation.
Empfehlung Snapshot of HTML Living Standard. From HTML 4.01 Specification, the attribute is now supported on all elements (global attributes).
HTML 4.01 Specification
Die Definition von 'tabindex' in dieser Spezifikation.
Empfehlung Only supported on <a>, <area>, <button>, <object>, <select>, and <textarea>.

Browserkompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
tabindexChrome Vollständige Unterstützung JaEdge Vollständige Unterstützung JaFirefox Vollständige Unterstützung JaIE Vollständige Unterstützung JaOpera Vollständige Unterstützung JaSafari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung JaOpera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung JaSamsung Internet Android Vollständige Unterstützung Ja

Legende

Vollständige Unterstützung  
Vollständige Unterstützung

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: vssn
Zuletzt aktualisiert von: vssn,