HTML tabindex Globalattribut

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 Ganzzahlwert, wobei unterschiedliche Werte zu unterschiedlichen Ergebnissen führen:

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

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

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

• Ein positiver Wert bedeutet, dass das Element in der sequenziellen Tastaturnavigation fokussierbar sein sollte, wobei seine Reihenfolge durch den Wert der Zahl 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 haben, folgt ihre Reihenfolge relativ zueinander ihrer Position im Dokumentquellcode. Der maximale Wert für tabindex ist 32767.

• Wenn das tabindex-Attribut ohne festgelegten Wert enthalten ist, bestimmt der Benutzeragent, ob das Element fokussierbar ist.

  Warnung: Es wird empfohlen, nur 0 und -1 als tabindex-Werte zu verwenden. Vermeiden Sie tabindex-Werte größer als 0 sowie CSS-Eigenschaften, die die Reihenfolge fokussierbarer HTML-Elemente ändern können (Reihenfolge von Flex-Elementen). Dies erschwert es Personen, die auf Tastaturnavigation oder unterstützende Technologien angewiesen sind, die Seiteninhalte zu navigieren und zu bedienen. Stattdessen sollten die Dokumente mit den Elementen in logischer Reihenfolge erstellt werden.

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 diesen Elementen kein tabindex-Attribut hinzufügen, es sei denn, es ändert das Standardverhalten (zum Beispiel entfernt ein negativer Wert das Element aus der Fokusnavigationsreihenfolge).

Zugänglichkeitsaspekte

Vermeiden Sie die Verwendung des tabindex-Attributs in Verbindung mit nicht-interaktiven Inhalten, um etwas, das interaktiv sein sollte, durch Tastatureingaben fokussierbar zu machen. Ein Beispiel wäre die Verwendung eines <div>-Elements zur Beschreibung einer Schaltfläche anstelle des <button>-Elements.

Interaktive Komponenten, die unter Verwendung nicht interaktiver Elemente erstellt wurden, werden nicht im Zugänglichkeit-Baum aufgelistet. Dies hindert unterstützende Technologien daran, zu diesen Komponenten zu navigieren und sie zu manipulieren. 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 sonst durch ARIA verwaltet werden müsste.

• Verwendung des tabindex-Attributs | Vispero

Spezifikationen

Browser-Kompatibilität

Siehe auch

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