Zur Machart Studios Website
Back to top

Barrierefreiheit – Tastaturnavigation visualisieren

Die Visualierung aktiver Links und Formularelemente lässt je nach Browser oder Website oft zu wünschen übrig. Wenn überhaupt, bekommt man eine dünne, gestrichelte Linie zu sehen. Die CSS2 Pseudoklasse „focus“ schafft hier Abhilfe und lässt aktive Elemente stylen – nur leider längst nicht in allen Browsern…

Barrierefreiheit im WebAls optimale Lösung für alle Browser haben wir ein kleines Skript programmiert, welches allerhand Vorteile bietet:

 

  • deutliche Hervorhebung durch eine Grafik (Pfeil)
  • sehr einfache Integration in jede Website
  • läuft in allen gängigen Browsern von Firefox über Opera, Safari und Internet Explorer 6 bis 9
  • Hervorhebung nur bei Tastaturnavigation, denn wer mit der Maus klickt, wird schon wissen wohin er geklickt hat

Und so geht es:

    1. Die ZIP herunterladen und entpacken.
    2. Folgenden Quelltext möglichst am Ende der Seite direkt vor dem </body>-Tag einfügen:
<script src="tabfocus.js" type="text/javascript"></script>

Browserverhalten bei Tab-Navigation:

FF 3.6 Opera 10.6 Safari 4 Safari 5 Safari5 Mac IE 8 IE 7 IE 6
TabFocus Skript ja ja ja ja ja ja ja ja
Tab-Navigation
alle Links
ja nein nein ja nein ja ja ja
Tab-Navigation
Input-Feld
ja ja ja ja ja ja ja ja
Hervorhebung
Links
geht so ja nein ja ? geht so geht so geht so
Hervorhebung
Input-Feld
geht so nein ja ja ja geht so geht so geht so
CSS Klasse
„focus“
ja ja ja ja ja ja nein nein
Links mit Attribut
„tabindex“
ja ja nein ja ? ja ja ja

Getestet unter Windows 7 (ausser Safari 5 Mac)

Demo:

Bitte die TAB-Taste drücken!

Download als ZIP

Von Sven Bader

Betreut verantwortlich die Werbeetats bei Machart Studios. Er ist aber nicht nur Zahlenjongleur, sondern programmiert als ehrgeiziger Tüftler seit zehn Jahren die coolsten Dinge und lebt im Web. Als studierter Informatiker ist Perfektion seine Sache, Individualisieren seine Stärke, und Fotografieren seine kreative Leidenschaft. Sven Bader bei Google+

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Machart Studios Werbeagentur