Dastabindexglobale Attribut ermöglicht es Entwicklern, HTML-Elemente fokussierbar zu machen, sie sequenziell fokussierbar zu machen oder zu verhindern (normalerweise mit derTab-Taste, daher der Name) und deren relative Reihenfolge für die sequentielle Fokusnavigation festzulegen.

Probieren Sie es aus

<p>Click anywhere in this pane, then try tabbing through the elements.</p><label>First in tab order:<input type="text" /></label><div tabindex="0">Tabbable due to tabindex.</div><div>Not tabbable: no tabindex.</div><label>Third in tab order:<input type="text" /></label>

p {  font-style: italic;  font-weight: bold;}div,label {  display: block;  letter-spacing: 0.5px;  margin-bottom: 1rem;}div:focus {  font-weight: bold;}

Es akzeptiert einen ganzzahligen Wert, wobei die unterschiedlichen Ergebnisse von dem Wert der Ganzzahl abhängen:

• Einnegativer Wert (der genaue negative Wert spielt eigentlich keine Rolle, normalerweisetabindex="-1") bedeutet, dass das Element nicht über die sequentielle Tastaturnavigation erreichbar ist.

  Hinweis:>tabindex="-1" kann für Elemente nützlich sein, die nicht direkt mit derTab-Taste navigiert werden sollen, aber den Tastaturfokus erhalten müssen. Beispiele hierfür sind ein modales Fenster außerhalb des Bildschirms, das fokussiert werden soll, wenn es sichtbar wird, oder eine Fehlermeldung zur Formularübermittlung, die sofort fokussiert werden soll, wenn ein fehlerhaftes Formular übermittelt wird.

• tabindex="0" bedeutet, dass das Element in der sequentiellen Tastaturnavigation fokussierbar sein soll, nach allen positiventabindex-Werten. Die Fokus-Navigationsreihenfolge dieser Elemente wird durch ihre Reihenfolge im Dokumentenquelltext definiert.

• Einpositiver Wert bedeutet, dass das Element in der sequentiellen Tastaturnavigation fokussierbar sein soll, wobei die Reihenfolge durch den Zahlenwert des Werts definiert wird. Das bedeutet,tabindex="4" wird vortabindex="5" undtabindex="0" fokussiert, aber nachtabindex="3". Wenn mehrere Elemente denselben positiventabindex-Wert haben, folgt ihre Reihenfolge relativ zueinander ihrer Position im Dokumentenquelltext. Der maximale Wert fürtabindex ist 32767.

• Wenn dastabindex-Attribut ohne festgelegten Wert enthalten ist, bestimmt der Benutzeragent, ob das Element fokussierbar ist.

  Warnung:Es wird empfohlen, nur0 und-1 alstabindex-Werte zu verwenden. Vermeiden Sie die Verwendung vontabindex-Werten größer als0 und CSS-Eigenschaften, die die Reihenfolge fokussierbarer HTML-Elemente ändern können (Ordnen von Flex-Elementen). Dies erschwert es Menschen, die auf die Navigation über die Tastatur oder unterstützende Technologie angewiesen sind, die Inhalte der Seite zu navigieren und zu bedienen. Stattdessen sollten Sie das Dokument mit den Elementen in einer logischen Reihenfolge schreiben.

Einige fokussierbare HTML-Elemente haben einen standardmäßigentabindex-Wert von0, der vomBenutzeragenten festgelegt wird. Zu diesen Elementen gehören ein<a>- oder<area>-Element mithref-Attribut,<button>,<frame>Veraltet,<iframe>,<input>,<object>,<select>,<textarea> und das SVG-Element<a>, oder ein<summary>-Element, das eine Zusammenfassung für ein<details>-Element bietet. Entwickler sollten dastabindex-Attribut zu diesen Elementen nicht hinzufügen, es sei denn, es ändert das Standardverhalten (z.B. führt die Angabe eines negativen Wertes dazu, dass das Element aus der Fokus-Navigationsreihenfolge entfernt wird).

Barrierefreiheit

Vermeiden Sie die Verwendung destabindex-Attributs in Verbindung mit nicht-interaktiven Inhalten, um etwas, das als interaktiv gedacht ist, fokussierbar durch Tastatureingabe zu machen. Ein Beispiel hierfür wäre die Verwendung eines<div>-Elements zur Beschreibung einer Schaltfläche statt des<button>-Elements.

Interaktive Komponenten, die mit nicht interaktiven Elementen erstellt werden, sind nicht imBarrierefreiheitsbaum aufgeführt. Dies verhindert, dass unterstützende Technologien zu diesen Komponenten navigieren und diese manipulieren können. Der Inhalt sollte semantisch mit interaktiven Elementen beschrieben werden (<a>,<button>,<details>,<input>,<select>,<textarea>, usw.). Diese Elemente haben eingebaute Rollen und Zustände, die den Status an die Barrierefreiheit kommunizieren, der sonst durchARIA verwaltet werden müsste.

• Die Verwendung des tabindex-Attributs | The Paciello Group

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Alleglobalen Attribute
• HTMLElement.tabIndex, das dieses Attribut widerspiegelt
• Zugänglichkeitsprobleme mittabindex: sieheDon't Use Tabindex Greater than 0 von Adrian Roselli
• Lesereihenfolge