Gepünktelter Rahmen bei Links

Du willst deine Webseite mit schicken CSS-Buttons gestalten? Dich stört aber der gepünktelte Rahmen um aktive Verweise? Du willst die Seite aber trotzdem barrierefrei halten und den Nutzern eine Tastatursteuerung nicht verbieten? Kein Problem! Genau für diesen Zweck gibt es die CSS-Eigenschaft outline. Gefordert wird hier eine Angabe für Rahmen. Du hast also die Möglichkeit, die Standardeinstellung outline:1px dotted invert zu verändern. Im folgenden Beispiel wird die Eigenschaft zunächst komplett unterdrückt.

Beispiel 1

Alternative outline-Wertzuweisungen!

Wie du im 1. Beispiel sehen kannst, sieht man bei outline:0 gar keinen Rahmen mehr. Deshalb ist es besser, einfach nur einen anderen Wert zu verwenden. Wie du in der Einführung lesen konntest, handelt es sich um Rahmen-Eigenschaften. Verwende also lieber einen anderen Rahmen, der dir besser gefällt, als ihn komplett verschwinden zu lassen. Der Nachteil von outline ist allerdings, dass man die Werte, im Gegensatz zu richtigen Rahmen (border) nicht einzeln für jede Seite festlegen kann. Auch Teileigenschaften wie outline-style gibt es nicht. Aber outline hat auch einen Vorteil. So beansprucht der outline-Rahmen keinen Platz für sich sondern umläuft das Element und ist unter Abständen sichtbar. Der berühmte Hüpf-Effekt entsteht also nicht. Im folgenden Beispiel werden alternative outline-Rahmen vorgestellt.

Beispiel 2

Gepünktelten Rahmen auch im Internet Explorer verhindern

Die bisherigen CSS-Eigenschaften funktionieren nur in modernen Browsern. Den Internet Explorer 6 aus dem Jahre 2002 lässt die outline-Eigenschaft allerdings kalt. Dafür gibt es dort aber ein proprietäres HTML-Attribut, das den gepünktelten Rahmen unterdrückt. Es heißt hidefocus. Anders als bei outline kann man den gepünktelten Rahmen nur unterdrücken aber nicht ändern. Ein weiterer Nachteil ist, dass man das hidefocus-Attribut jedem Link einzeln zuweisen muss.
Ein Link sieht dann beispielsweise so aus:
<a href="Linkziel" hidefocus>Linktext</a> bei XHTML müsste man sogar <a href="Linkziel" hidefocus="hidefocus">Linktext</a> notieren.
Dieses Attribut sollte also nur im äußersten Notfall verwendet werden. Andererseits zeigt der IE 6 den gepünktelten Rahmen i.d.R. nur bei der Tastatursteuerung an. Möchtegern-Browser, wie der Avant-Browser, basieren allerdings zwar meist auf dem IE, zeigen den gepünktelten Rahmen aber trotzdem an, da die Verbreitung aber nicht sehr hoch zu schätzen ist, ist es auch nicht unbedingt so schlimm, wenn dort der Rahmen angezeigt wird. Das folgende Beispiel demonstriert die Verwendung den hidefocus-Attributes. Da hier XHTML verwendet wird, wird dort auch die Doppelvariante genutzt.

Beispiel 3

Gepünktelten Rahmen unterdrücken und Alternative verwenden

Du willst gar keinen Rahmen? Auch das geht, aber du solltest eine Alternative Eigenschaft setzen. Das könnte z.B. eine Hintergrundfarbe sein. Dadurch kann der Anwender die Links auch problemlos mit der Tastatur ansteuern. Auch eine andere Link-Farbe ist möglich. Diese sollte aber stark genug von der normalen abweichen, da der Anwender sonst wahrscheinlich nicht bemerkt, dass sich der Link umgefärbt hat. Im folgenden Beispiel werden ein paar Möglichkeiten vorgestellt, um Links anders hervorzuheben.

Beispiel 4