Tabben statt Klicken
veröffentlicht in 2001zuletzt 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.
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.
Der Beitrag
Tabben statt Klicken besteht aus folgenden einzelnen Webseiten:
Werte für das tabindex-Attribut(Aktuelle Seite)
Änderung der Tab-ReihenfolgeDie Veränderung der Tab-Reihenfolge sollte nur in begründeten Fällen vorgenommen werden, z.B. wenn eine Seite nicht linearisierbar ist.
Alternative zu tabindexWenn die Tab-Reihenfolge geändert werden soll, geht es meist um äußerst wichtige Funktionen oder auch Fehlermeldungen. Statt mit
tabindexzu arbeiten, kann mit JavaScript der Fokus auf den Inhalt gelegt werden.

Änderung der Tab-Reihenfolge
Das Tabindex-Attribut