HTML tabindex globales Attribut

<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 dieser Zahl:

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

  Hinweis:>tabindex="-1" kann nützlich sein für Elemente, die nicht direkt mit der Tab-Taste angesteuert werden sollen, aber den Tastaturfokus benötigen. Beispiele umfassen ein außerhalb des Bildschirms befindliches modales Fenster, das beim Anzeigen fokussiert werden soll, oder eine Fehlermeldung bei der Formularübermittlung, die beim Auftreten eines fehlerhaften Formulars sofort fokussiert werden soll.

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

• Ein positiver Wert bedeutet, dass das Element in der sequentiellen Tastaturnavigation fokussierbar sein soll, 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 im Dokumentenquelltext. Der maximale Wert für tabindex ist 32767.

• Wenn das tabindex-Attribut ohne Wert gesetzt ist, entscheidet der Benutzeragent, ob das Element fokussierbar ist.

  Warnung: Es wird empfohlen, nur 0 und -1 als tabindex-Werte zu verwenden. Vermeiden Sie es, tabindex-Werte größer als 0 und CSS-Eigenschaften, die die Reihenfolge fokussierbarer HTML-Elemente ändern können (Reihenfolge von Flex-Elementen). Dies erschwert es Menschen, die auf die Navigation mit der Tastatur oder unterstützende Technologien angewiesen sind, die Seiteninhalte zu navigieren und zu bedienen. Stattdessen sollte das Dokument in einer logischen Reihenfolge der Elemente geschrieben werden.

Einige fokussierbare HTML-Elemente haben standardmäßig einen tabindex-Wert von 0, der vom Benutzeragent gesetzt 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 die Zusammenfassung für ein <details>-Element bereitstellt. Entwickler sollten das tabindex-Attribut zu diesen Elementen nicht hinzufügen, es sei denn, es ändert das Standardverhalten (zum Beispiel wird ein negativer Wert die Elemente aus der Fokussierungsreihenfolge entfernen).

Vermeiden Sie die Verwendung des tabindex-Attributs in Verbindung mit nicht-interaktiven Inhalten, um etwas, das interaktiv sein soll, über Tastatureingaben fokussierbar 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, sind im Barrierefreiheitsbaum nicht aufgeführt. Dies verhindert, dass unterstützende Technologien auf diese Komponenten zugreifen und interagieren können. Der Inhalt sollte semantisch unter Verwendung interaktiver Elemente (<a>, <button>, <details>, <input>, <select>, <textarea> usw.) beschrieben werden. Diese Elemente haben eingebaute Rollen und Zustände, die den Status an die Barrierefreiheitsunterstützung kommunizieren, was 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
• Lesereihenfolge