Der Tastatur den Fokus zeigen

Donnerstag, 23 Oktober 2008 18:31 MET

Thema:
Webgestaltung  
Stichworte:
, , , , ,  
dieser Artikel  
Mann versucht mit Bildschirm und Tastatur auf dem Schoss zu tippen
Der Tastatur den Fokus zeigen [hyperkontext | Weblog]
Kommentare 2, Bezugnahme 2

Verantwortungsvolle Gestalterinnen beachten den sichtbaren Fokus für Tastaturbenutzer. Durch eigenwilliges Verhalten des Firefox bekam die Pseudoklasse :focus einen ungewollten Bekanntheitsgrad.

Ob wir nun die meist standarmäßig eingestellten Konturen um Hyperlinks bei Tastaturbedienung abschalten oder nicht ist Geschmacksache. Sinnvolle Bedienelemente aber vorsätzlich abzuschalten und dafür keine Alternative zu bieten ist konturlos.

Dieser Artikel ist ein Beitrag zur Blog-Parade zum Tag der Tastatur
Banner mit Aufschrift: 15.10. bis 25.11.2008 - Tab Parade

Die wichtigsten Tastaturoptionen

Seit Beginn des Computers wird dieser mit der Tastatur bedient. Die meisten haben das im Zeitalter der Maus wahrscheinlich nie beachtet oder schon wieder verlernt. Es gibt aber auch Menschen, die auf Tastaturbedienung ständig angewiesen sind. Und natürlich können wir uns durch Websites auch mit den Tasten navigieren.

In unzähligen Situationen ist es auch für Mausbenutzer durchaus praktisch und zeitsparend, so manchen Tastaturbefehl zu verwenden.

Hier nur drei der wichtigsten Tastaturgriffe für Webseiten, welche in fast allen gängigen Programmen so funktionieren:

  • Sequentiell von Hyperlink zu Hyperlink gehen:
    • Tab (im Opera die Taste A) - Vorwärts
    • Umschalt + Tab (im Opera die Taste Q) - Rückwärts

    Die meisten Programme zeigen mit den Grundeinstellungen eine Kontur um den gerade fokussierten Hyperlink. Durch betätigen der Eingabetaste wird der Verweis ausgewählt.

  • Zum nächsten Bildschirm-Ausschnitt (passt sich dem aktuellen Viewport an):
    • Leertaste - Bildschirm nach unten
    • Umschalt + Leertaste - Bildschirm nach oben
  • Seite zurück und vor
    • Alt + Linkspfeil - eine Seite zurück
    • Alt + Rechtspfeil - eine Seite nach vor

Eingefügt am 29. Oktober 2008:
Auf drweb.de erscheint ein Beitrag, der Tastaturkürzel für diverse Browser übersichtlich auflistet: 10 nützliche Browser-Tastaturkürzel. Leider wird im CSS dieses Blogs genau die von mir im folgenden Teil kritisierte Zeile eingesetzt, welche die Navigation dieser Website per Tastatur und sehenden Auges unmöglich macht; sofern nicht selbst eingestellte Stile der Benutzerinnen zum Einsatz kommen.

Das Problem aus Sicht der einäugigen Ästheten

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.

Wie bekomme ich diesen schiachen Rahmen beim Mausklick weg?

Auch wenn ich nicht mit der Tastatur durch die Verweise gehe, wird nach dem Klick mit der Maus solange ein kleiner Rahmen um den Hyperlink angezeigt, bis das Laden der angeklickten Seite beginnt.

Erst durch dieses Verhalten des Firefox bekam die Pseudoklasse :focus einen ungewollten Bekanntheitsgrad. Ohne alternative Gestaltung wird oft einäugig der Fokus für Tastaturbenutzer der Ästhetik konturloser Hyperlinks geopfert.

Die Lösung für Blinde und Einäugige

a:focus {outline:0}
- Einäugige sehen keine Kontur mehr mit der Maus und Blinden (Suchmaschinen) ist es vollkommen egal.

Auf Blogs wird oft der – leider nur halb gekochte – Tipp herumgereicht, in sein Stylesheet ganz einfach a:focus{outline:0} zu schreiben um den Rahmen beim Fokussieren abzuschalten.

Dass im Gegenzug der Status :focus zumindest auch in den selben Definitionen wie für den allseits beliebten :hover Zustand angeführt werden sollte, bleibt außen vor und macht die Sache nur halbgar.

Die konturlose Website

Für einige Benutzer – nämlich die, welche sehenden Auges mit der Tastatur navigieren – und die meisten Browser – ausgenommen ist Opera, der sich seinen Rahmen nicht so einfach überschreiben lässt – ist solch ein halbgares CSS-Gericht aber ungenießbar. Diese Leute tasten und tabben sich zu einem Hans Wurst und sehen trotzdem am Bildschirm keine erkennbaren Möglichkeiten der Interaktion. Bestenfalls beim Starren auf die Statusleiste in einigen Programmen.

Besonders zu erwähnen sind die herumgereichten sogenannten Reset-Styles, welche meist diese Zeile inkludiert haben. Gerne und oft werden die vorgefertigten Zurücksetzer von Leuten eingesetzt, die sich der Tragweite und den Details dieses Einsatzes nicht bewusst sind und das als CSS-Rundum-Sorglos-Paket verstehen.

