Was ist das HTML-Attribut tabindex?

Wofür wird das tabindexAttribut in HTML verwendet?

tabindexist ein globales Attribut, das für zwei Dinge verantwortlich ist:

1. es legt die Reihenfolge der "fokussierbaren" Elemente fest und
2. es macht Elemente "fokussierbar" .

In meinen Augen ist das Zweite noch wichtiger als das Erste. Es gibt nur sehr wenige Elemente, die standardmäßig fokussierbar sind (z. B. <a> und Formularsteuerelemente). Entwickler fügen sehr oft einige JavaScript-Ereignishandler (wie 'onclick') zu nicht fokussierbaren Elementen (<div>, <span> usw.) hinzu und geben an, wie Ihre Benutzeroberfläche nicht nur auf Mausereignisse, sondern auch auf Tastaturereignisse reagiert (zB 'onkeypress') soll solche Elemente fokussierbar machen. Wenn Sie die Reihenfolge nicht festlegen möchten, sondern Ihr Element nur tabindex="0"auf alle diese Elemente fokussierbar machen möchten :

<div tabindex="0"></div>

Wenn Sie nicht möchten, dass es über die Tabulatortaste fokussierbar ist, verwenden Sie tabindex="-1". Beispielsweise wird der folgende Link beim Verwenden von Tabulatortasten zum Durchlaufen nicht fokussiert.

<a href="#" tabindex="-1">Tab key cannot reach here!</a>

Wenn der Benutzer die Tabulatortaste drückt, wird der Benutzer in der Reihenfolge 1, 2 und 3 durch das Formular geführt, wie im folgenden Beispiel angegeben.

Beispielsweise:

Name: <input name="name" tabindex="1"  />
Age: <input name="age" tabindex="3"  />
Email: <input name="email" tabindex="2"  />

Das Tabindexwird verwendet, um eine Sequenz zu definieren, der Benutzer folgen, wenn sie mit der Tabulatortaste durch eine Seite navigieren. Standardmäßig stimmt die natürliche Tabulatorreihenfolge mit der Quellreihenfolge im Markup überein.

Mit dem Attribut tabindex content können Autoren steuern, ob ein Element fokussierbar sein soll, ob es mithilfe der sequentiellen Fokusnavigation erreichbar sein soll und wie die relative Reihenfolge des Elements für die sequentielle Fokusnavigation aussehen soll. Der Name "Registerkartenindex" stammt aus der allgemeinen Verwendung der Tabulatortaste, um durch die fokussierbaren Elemente zu navigieren. Der Begriff "Tabbing" bezieht sich auf das Vorwärtsbewegen durch die fokussierbaren Elemente, die mit der sequentiellen Fokusnavigation erreicht werden können.
W3C-Empfehlung: HTML5
Abschnitt 7.4.1 Sequenzielle Fokusnavigation und das tabindex-Attribut

Das tabindexbeginnt bei 0 oder einer beliebigen positiven ganzen Zahl und erhöht sich nach oben. Es ist üblich, dass der Wert 0 vermieden wird, da in älteren Versionen von Mozilla und IE der Tabindex bei 1 beginnt, zu 2 übergeht und erst nach 2 zu 0 und dann zu 3 wechselt. Der maximale ganzzahlige Wert für tabindexist32767 . Wenn Elemente gleich sind, tabindexstimmt der Tabindex mit der Quellreihenfolge im Markup überein. Ein negativer Wert entfernt das Element aus dem Registerkartenindex, sodass es niemals fokussiert wird.

Wenn einem Element ein tabindexvon zugewiesen ist-1 wird das Element zu entfernen und es wird nie fokussierbar sein , aber Fokus kann auf das Element gegeben wird programmatisch verwendet element.focus().

Wenn Sie die angeben tabindex Attribut ohne Wert oder mit einem leeren Wert , wird es ignoriert.

Wenn das disabledAttribut für ein Element mit a festgelegt ist tabindex, wird das Element ignoriert.

Wenn a tabindexirgendwo auf der Seite festgelegt ist, unabhängig davon, wo es sich im Verhältnis zum Rest des Codes befindet (es kann sich in der Fußzeile, im Inhaltsbereich usw. befinden), wenn es eine definierte tabindexgibt, beginnt die Tabulatorreihenfolge am Element Dem wird explizit der niedrigste tabindexWert über 0 zugewiesen. Anschließend werden die definierten Elemente durchlaufen. Erst nachdem die expliziten tabindexElemente durchlaufen wurden, kehrt er zum Anfang des Dokuments zurück und folgt der natürlichen Reihenfolge der Registerkarten.

