Webkrauts: Für mehr Qualität im Web.

Artikel

Verliere nicht den :focus

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.

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

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?

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.

Zum Autor

Patrick H. Lauke ist Web Evangelist im Developer Relations Team bei Opera Software. Er ist seit 2001 in der Diskussion rund um Standards und Barrierefreiheit engagiert – mit regelmässigen Vorträgen auf Konferenzen und Teilnahme an einer Veilzahl von Webentwicklungs- und Accessibility-Mailinglisten und Initiativen wie das Web Standards Project. Seine persönliche Ecke im Netz findet man unter http://www.splintered.co.uk.

Dies ist die deutsche Fassung eines entsprechenden Artikels von Patrick auf 24ways.com. Jener Adventskalender bietet noch viele weitere interessante Beiträge, alle in englischer Sprache.

Info:

Verliere nicht den :focus ist Beitrag Nr. 697

Autor:

Patrick Lauke am 11. Dezember 2009 um 07:00

Kategorie:

Adventskalender 2009

Kommentare

Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.

1. 1.
   

   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.

   Kommentar von Markus - 11. Dezember 2009 um 07:44

2. 2.
   

   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!

   Kommentar von Schepp - 11. Dezember 2009 um 10:26

3. 3.
   

   "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.

   Kommentar von Patrick H. Lauke - 11. Dezember 2009 um 11:16

4. 4.
   

   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.

   Kommentar von Edoardo - 11. Dezember 2009 um 19:19

5. 5.
   

   @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.

   Kommentar von Jens Grochtdreis - 12. Dezember 2009 um 11:54

6. 6.
   

   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?

   Kommentar von GE - 13. Dezember 2009 um 13:27

Kommentar-Feed für diesen Beitrag

Die Kommentarfunktion ist zur Zeit leider deaktiviert.