Was ist das HTML-Attribut tabindex?

229

Wofür wird das tabindexAttribut in HTML verwendet?

Schlaf
quelle

Antworten:

301

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>
Konstantin Smolyanin
quelle
2
Ich fand heraus, dass das <div tabindex>auch funktioniert. Gibt es einen Grund, das nicht zu benutzen?
Danijar
5
Die Verwendung von tabindex -1 ist praktisch für Dinge wie das Überspringen von Links. Sie können einen Artikel-Link zu etwas direkt über dem Inhalt erstellen, auf den Sie den Benutzer verlinken möchten, ohne dass der mit dem Artikel selbst verknüpfte Artikel erreichbar ist.
Brett
4
Es ist erwähnenswert - und die Antwort sollte wahrscheinlich korrigiert werden -, dass der Wert -1nicht geeignet ist, wenn Sie "nicht möchten, dass er fokussiert wird", sondern wenn Sie den Fokus aufgrund der Tastaturnavigation verhindern möchten. Das Element kann weiterhin fokussiert werden, nur nicht mit der Tastatur.
Amn
2
@danijar ja: es ist eine Spezifikationsverletzung. Per html.spec.whatwg.org/multipage/… muss "das tabindex-Attribut, falls angegeben, einen Wert haben, der eine gültige Ganzzahl ist" .
Mark Amery
Das -1ist das Ende meiner Suche nach einer Lösung für Elemente, die eine absolute Position hatten und sich lustig verhalten, wenn sie von der Registerkarte fokussiert werden! HOorraaayyyyy.
John Mutuma
54

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"  />
Robert
quelle
-> Was ist, wenn der Tabindex -1 ist? Was heißt das?
7
@AlyssaGono Sie scheinen die Antwort nicht mit 85 positiven Stimmen gelesen zu haben ... Tabindex von -1 bedeutet, dass Sie dieses Element nicht erreichen können, indem Sie die Tabulatortaste drücken
John Ruddell
24

Das wird 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: , , , , , , und . 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 .

Davidcondrey
quelle
Welche Versionen von IE und Mozilla beginnen tabindexbei 1 statt bei 0 ?
Arminrosu
-1; Diese Antwort ist etwas verwirrt. Sie erwähnen, dass "ältere Versionen" von IE und Firefox Tabbing bei Tabindex 1 anstelle von Tabindex 0 haben ... aber genau das tun alle Browser, wie in der Spezifikation gefordert! Sie widersprechen sich auch selbst, indem Sie zuerst "das tabindexbeginnt bei 0" sagen, später aber "die Tabulatorreihenfolge beginnt bei dem Element, dem explizit der niedrigste tabindexWert über 0 zugewiesen wurde " .
Mark Amery
18

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

Tom
quelle
6
Mit tabindex kann ein Element auch per Mausklick ausgewählt werden. (Fügt gepunktete Umrisse hinzu, kann mit gestaltet werden :focus)
user123444555621
@ Pumbaa80 Sie können jedes Eingabeelement trotzdem per Mausklick auswählen. Gleiches gilt für die Verwendung des CSS ": focus". Das tabindex-Attribut ist optional.
Drew
6
Das gilt nur für Eingabeelemente. Mein Kommentar gilt für jede Art von Element. Ein Beispiel finden Sie unter jsfiddle.net/XsYCj .
user123444555621
8

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

Eldamir
quelle
3

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.

Cherouvim
quelle
3

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

Mulki
quelle
2

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.

Aman Dhanda
quelle
"Auf den niedrigeren Wert wird zuerst zugegriffen." - nicht ganz richtig; 0 und negative Werte haben spezielle Bedeutungen.
Mark Amery
1

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.

Nesha Zoric
quelle
0

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

Kamal
quelle