Webkrauts

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Verliere nicht den :focus

Nutzer einer Tastatur freuen sich, wenn eine Webseite auch grafisch deutlich macht, wo sich gerade der Fokus befindet. Das geschieht oft mit einer einfachen Outline. Designer hingegen möchten die Outline in der Regel lieber unterdrücken. Patrick H. Lauke zeigt heute, wie Webworker es beiden Gruppen recht machen können.

User, die keine Maus verwenden können, benutzen bekanntlich die Tastatur (oder andere Tastatur-ähnliche Benutzerschnittstellen), um Webseiten zu navigieren. Normalerweise werden TAB und SHIFT + TAB dazu verwendet, um sich von einem fokussierbaren Element (Links, Formularfelder und area) zum nächsten zu bewegen.

Hinweis: In OS X muss Tastatur-Bedienung erstmal in System Preferences > Keyboard and Mouse > Keyboard Shortcuts angeschaltet werden. Bei Safari unter Windows muss die Option Press Tab to highlight each item on a webpage in Preferences > Advanced aktiviert sein. Opera verhält sich vollkommen anders, da es hier eine Vielzahl an Shortcuts gibt – der wichtigste hier ist der sogenannte spatial navigation mittels Shift+Down, Shift+Up, Shift+Left, und Shift+Right).

Damit diese User wissen, wo sie sich auf der Seite befinden, setzen Browser ein outline um das Element, das zur Zeit den Fokus hat. Das Problem ist, dass einige Browser (Internet Explorer und Firefox) outline auch anzeigen, wenn ein fokussierbares Element mit der Maus aktiviert wird. Vor allem bei Websites, die »off left« Image-Replacement Techniken verwenden, kann dies zu recht unschönen Rahmen führen, die sich bis zur linken Ecke des Browsers ausbreiten.

Image-Replacement Beispiel von carsonified.com

Mit einem einfachen overflow: hidden kann outline gezügelt werden.

Mit overflow:hidden wird der Rahmen unter Kontrolle gebracht

Für viele Designer ist dies aber nicht genug – der Rahmen wird deshalb oft gänzlich im Stylesheet unterdrückt. Selbst Eric Meyers beliebtes reset.css – ansonsten sehr nützlich, um die verschiedenen Browser auf eine gemeinsame CSS Darstellung zu bringen – unterdrückt outline.

html, body, div, span, applet, object, iframe ... {
  ...
  outline: 0;
  ...
}
/* remember to define focus styles! */
:focus {
  outline: 0;
}

Eric mahnt zwar Designer, dass sie doch bitte separat ihre »focus styles« setzen sollen, aber viele Websites ignorieren das einfach (und nehmen oftmals sogar den Kommentar hierzu im CSS gänzlich raus).

Hurra! Die Rahmen sind von unserem schönen Design verschwunden. Aber wie sieht das ganze für Keyboard-Nutzer aus? Obwohl sie zwar immer noch mittels TAB navigieren können, gibt es keine Anzeige mehr, wo sich der Fokus befindet (außer in Opera, wo outline nicht durch Stylesheets unterdrückt werden kann).

Gibt es einen Weg, outline für diese User-Gruppe zu erhalten, und die Rahmen nur für Maus-User verschwinden zu lassen?

Tests mit umständlichen Style-Kombinationen

Nach verschiedenen Versuchen (siehe Better CSS outline suppression), schien die einfachste und eleganteste Lösung zu sein, outline nicht für :focus, sondern nur für :active zu unterdrücken – :active ist ja eigentlich die dynamische »pseudo-class«, die mit der Aktivierung von fokussierbaren Element zusammenhängt.

a:active { outline: none; }

Leider hat's da einen Haken: Wenn zum Beispiel ein Link angeklickt wird, erhält dieser auch den Fokus. In der kurzen Zeit zwischen einem Mausklick und dem Laden der neuen Seite erscheint outline wieder. Die etwas weniger elegante Lösung fügt noch :hover hinzu.

a:hover, a:active { outline: none; }

Das einzige verbleibende Problem: wenn ein User einen Link aktiviert und dann per Browser-Knopf Zurück auf die vorherige Seite geht, erscheint der outline nun doch wieder. Ach ja, und ältere Versionen von Internet Explorer sind sich ja nicht ganz klar, was :focus, :hover und :active eigentlich bedeuten – aber damit kann ich persönlich leben.