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. Es erlaubt oder verhindert, dass sie sequentiell fokussierbar sind (in der Regel mit der Tab-Taste, daher der Name) und bestimmt ihre relative Reihenfolge für die sequentielle Fokuss-Navigation.
Probieren Sie es aus
Es akzeptiert einen ganzzahligen Wert, mit unterschiedlichen Ergebnissen je nach Wert der Ganzzahl:
Hinweis: Wenn ein HTML-Element gerendert wird und das tabindex
-Attribut mit einem gültigen ganzzahligen Wert hat, kann das Element 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
ist (d.h. über sequentielle Tastaturnavigation erreichbar, üblicherweise mit der Tab-Taste).
-
Ein negativer Wert (der genaue negative Wert spielt keine Rolle, meist
tabindex="-1"
) bedeutet, dass das Element nicht über sequentielle Tastaturnavigation erreichbar ist.Hinweis:
tabindex="-1"
kann nützlich sein für Elemente, die nicht direkt mit der Tab-Taste navigiert werden sollen, aber dennoch eine Tastaturfokussierung benötigen. Beispiele umfassen ein Off-Screen-Modalfenster, das fokussiert werden soll, wenn es in den Blick kommt, oder eine Fehlermeldung bei der Formularübermittlung, die sofort fokussiert werden soll, wenn ein fehlerhaftes Formular übermittelt wird. -
tabindex="0"
bedeutet, dass das Element in der sequentiellen Tastaturnavigation fokussierbar sein sollte, nach allen positiventabindex
-Werten. Die Fokus-Navigationsreihenfolge dieser Elemente wird durch ihre Reihenfolge im Dokument-Quelltext definiert. -
Ein positiver Wert bedeutet, dass das Element in der sequentiellen Tastaturnavigation fokussierbar sein sollte, wobei seine Reihenfolge durch den Zahlenwert definiert wird. Das heißt,
tabindex="4"
wird vortabindex="5"
undtabindex="0"
fokussiert, aber nachtabindex="3"
. Wenn mehrere Elemente denselben positiventabindex
-Wert teilen, folgt ihre Reihenfolge relativ zueinander ihrer Position im Dokument-Quelltext. Der maximale Wert fürtabindex
ist 32767. -
Wenn das
tabindex
-Attribut ohne festgelegten Wert enthalten ist, wird die Fokussierbarkeit des Elements vom Benutzeragenten bestimmt.Warnung: Es wird empfohlen, nur die Werte
0
und-1
alstabindex
-Werte zu verwenden. Vermeiden Sie die Verwendung vontabindex
-Werten, die größer als0
sind, und von CSS-Eigenschaften, die die Reihenfolge von fokussierbaren HTML-Elementen ändern können (Anordnung von Flex-Elementen). Dies erschwert es Menschen, die auf die Verwendung der Tastatur zur Navigation oder assistive Technologien angewiesen sind, Seiteninhalte zu navigieren und zu bedienen. Stattdessen sollten Sie das Dokument in einer logischen Reihenfolge schreiben.
Einige fokussierbare HTML-Elemente haben einen Standard-tabindex
-Wert von 0
, der vom Benutzeragenten standardmäßig festgelegt wird. Diese Elemente sind ein <a>
- oder <area>
-Element mit href
-Attribut, <button>
, <frame>
Veraltet
, <iframe>
, <input>
, <object>
, <select>
, <textarea>
und SVG <a>
oder ein <summary>
, das eine Zusammenfassung für ein <details>
-Element bietet. Entwickler sollten diesen Elementen nicht das tabindex
-Attribut hinzufügen, es sei denn, es ändert das Standardverhalten (zum Beispiel wird ein negativer Wert das Element aus der Fokus-Navigationsreihenfolge entfernen).
Warnung: Das tabindex
-Attribut darf nicht auf das <dialog>
-Element angewendet werden.
Zugänglichkeitsaspekte
Vermeiden Sie die Verwendung des tabindex
-Attributs in Verbindung mit nicht-interaktiven Inhalten, um etwas, das interaktiv sein soll, per Tastatureingabe fokussierbar zu machen. Ein Beispiel dafü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änglichkeitsbaum aufgeführt. Dies verhindert, dass assistive Technologien auf diese Komponenten zugreifen und sie manipulieren können. Die Inhalte sollten semantisch mit interaktiven Elementen beschrieben werden (<a>
, <button>
, <details>
, <input>
, <select>
, <textarea>
usw.). Diese Elemente haben eingebaute Rollen und Zustände, die den Status an die Barrierefreiheit kommunizieren, die ansonsten von ARIA verwaltet werden müssten.
Spezifikationen
Specification |
---|
HTML Standard # attr-tabindex |
Browser-Kompatibilität
BCD tables only load in the browser
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