tabindex

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.

Das tabindex globale Attribut ermöglicht es Entwicklern, HTML-Elemente fokussierbar zu machen, und sie sequenziell fokussierbar zu machen oder dies zu verhindern (normalerweise mit der Tab-Taste, daher der Name) und ihre 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, mit unterschiedlichen Ergebnissen, abhängig vom Wert der Ganzzahl:

Hinweis: Wenn ein HTML-Element gerendert wird und ein tabindex-Attribut mit einem gültigen ganzzahligen Wert besitzt, kann das Element entweder mit JavaScript (durch Aufruf der focus() Methode) oder visuell durch Klicken mit der Maus fokussiert werden. Der spezifische tabindex-Wert steuert, ob das Element tabbable (d. h. erreichbar über sequentielle Tastaturnavigation, normalerweise mit der Tab-Taste) ist.

  • 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).

Warnung: Das tabindex-Attribut darf nicht auf das <dialog>-Element angewendet werden.

Barrierefreiheitsbedenken

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.

Spezifikationen

Specification
HTML
# attr-tabindex

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch