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 in Abhängigkeit vom Wert der ganzen Zahl:

• Ein negativer Wert (der genaue negative Wert spielt tatsächlich keine Rolle, normalerweise 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 mit der Tab-Taste navigiert werden sollen, aber die Tastaturfokussierung darauf gesetzt werden muss. Beispiele sind ein ausgeblendetes modales Fenster, das fokussiert werden soll, wenn es angezeigt wird, oder eine Fehlermeldung bei der Formularübermittlung, die sofort fokussiert werden soll, wenn ein fehlerhaftes Formular abgeschickt wird.

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

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

• Wenn das tabindex Attribut ohne gesetzten Wert eingeschlossen ist, wird bestimmt, ob das Element fokussierbar ist, durch den User-Agent.

  Warnung: Es wird empfohlen, nur die Werte 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 fokussierbarer HTML-Elemente ändern können (Reihenfolge von Flex-Elementen). Andernfalls wird es für Personen, die auf die Navigation mit der Tastatur oder assistive Technologien angewiesen sind, schwierig, Seiteninhalte zu navigieren und zu bedienen. Stattdessen sollten Sie das Dokument mit den Elementen in einer logischen Reihenfolge schreiben.

Einige fokussierbare HTML-Elemente haben standardmäßig einen tabindex-Wert von 0, der vom User-Agent 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 liefert. Entwickler sollten diesen Elementen kein tabindex Attribut hinzufügen, es sei denn, es ändert das Standardverhalten (zum Beispiel wird das Element durch das Einschließen eines negativen Wertes aus der Fokusnavigationsreihenfolge entfernt).

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

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

• Verwendung des tabindex Attributs | The Paciello Group

• Alle globalen Attribute
• HTMLElement.tabIndex, das dieses Attribut widerspiegelt
• Barrierefreiheitsprobleme mit tabindex: siehe Tabindex größer als 0 nicht verwenden von Adrian Roselli
• Lesereihenfolge