tabindex

Es akzeptiert eine ganze Zahl als Wert, mit unterschiedlichen Ergebnissen je nach Wert der Zahl:

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

  Hinweis: tabindex="-1" kann für Elemente nützlich sein, die nicht direkt mit der Tab-Taste navigiert werden sollten, aber eine Tastaturfokussierung auf sie gesetzt werden soll. Beispiele sind ein Off-Screen-Modal-Fenster, das fokussiert werden sollte, wenn es ins Blickfeld kommt, oder eine Fehlermeldung bei der Formularübermittlung, die sofort fokussiert werden sollte, wenn ein fehlerhaftes Formular abgeschickt wird.

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

• Ein positiver Wert bedeutet, dass das Element in der sequentiellen 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 enthalten ist, ohne dass ein Wert festgelegt ist, bestimmt der Nutzeragent, 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 und CSS-Eigenschaften, die die Reihenfolge der fokussierbaren HTML-Elemente ändern können (Bestellung von flex-Elementen). Dadurch wird es für Personen, die auf die Navigation mit der Tastatur oder assistive Technologien angewiesen sind, schwierig, Inhalte der Seite zu navigieren und zu bedienen. Schreiben Sie stattdessen das Dokument mit den Elementen in einer logischen Reihenfolge.

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

Vermeiden Sie die Verwendung des tabindex-Attributs in Verbindung mit nicht-interaktiven Inhalten, um etwas, das als interaktiv gedacht ist, ü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, werden nicht im Barrierefreiheitsbaum aufgelistet. Dies verhindert, dass assistierende Technologien in der Lage sind, auf diese Komponenten zuzugreifen und sie zu manipulieren. Der Inhalt sollte semantisch durch interaktive Elemente beschrieben werden (<a>, <button>, <details>, <input>, <select>, <textarea>, etc.). Diese Elemente haben eingebaute Rollen und Zustände, die den Status an die Barrierefreiheit kommunizieren, der ansonsten von 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 Verwenden Sie keinen Tabindex größer als 0 von Adrian Roselli