tabindex

<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, mit unterschiedlichen Ergebnissen je nach Wert der Ganzzahl:

• Ein negativer Wert (der exakte negative Wert spielt eigentlich keine Rolle, üblicherweise tabindex="-1") bedeutet, dass das Element über die sequentielle Tastaturnavigation nicht erreichbar ist.

  Hinweis: tabindex="-1" kann nützlich sein für Elemente, die nicht direkt über die Tab-Taste navigiert werden sollen, aber dennoch den Tastaturfokus erhalten müssen. Beispiele umfassen ein Off-Screen-Modalfenster, das fokussiert werden sollte, wenn es sichtbar wird, oder eine Fehlermeldung beim Formularversand, die sofort fokussiert werden sollte, wenn ein fehlerhaftes Formular übermittelt wird.

• tabindex="0" bedeutet, dass das Element in der sequentiellen Tastaturnavigation fokussierbar sein sollte, nach allen positiven tabindex-Werten. Die Reihenfolge der Fokussierung dieser Elemente wird durch ihre Reihenfolge in der Dokumentquelle definiert.

• Ein positiver Wert bedeutet, dass das Element in der sequentiellen Tastaturnavigation fokussierbar sein sollte, wobei seine Reihenfolge durch den Zahlenwert definiert wird. Das heißt, tabindex="4" wird vor tabindex="5" und tabindex="0" fokussiert, aber nach tabindex="3". Wenn mehrere Elemente denselben positiven tabindex-Wert teilen, folgt ihre Reihenfolge relativ zueinander ihrer Position in der Dokumentquelle. Der maximale Wert für tabindex ist 32767.

• Wenn das tabindex-Attribut ohne gesetzten Wert enthalten ist, wird die Fokussierbarkeit des Elements durch den Benutzeragenten bestimmt.

  Warnung: Es wird empfohlen, nur 0 und -1 als tabindex-Werte zu verwenden. Vermeiden Sie die Verwendung von tabindex-Werten größer als 0 und CSS-Eigenschaften, die die Reihenfolge der fokussierbaren HTML-Elemente ändern können (Reihenfolge von Flex-Items). Dies erschwert es Personen, die auf die Verwendung der Tastatur zur Navigation oder auf assistive Technologien angewiesen sind, die Seitenelemente zu navigieren und zu bedienen. Stattdessen sollten Sie das Dokument in einer logischen Reihenfolge verfassen.

Einige fokussierbare HTML-Elemente haben standardmäßig einen tabindex-Wert von 0, der vom Benutzeragenten festgelegt wird. Diese Elemente sind ein <a> oder <area> mit href-Attribut, <button>, <frame> Veraltet , <iframe>, <input>, <object>, <select>, <textarea>, und das SVG <a>-Element, oder ein <summary>-Element, das eine Zusammenfassung für ein <details>-Element bietet. Entwickler sollten das tabindex-Attribut diesen Elementen nicht hinzufügen, es sei denn, es ändert das Standardverhalten (zum Beispiel, ein negativer Wert entfernt das Element aus der Fokussierreihenfolge).

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

Interaktive Komponenten, die mit nicht-interaktiven Elementen erstellt wurden, sind nicht im Barrierefreiheitsbaum aufgelistet. Dies verhindert, dass assistive Technologien zu diesen Komponenten navigieren und diese manipulieren können. Der Inhalt sollte stattdessen semantisch unter Verwendung interaktiver Elemente (<a>, <button>, <details>, <input>, <select>, <textarea>, etc.) beschrieben werden. Diese Elemente haben eingebaute Rollen und Zustände, die den Status an die Barrierefreiheit kommunizieren, der sonst durch ARIA verwaltet werden müsste.

• Using the tabindex attribute | The Paciello Group

• Alle globalen Attribute
• HTMLElement.tabIndex, das dieses Attribut widerspiegelt
• Barrierefreiheitsprobleme mit tabindex: siehe Don't Use Tabindex Greater than 0 von Adrian Roselli