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, abhängig vom Wert der Ganzzahl:

• Ein negativer Wert (der genaue negative Wert ist eigentlich egal, normalerweise tabindex="-1") bedeutet, dass das Element nicht über sequenzielle Tastaturnavigation erreichbar ist.

  Hinweis: tabindex="-1" kann für Elemente nützlich sein, die nicht direkt über die Tab-Taste angesprungen werden sollen, jedoch den Tastaturfokus erhalten müssen. Beispiele sind ein außerhalb des Bildschirms befindliches modales Fenster, das fokussiert werden soll, wenn es in den Blickpunkt kommt, oder eine Fehlermeldung bei der Formularübermittlung, die sofort fokussiert werden sollte, wenn ein fehlerhaftes Formular übermittelt wird.

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

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

• Wenn das tabindex-Attribut ohne einen festgelegten Wert enthalten ist, wird die Fokussierbarkeit des Elements durch den User-Agent bestimmt.

  Warnung: Es wird empfohlen, nur 0 und -1 als tabindex-Werte zu verwenden. Vermeiden Sie tabindex-Werte, die größer als 0 sind und CSS-Eigenschaften, die die Reihenfolge fokussierbarer HTML-Elemente ändern können (Ordering flex items). Dies erschwert Personen, die auf die Navigation mit der Tastatur oder unterstützende Technologien angewiesen sind, die Navigation und Bedienung der Seiteninhalte. Schreiben Sie das Dokument stattdessen in einer logischen Sequenz der Elemente.

Einige fokussierbare HTML-Elemente haben einen Standardwert von 0 für tabindex, der vom User-Agent gesetzt wird. Diese Elemente sind ein <a> oder <area> mit href-Attribut, <button>, <frame> Veraltet , <iframe>, <input>, <object>, <select>, <textarea> und SVG <a>-Element oder ein <summary>-Element, das eine Zusammenfassung für ein <details>-Element bereitstellt. Entwickler sollten das tabindex-Attribut diesen Elementen nicht hinzufügen, es sei denn, es ändert das Standardverhalten (zum Beispiel wird bei Einfügen eines negativen Wertes das Element aus der Fokusnavigationsreihenfolge entfernt).

Vermeiden Sie es, das tabindex-Attribut mit nicht-interaktivem Inhalt zu verwenden, um etwas, das interaktiv sein soll, fokussierbar mittels Tastatureingabe zu machen. Ein Beispiel hierfür wäre die Verwendung eines <div>-Elements, um eine Schaltfläche zu beschreiben, anstelle des <button>-Elements.

Interaktive Komponenten, die mit nicht-interaktiven Elementen erstellt wurden, werden nicht im Zugänglichkeit-Baum aufgeführt. Dies verhindert, dass unterstützende Technologie diese Komponenten navigieren und manipulieren kann. Der Inhalt sollte semantisch mit interaktiven Elementen beschrieben werden (<a>, <button>, <details>, <input>, <select>, <textarea>, usw.). Diese Elemente haben integrierte Rollen und Zustände, die den Status an die Barrierefreiheit kommunizieren, der ansonsten von 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