In der HTML4-Spezifikation unterstützen nur die folgenden Elemente das tabindex-Attribut: Anker, Bereich, Taste, Eingang, Objekt, wählen, und Textbereich. Mit der HTML5-Spezifikation können jedoch unter Berücksichtigung der Barrierefreiheit alle Elemente zugewiesen werden tabindex.

- -

Beispielsweise

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="2"></li>
  <li tabindex="3"></li>
</ul>

ist das gleiche wie

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="1"></li>
  <li tabindex="1"></li>
</ul>

denn unabhängig von der Tatsache, dass sie alle zugewiesen sind tabindex="1", folgen sie immer noch der gleichen Reihenfolge, die erste ist die erste und die letzte ist die letzte. Dies ist auch das gleiche ..

<div>
  <a></a>
  <a></a>
  <a></a>
</div>

weil Sie den tabIndex nicht explizit definieren müssen, wenn es sich um ein Standardverhalten handelt. A ist divstandardmäßig nicht fokussierbar, die anchorTags werden fokussiert .

Steuern der Tabulatorreihenfolge (Drücken der tabTaste, um den Fokus zu verschieben) innerhalb der Seite.

Referenz: http://www.w3.org/TR/html401/interact/forms.html#h-17.11.1

Die von Ihnen festgelegten Werte bestimmen die Reihenfolge, in der sich Ihr Tastaturfokus zwischen den Elementen auf der Website bewegt.

Im folgenden Beispiel bewegt sich der Cursor beim ersten Drücken der Tabulatortaste auf #foo, dann auf #awesome und dann auf #bar

<input id="foo" tabindex="1"  />
<input id="bar" tabindex="3"  />
<input id="awesome" tabindex="2"  />

Wenn Sie nirgendwo Registerkartenindizes definiert haben, folgt der Tastaturfokus den HTML-Tags Ihrer Seite in der Reihenfolge, in der sie im HTML-Dokument definiert sind.

Wenn Sie mehrmals mit Tabulatoren tippen, als Sie Tabindexe angegeben haben, wird der Fokus so verschoben, als ob keine Tabindexe vorhanden wären, dh in der Reihenfolge des Auftretens der HTML-Tags

Es kann verwendet werden, um die Standardnavigationssequenz für den Fokus des Formularelements zu ändern.

Also, wenn Sie haben:

text input A

text input B

submit button C

Mit der Tabulatortaste navigieren Sie durch A-> B-> C. Mit Tabindex können Sie diesen Ablauf ändern.

Wenn der Benutzer in einem Formular von Feld zu Feld wechselt (in einem Browser, der das Tabulieren ermöglicht, tun dies nicht alle Browser), ist die Reihenfolge normalerweise die Reihenfolge, in der die Felder im HTML-Code angezeigt werden.

Manchmal möchten Sie jedoch, dass die Tabulatorreihenfolge etwas anders verläuft. In diesem Fall können Sie die Felder mit TABINDEX nummerieren. Die Registerkarten fließen dann in der Reihenfolge vom niedrigsten zum höchsten TABINDEX.

Weitere Infos dazu finden Sie hier w3

Eine weitere gute Illustration finden Sie hier

In einfachen Worten, tabindexwird verwendet, um sich auf Elemente zu konzentrieren. Syntax: tabindex="numeric_value" Dies numeric_valueist das Gewicht des Elements. Auf den niedrigeren Wert wird zuerst zugegriffen.

Das HTML- Tabindex- Attribut gibt an, ob ein Element über die Tastaturnavigation erreichbar ist . Wenn der Benutzer die preßt Tabulatortaste die sich Fokus verschoben von einem Element zum anderen. Durch die Verwendung des Tabindex-Attributs wird der Ablauf der Registerkartenreihenfolge verschoben.

Das Durchblättern von Steuerelementen erfolgt normalerweise nacheinander, wenn sie im HTML-Code angezeigt werden.

Bei Verwendung von Tabindex fließt das Tabbing von der Kontrolle mit dem niedrigsten Tabindex zur Kontrolle mit dem höchsten Tabindex in der Reihenfolge der Tabindex