Auch wenn die meisten Computer-Nutzer an einem mausorientierten Computersystem arbeiten, gibt es dennoch zahlreiche Anwender, die die Tastatur für häufig genutzte Befehle vorziehen. Diese vorgehensweise steigert die Arbeitsgeschwindigkeit am Computer deutlich. So lässt sich auf Webseiten auch die TAB-Taste einsetzen, um Formularfelder und Links auf der Seite per Tastendruck auszuwählen. Mit TAB wird die Liste vorwärts, mit Umschalt-TAB rückwärts durchgegangen.
Dieser Umstand sollte beim Webdesign beachtet werden. Aus diesem Grund ist es angebracht den jeweils aktiven Link oder das jeweilige aktive Formularfeld optisch hervorzuheben. Mit Hilfe von CSS kann das über die Pseudoklasse :focus geregelt werden. Ein Beispiel-Code:
a:focus, input:focus{border:1px solid green;}
Dieses Beispiel zieht eine feine grüne Linie um das mit dem Focus versehene Element.
Selbstverständlich lässt sich die Gestaltung für Input-Felder und die Verlinkung auch separat bestimmen. Ältere Browser verstehen diesen Befehl nicht, sie ignorieren die Anweisung einfach.
Leider kann selbst der nicht so ganz alte IE7 diese Anweisung nicht, erste der IE8 unterstützt es.
P.S. Das Leerzeichen zwischen „input:“ und „focus“ muss aber mal wieder weg 😉