Markup Webdesign Journal

Tabindex. Dieser ist allen, die beginnen sich mit Accessibility zu beschäftigen zumindest ein Begriff. Es geht um das Festlegen der Reihenfolge der Links auf einer Website, wenn diese per Tab-Taste angesteuert werden sollen. In den meisten Fällen ist es ganz sinnvoll diesen Index nicht zu verwenden. Oft geht der Blick auf den logischen Aufbau der Seite verloren und so wird eine Website unter Umständen unzugänglicher als zuvor.

Tabindex implementieren

Sehen wir uns trotzdem nochmal an, wie man einen Tabindex erstellt. Hierzu werden die Links (oder auch Formularelemente), die innerhalb dieses Indexes liegen sollen, um das tabindex-Attribut erweitert.

<a href="Eins.html" title="Hier gehts lang" tabindex="1">Link 1</a>
<a href="Zwei.html" title="Hier gehts lang" tabindex="2">Link 2</a>
<a href="Drei.html" title="Hier gehts lang" tabindex="3">Link 3</a>

Benutzt man jetzt die Tab-Taste zur Navigation beginnt man bei Link 1 weiter zu Link 2 usw. Der Index hat aber auch Nachteile.

1. neue Links
2. "Tab-Marathon"

Neue Links erfordern ein Anpassen des Index, da diese oft auch zwischendrin eingefügt werden. So müsste man jedes Mal die betreffenden Seiten entsprechend anpassen.

Zu einem Tab-Marathon kann der Besuch einer Website ausarten. Nehmen wir als Beispiel dieses Blog. Es dürften sich auf dieser Seite etwa 100 Links befinden. Es wäre nicht angenehm, sich durch diese lange Liste von Links zu hangeln.

Bessere Ansätze

Quelltext und Logik

Sind die Navigationspunkte einer Website logisch angeordnet, kann man sich diese Arbeit sparen. Wichtig ist dann, in welcher Reihenfolge man die Links auf der Seite auszeichnet. So lässt es sich auch gut durch die Seite navigieren, dem natürlichen Tabindex folgend. Es stellt sich allerdings die Frage nach der richtigen Reihenfolge. Die Anwort lässt sich nur teilweise objektiv geben, denn vieles ist auch abhängig vom subjektiven Empfinden. Da spielt es keine Rolle, ob ein Tabindex vorhanden ist oder nicht. Ist dem Besucher die Anordnung persönlich nicht eingängig genug, wird er trotzdem Probleme mit der Navigation haben.

Sprungmarken sind wichtiger

Für diesen Fall wäre es besser, wenn man einen natürlichen Tabindex (der Anordnung der Links folgend) mit gezielten Sprungmarken, auch als Skiplinks bekannt, kombiniert. D.h. wir teilen die Navigationselemente- und Bereiche der Website in drei oder vier Rubriken ein, die auch mit Hilfe der Accesskeys erreichbar sind. Innerhalb dieser Rubriken folgt die Tab-Navigation nach der Linkreihenfolge. Um zwischen den verschiedenen Bereichen wechseln zu können bieten wir den Besuchern Sprungmarken.

Auf meiner Seite sieht das z.B. so aus, wie es auf den beiden Screenshots eingezeichnet ist.

Skiplink Nummer eins führt zum Hauptmenü (Windows: ALT+1), also zum eigentlichen Navigationsmenü, das die Seite in ihre thematischen Bereiche einteilt, die sich von dort ansteuern lassen. Der zweite Skiplink ermöglicht einen Sprung direkt zu den Inhalten, also über die horizontale Navigationsleiste hinweg (Windows: ALT+2). Der dritte lässt Navigation und Inhalte überspringen (Windows: ALT+3). So gelangt man in die Sidebar (rechte Seite), zu den Feeds. Der vierte link führt zum Blogmenü (Windows: ALT+4), bzw. zu den Archivlinks usw. Es gibt so auf der Startseite vier relevante Navigationsbereiche. Dazu gibt es noch zwei weitere Sprungmarken mit Accesskeys. Einmal zurück zur Startseite und einen zum Suchformular.

Um die Sprungmarken zu aktivieren mussten noch die entsprechenden Accesskeys ausgezeichnet werden. Mit Hilfe der Accesskeys ist es möglich, diese über die Tastenkombination ALT+x von überall direkt aufzurufen (bei Windowssystemen, andere Systeme sehen andere Tastenkombinationen vor).

<ul>
<li><a href="#navigation" title="Zum Navigationsmenü springen" accesskey="1">Navigation</a></li>
<li><a href="#inhalt" title="Navigation überspringen zum Inhalt" accesskey="2">Zum Inhalt</a></li>
<li><a href="#rechts1" title="RSS und Atom Feeds" accesskey="3">Feeds</a></li>
<li><a href="#rechts2" title="Zur rechten Seite zum Weblogmenü springen" accesskey="4">Blogmenü</a></li>
</ul>

Der natürliche Tabindex der Seite beginnt bei den Sprunkgmarken, die sich zu Beginn auch per Tab-Taste ansteuern lassen.

Wann ein echter Tabindex Sinn macht

Gerade bei komplexen Formularen bietet sich der Einsatz eines festgelegten Tabindex an. Dort wo man nicht nur Name, Mail und eine Nachricht eingibt, kann eine festgelegte Reihenfolge wichtig sein. Vorsicht ist hier auch geboten. Legt man einen Tabindex für die Seite fest, darf man die Formulare dabei nicht vergessen, sonst sind diese für manche Besucher nicht mehr erreichbar.

Fazit

Einen wirklichen, d.h. festgelegten Tabindex sollte man eigentlich nur dann einsetzen, wenn unbedingt nötig. Ich persönlich finde den oben gezeigten Ansatz (Mischung aus natürlicher Reihenfolge und Sprungmarken) sinnvoller. Wobei ich nicht auf einen Tabindex bzw. eine logische Tabreihenfolge angewiesen bin, da ich mich mit Hilfe einer Maus über die Seiten hangeln kann. Trotzdem, ein gut strukturierter Quelltext ist die Basis für besseren Zugang zu Websites und erfordert in den meisten Fällen keinen Tabindex.

Vielleicht wirft mein Ansatz auch wieder ganz andere Probleme auf. Es wäre interessant zu wissen, ob meine Vorgenehnsweise wirklich geeignet ist und wer (warum) Probleme damit hat. Ein Problem sind sicherlich auch die Accesskeys, die von Browser zu Browser unterschiedlich implementiert sind. Es gibt keinen einheitlichen Standard.

Links zum Thema

• Tabindex: Actually any use?
• Barrierefreie Navigationsmenüs
• Tabben statt Klicken
• Die wichtige Reihenfolge von Webinhalten