Die Lösung für Alle

  1. Entweder wir greifen die Pseudoklasse :focus überhaupt nicht an und überlassen es dem jeweiligen Ausgabegerät, wie das angezeigt wird.

    Im Firefox ist der dünne gestrichelte Rahmen bei der Tastaturbenützung oft auch etwas zu wenig. Safari und Opera zeigen eine gut sichtbare blaue Kontur. Außerdem zeigen beide auch nach dem Klick mit der Maus keinen Rahmen an, im Gegensatz zu Firefox und IE (Internet Explorer).

  2. Oder wenn wir den Standardrahmen beim Fokussieren wie vorhin erklärt abschalten, müssen wir der Pseudoklasse :focus andere sichtbare Eigenschaften zuweisen.

    Im Unterschied zum Überfahren mit der Maus, wo ich ja eine räumliche Komponente habe und sehe, worüber ich gerade den Zeiger halte, muss der Fokus mit der Tastatur deutlich sichtbar gemacht werden. Ohne Maus fällt das Abtasten des Raumes weg und mögliche Interaktion kann nur über unmissverständliche Signale am Bildschirm erfolgen.

    Hier muss also abgeklärt werden, ob die zugewiesenen Eigenschaften für :hover auch bei :focus reichen. Weiters ist die Problematik mit Bildern als Hyperlink zu beachten. Hierzu hat Tomas Caspers vor längerer Zeit einen aufschlussreichen Beitrag geschrieben: Oops, wo bin ich? – Ein Herz für Tastaturnutzer – Anmerkung: Mittlerweile unterstützt der IE8 den Einsatz von :focus und die Anweisung outline.

Ich seh, ich seh, was du nicht willst

Wenn wir auf Tastaturnutzung angewiesen sind oder es gar nicht mögen, dass uns manche vorschreiben wollen ob und wie uns der Fokus angezeigt wird, dann basteln wir uns schlicht unseren eigenen Stil.

Opera lässt sich übrigens nur schwer von seinem voreingestellten Stil abbringen. Das ist nur eine oberflächliche Feststellung, da ich diesen Browser nicht ständig benutze. Vielleicht kann hierzu jemand mehr erhellende Informationen als Kommentar beisteuern.

Firefox

  1. about:config in die Adresszeile eintippen.

  2. Suchen Sie den Eintrag browser.display.focus_ring_on_anything - mit Doppelklick auf diese Zeile stellen Sie den Wert auf true.

  3. Wahlweise können wir auch die Breite der Kontur einstellen:

    1. browser.display.focus_ring_width - mit Doppelklick wählen wir im erscheinenden Fenster einen Wert zwischen 0 und 4.

  4. Wir können auch Text- und Hintergrundfarbe bestimmen:

    1. browser.display.use_focus_colors - schaltet mit Doppelklick den Einsatz der folgenden zwei Befehle ein oder aus, in die der hexadezimale Farbwert geschrieben wird:
      • browser.display.focus_background_color
      • browser.display.focus_text_color

Diese Einstellungen werden immer angezeigt, egal welche CSS-Anweisungen irgendwo stehen.

Safari, IE8 und auch Firefox

In Safari und IE lassen sich benutzerdefinierte Stylesheets über das Menü in den Einstellungen laden. Beim Firefox wäre – neben manuellem Einbinden – die günstigste Option, die Extension Stylish zu verwenden und damit sehr einfach ein paar benutzerdefinierte CSS-Zeilen einzubinden.

Hinweis:
Da der IE bis inklusive Zustandsnummer 7 die Pseudoklasse :focus nicht kennt, gibt es hier sowieso keine einstellbaren Optionen. Der IE8(beta) interpretiert :focus standardkonform. Alle zeigen aber beim Tabben immer einen dünnen Rahmen um einen fokussierten Hyperlink.

Wir brauchen in unser eigenes Stylesheet nur folgende einfache Zeile einfügen (die Werte und Farbangaben sind natürlich Geschmacksache): 

a:focus{outline: .3em solid blue !important}

Die zusätzliche Anweisung !important macht die Sache dann vor allem gegen die weitverbreitete Zurücksetz-Fraktion (a:focus{outline:0}) immun; solange die nicht wiederum glauben, dass sie auch ihre Anweisung mit !important untermauern müssen.

Website mit Kontur

Ob wir nun die meist standarmäßig eingestellten Konturen um Hyperlinks bei Tastaturbedienung via CSS umgestalten oder nicht ist Geschmacksache. Hier geht es weder um das Abwägen von Kosten- oder Zeiteffizienz, noch um relativierendes Herumgerede, dass ständige Tastaturnutzer sowieso wissen wie sie das im Browser fix einstellen.

Sinnvolle Bedienelemente vorsätzlich abzuschalten und dafür keine Alternative zu bieten ist konturlos.

Verantwortungsvolle Gestalterinnen beachten den sichtbaren Fokus für Tastaturbenutzer. Egal ob mit oder ohne Kontur, es verleiht der Website in jedem Fall die Kontur der Kompetenz.

Abschnitt 1 von 1

Verweise zum Thema

Verweise zur Blog-Parade zum Tag der Tastatur

Externe Verweise dieses Artikels wurden zuletzt am 1. Februar 2009 auf Relevanz geprüft.

Datum:
veröffentlicht am 23 Oktober 2008, 18:31 MET.
Artikel:
Der Tastatur den Fokus zeigen [hyperkontext | Weblog]
Kurz-URL:
http://hyperkontext.at/s/168
Thema:
Webgestaltung 
Stichworte:
, , , , ,  
Reaktionen:
Kommentare 2, Bezugnahme 2

Kommentare (2) und externe Bezugnahmen (2) ansehen

Interne Bezugnahme von neueren Artikeln

  1. CSS :focus und :active – Tast(en)sinn auf Webseiten vom 15. Oktober 2009
Dieser Eintrag kann nicht mehr kommentiert werden.

Mögliche themenverwandte Artikel aus dem Weblog

Blättern (chronologisch)

« neuerer Artikel
Oktober 2008 im Kontext
älterer Artikel »
Rezension: CSS-Praxis (5. Auflage)