Back to top
3. November 2010
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…
Als 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:
- Die ZIP herunterladen und entpacken.
- 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!
