Tabben statt Klicken

veröffentlicht in 2001

zuletzt bearbeitet in

Werte für das tabindex-Attribut

Tabindizes können im Allgemeinen für A-, AREA-, BUTTON-, (sichtbare) INPUT-, OBJECT-, SELECT- und TEXTAREA-Elemente vergeben werden. Ein Link kann beispielsweise mit einem tabindex-Attribut so ergänzt werden:

<a href="http://www.seitenadresse.de/" tabindex="1200">Linktext</a>

Die Vergabe von Werten für tabindex unterliegt nur wenigen Einschränkungen: Es wird eine Zahl zwischen 0 und 32,767 vergeben. Die Werte für Tabindizes müssen nicht eindeutig sein, und ein bestimmter Wert kann mehrfach auf einer Seite vergeben werden:

<h2>Hauptnavigation</h2>
<ul>
  <li><a href="#" tabindex="400">Linktext 1</a></li>
  <li><a href="#" tabindex="500">Linktext 2</a>
    <ul>
      <li><a href="#" tabindex="500">Linktext 3</a></li>
      <li><a href="#" tabindex="500">Linktext 4</a></li>
    </ul>
  </li>
  <li><a href="#" tabindex="600">Linktext 6</a></li>
</ul>

Ein Sonderfall ist der Wert "0" für tabindex: Das tabindex-Attribut kann dann für andere HTML-Elemente vergeben werden und fügt diese der Tab-Reihenfolge zu; dabei werden Elemente mit einem tabindex="0" wie Links und Steuerelemente ohne tabindex behandelt - sie werden in der Reihenfolge angesprungen, wie sie im Quelltext vorkommen, aber erst nach etwaigen Links und Steuerelementen, die einen tabindex größer null haben.

Der Wert 0 für tabindex ist z.B. für Anweisungen in Formularen sinnvoll, damit Screenreader im Formularmodus die Chance haben, an die Texte heranzukommen:

<p><label for="datum">Datum (TT.MM.JJJJ)</label>
<span tabindex="0" class="hilfe">Geben Sie bitte das Datum im angegebenen Format an. Dieses Feld ist optional.</span>
<input type="text" name="datum" id="datum" /></p>

Die Spezifikation für das DOM sieht auch den Einsatz von tabindex="-1" vor. Damit kann ein beliebiges Element einer Seite fokussiert werden, ohne dass es in die Tab-Reihenfolge aufgenommen wird. Wenn also anhand der Tab-Reihenfolge durch die Seite navigiert wird, werden nur Links und Steuerelemente sowie Elemente mit einem tabindex-Wert von 0 und höher angesprungen, mit der JavaScript-Methode focus() können aber weitere Elemente fokussiert werden.

tabindex, Tab-Reihenfolge und Fokus
Wert für tabindex Aufnahme in Tab-Reihenfolge Fokussierbar mit element.focus()
kein tabindex Links und Steuerelemente Standardverhalten
1 … 32,767 Links und Steuerelemente stehen am Anfang der Tab-Reihenfolge und werden aufsteigend angesprungen; Elemente mit gleichem tabindex-Wert werden entsprechend ihrer Reihenfolge im Quelltext angesprungen. Standardverhalten
0 Elemente werden in die Tab-Reihenfolge aufgenommen. Elemente können mit JavaScript fokussiert werden.
-1 Elemente werden nicht in die Tab-Reihenfolge aufgenommen. Elemente können mit JavaScript fokussiert werden.

Der negative Wert für tabindex ist nicht Teil der HTML-Spezifikation, d.h., es sollten nur Methoden des DOM-Scriptings verwendet werden, um Tabindizes mit einem Wert "-1" zu vergeben.