CSS :focus und :active – Tast(en)sinn auf Webseiten

Donnerstag, 15 Oktober 2009 12:48 MET

Thema:
Webgestaltung  
Stichworte:
, , ,  
 
Frau im Festkleid, mit Sonnenschirm und Handschuhen, bedient eine Tastatur
CSS :focus und :active – Tast(en)sinn auf Webseiten [hyperkontext | Weblog]
Bezugnahme 1

Insbesondere beim Einsatz von Hyperlinks mit Image-Replacements irritiert mitunter das visuelle Detail eines strichlierten Rahmens beim Klick, vor allem im Firefox. Begegnet wird dem oft mit der Unsitte, im CSS :focus auf 0 zu setzen. :active {outline:0;} wäre die geeignetere Anweisung.

Eine Seite zu ertasten kann viele Gründe haben. Wir dürfen der Tastatur nicht durch eine unbedachte CSS-Anweisung den Tastsinn auf Webseiten nehmen.

Tag der Tastatur

Dieses Jahr gibt es zwar keine explizite Blogparade, Robert Lender schrieb aber darüber, erklärt und rückt dieses Detail der Gebrauchs­tauglich­keit einer Webseite wieder in den Vordergrund: 15.10: 3. Internationaler Tag der Tastatur.

Das ruft natürlich auch mich wieder auf den Plan.

Vor zwei Jahren hat Robert den 15. Oktober zum internationalen Tag der Tastatur ausgerufen und bereits zwei Mal eine Blogparade dazu organisiert.

Zufällig erschien vor wenigen Tagen ein Artikel (Better CSS outline suppression), der die Aktualisierung meines vorjährigen Beitrag zum Tag der Tastatur provoziert.

Webseiten ertasten

Voriges Jahr berichtete ich über die Unsitte, mit der Anweisung :focus {outline:0;} den per Taste fokussierten Hyperlink, der standardmäßig im Firefox und IE mit einem dünn strichlierten Rahmen versehen ist, zu unterdrücken. Anschließend daran aber auch den Tastaturfokus nicht extra zu gestalten.

Bei Tastaturnavigation sehenden Auges bedeutet dies, dass wir nicht mehr sehen, wo wir uns auf der Seite befinden und welchem Hyperlink wir gerade folgen könnten.

Firefox und der Rahmen beim Klick

Insbesondere beim Einsatz von Hyperlinks mit Image-Replacements, irritiert mitunter das visuelle Detail eines strichlierten Rahmens beim Klick (mit der Maus).

2008 schrieb ich:

Der Firefox hat die eigenwillige Eigenschaft, den Zustand nach dem Klick mit der Maus auch als Fokus zu verstehen und die hierfür via CSS (Cascading StyleSheets) zugewiesenen Eigenschaften anzuzeigen. Werden der Pseudoklasse :focus keine Eigenschaften zugewiesen, dann kommt die Standardeinstellung zum Tragen, die einen fokussierten Link mit einem dünn gestrichelten Rahmen umgibt. Der Tastatur den Fokus zeigen

Nun, die Lösung für die visuelle Ästhetik – vor allem im Firefox – ist eigentlich so einfach, dass wir uns schämen müssten – die seit Jahren mit CSS arbeiten – noch nicht selbst darauf gekommen zu sein: Better CSS outline suppression.

:active {outline:0;}

Das wäre also beim Einsatz von Reset-Styles wohl die geeignete Anweisung, anstatt :focus auf 0 zu setzen.

Roger Johansson formulierte kürzlich ähnlich: It’s so simple I can’t believe I haven’t heard or thought of it before.

Eine wichtige Voraus­setzung erwähne ich noch der Voll­ständig­keit wegen für CSS-Neulinge.

Die Reihenfolge der Pseudoklassen

Die CSS-Pseudoklassen für (Hyperlink-)Zustände müssen in einer festgelegten Reihenfolge notiert werden, um auch wie gewünscht zu funktionieren:

  1. a:link (oder auch a.irgendeineklasse:link)
  2. a:visited
  3. a:focus (a:hover)
  4. a:hover (a:focus)
  5. a:active

Genaueres in einschlägiger Literatur oder Portalen und Tutorials wie zum Beispiel:

Tasten haben Sinn

Gerade die Mehrdimensionalität ist das Geniale am Hypermedium Internet. Die unterschiedliche Benutzbarkeit ist ein Teil davon.

Eine Seite zu ertasten kann viele Gründe haben.

Mit der vorhin gezeigten Lösung gibt es nun nicht einmal mehr die Ausrede, den Tastaturfokus dem visuellen Perfektionismus opfern zu müssen.

Wir dürfen der Tastatur nicht durch eine unbedachte CSS-Anweisung den Tastsinn auf Webseiten nehmen.

Abschnitt 1 von 1

Verweise zum Thema

Externe Verweise dieses Artikels wurden zuletzt am 15. Oktober 2009 auf Relevanz geprüft.

Datum:
veröffentlicht am 15 Oktober 2009, 12:48 MET.
Artikel:
CSS :focus und :active – Tast(en)sinn auf Webseiten [hyperkontext | Weblog]
(twittern)
Kurz-URL:
http://hyperkontext.at/s/228
Thema:
Webgestaltung 
Stichworte:
, , ,  
Reaktionen:
Bezugnahme 1

externe Bezugnahmen (1) ansehen

Dieser Artikel bezieht sich intern auf frühere Einträge:

Dieser Eintrag kann nicht mehr kommentiert werden.

Mögliche themenverwandte Artikel aus dem Weblog

Blättern (chronologisch)

« neuerer Artikel
Rückblick: A-Tag 2009 in Wien oder Panta rhei und dann sind wir tot
älterer Artikel »
September 2009 im Kontext