onfocus blur bei Links

Wenn man auf Webseiten einen Link klickt, erscheint oft ein gestricheltes Kästchen um den Link. Dieses Kästchen zeigt den Bereich des Links an und alle Elemente, die er beinhaltet. Wenn also ein Bild und die dazugehörende Unterschrift mit einem Link versehen sind, wird des Kästchen auch um den kompletten Bereich gehen. Das nervt viele Webentwickler und sie versuchen das zu unterbinden, damit der User den optischen Eindruck der Seiten nicht durch undefinierbare Kästchen verliert.

Mit Javascript gegen Focus

Ein beliebtes Mittel ist die Javascript Funktion blur() die mit dem Event onFocus aktiviert wird. Dadurch verliert der Link den Focus sofort wieder und bekommt erst gar nicht den Rahmen.

<a href="http://www.fooapp.de" onfocus="blur();">foo</a>

Der Vorteil liegt klar auf der Hand. Die Webseite sieht weiterhin so aus, wie sie aussehen soll und der Link Funktioniert wie gewünscht. Der Nachteil ist nicht so offensichtlich, aber erheblich und sollte bedacht werden. Wenn man nämlich dem Link die Möglichkeit nimmt, den Focus zu bekommen, indem man ihn mit blur() umgeht, kann der user nicht mehr mit der Tastatur, also mit der Tab-Taste, über die Webseite navigieren.

Usability gegen Design

Die Frage die sich der Webentwickler, beim erstellen seiner Webseite stellen muss, ist: Wollen meine User mit der Tastatur navigieren? Können sie das überhaupt und wenn ja, wie wichtig ist mir dir optik Tatsächlich stört es wohl keinen normalen User, wenn der kleine Rahmen erscheint und ohne das kleine Stück Code auf jedem Link, dürfte die Seite auch entsprechen kleiner und damit schneller laufen (Je nach Anzahl der Links summiert sich das eben doch). Also sollte man hier eher zugunstes des Users entscheiden und die Links normal benutzen. Ausserdem hilft man so den usern, die auf diese Links mit Fokus angewiesen sind. Stichwort: berierefreie Webseiten. Blinde Menschen surfen heute genau so wie sehende Menschen. Dafür gibt es spezielle Browser. Diese sind auf die richtige Formatierung einer Webseite angewiesen, damit sie den Inhalt richtig weider geben können.

Der Trick mit onfocus="blur();"

Man kann durch das Unterdrücken des Focus den User aber auch steuernd und unwichtige Links so aus der Tab Reihenfolge nehmen. Links wie das Impressum oder no-follow Links, will man vielleicht gar nicht so präsent halten. Denn je weniger Links über Tab zu erreichen sind, desto eher kommt er zu den Links, die der Webentwickler als wichtig anzieht. Welche Links das sind, muss jeder selber entscheiden.