Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Verliere nicht den :focus

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.

Ein sich nach links ausbreitender Rahmen

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

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

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.

Kommentare

Markus
am 11.12.2009 - 07:44

Warum eigentlich nicht dem :focus & :active die gleichen Eigenschaften wie :hover (bzw. der entsprechende .selected/.current - klasse)? Damit wären Designer und Tastaturuser gleichermassen zufrieden.

Permanenter Link

Schepp
am 11.12.2009 - 10:26

Hmm... ich hab ein Déjavu :) #24ways #rissindermatrix

Guter Artikel, weil auch wieder eher seltenes Thema. Die CSS-Eigenschaft "outline" war mir bislang vollkommen unbekannt. Danke dafür!

Permanenter Link
Patrick Lauke

Patrick Lauke (Autor)
am 11.12.2009 - 11:16

"Warum eigentlich nicht dem :focus & :active die gleichen Eigenschaften wie :hover"

Hi Markus,

in meiner etwas laengeren Version auf 24 ways - don't lose your focus erwaehne ich das am Ende...hatte hier leider keinen Platz mehr ;)

Hier nochmal schnell eingedeutscht und nachgereicht als Addendum:

"Natuerlich werden viele Designer meinen, dass sie wissen was selbst fuer Keyboard-User besser ist. Vielleicht haben sie das outline enfernt und bieten statt dessen gut durchdachte :focus Styles an. Wenn diese Styles wirklich eine zuverlaessige Alternative fuer User sind, toll...aber ich wuerde trotzdem argumentieren - obwohl ich damit das Risiko eingehe, wie Jakob "blue underlined links" Nielsen rueberzukommen - dass es manchmal besser ist, die Defaults der Browser in Ruhe zu lassen. Ergaenzen, klar (und wenn man schon gute :hover styles definiert hat, diese auch bei :focus anzeigen)...aber nicht unterdruecken."

Aber wie's so schoen auf englisch heist: your mileage may vary. Solang du als Designer/Developer wenigstens Ahnung vom Problem hast und dich aktiv bemuehst, auch Keyboard-Benutzern das Leben nicht schwer zu machen, ist das schonmal was.

Permanenter Link

Edoardo
am 11.12.2009 - 19:19

Ich kann es gar nicht ausstehen, wenn ich »zurückgehe« und nicht sehe, auf welchen Link ich geklickt hatte. Ich finde es etwas absurd, outline unterdrücken zu wollen.

Permanenter Link

Jens Grochtdreis
am 12.12.2009 - 11:54

@Edoardo: Da gebe ich Dir recht. Aber keiner meiner bisherigen Kunden gibt Dir recht. Und die bezahlen die Chose. Und da sie sich keine Gedanken machen, was die Kunden denken und dies nicht erforschen, bleibt nur ihre Meinung. Und die ist genauso richtig und falsch, wie Deine.

Permanenter Link

GE
am 13.12.2009 - 13:27

Aber keiner meiner bisherigen Kunden gibt Dir recht. Und die bezahlen die Chose ... bleibt nur ihre Meinung. Und die ist genauso richtig und falsch, wie Deine.

He he, Jens, so kenne ich dich ja gar nicht ;-)

Sind das die ersten Folgen Deiner Selbstständigkeit? Steigender Toleranzpegel? ;-)

Permanenter Link

Die Kommentare sind geschlossen.