»Oops, wo bin ich?« – Ein Herz für Tastaturnutzer

In den meisten Style Sheets finden sich Angaben, wie sich Links bei Mausberührung verhalten sollen. Bedient man diese Seiten dann mit der Tastatur so stellt man schnell fest, dass die Entwickler dieses spezielle Nutzungsszenario offenbar nicht bedacht haben. Die Ursache: angegeben ist lediglich die :hover Pseudo-Klasse, :focus und :active fehlen hingegen. Dabei sind gerade letztere für Nutzer wichtig, die auf Eingabemethoden jenseits der Maus angewiesen sind.

Mit ein wenig Phantasie lässt sich diese Vorgabe aus der BITV-Bedingung 9.2 ableiten: »Jedes über eine eigene Schnittstelle verfügende Element muss in geräteunabhängiger Weise bedient werden können.« Zur Bedienung gehört nicht nur die technische Funktionalität, sondern immer auch die Wahrnehmbarkeit bei unterschiedlichen Nutzungsarten. Deutlicher wird in diesem Punkt das Prüfverfahren zur BIENE 2006 bei Prüfschritt 17.3, Sichtbarkeit des Fokus: »Prüfen Sie, ob der Fokus in jeder Position deutlich sichtbar ist. Berücksichtigen Sie bei der Prüfung auch die Formulare.«

Wie geht das?

Erst die Dopplung von :hover mit dem Tastatur-Äquivalent :focus und einem zusätzlichen :active ermöglicht es den Nutzern, jederzeit die aktuelle Position auf der Seite im Auge zu behalten. Wie dies in der Praxis aussieht sehen Sie im Quelltext unserer Beispieldatei. Wenn man es auf die Spitze treiben will, dann lassen sich per CSS auch mögliche Kombinationen von Link-Zuständen abfangen und gegebenenfalls unterschiedlich formatieren. Mit dem Selektor input:focus:hover lassen sich zum Beispiel Eingabefelder für den Fall formatieren, dass sie schon fokussiert sind und zusätzlich noch mit der Maus überfahren werden.

Dass die Selektoren in einer ganz bestimmten Reihenfolge notiert werden müssen liegt am C in Cascading Style Sheets – die Kaskade würde z.B. bei einer Reihenfolge hover, link, visited, … dafür sorgen, dass der :hover-Effekt bei besuchten Links nicht mehr funktioniert. Daher sollten Sie die Reihenfolge :link, :visited, :hover, :active unbedingt einhalten. Merken können sie sich die Reihenfolge mit der Eselsbrücke LVHA (Las Vegas Hells Angels). Nimmt man den fokussierten Zustand (:focus) noch hinzu, dann ergibt sich die Eselsbrücke LVFHA (Lord Vaders Former Handle Anakin).

Deutlicher Fokus auch bei Bildern

Schwierig wird es, einen gleichwertigen Effekt für Bilder zu erzielen, die gleichzeitig ein Link sind und somit in der Tab-Reihenfolge liegen. Die meisten Browser zeigen zwar eine dünne Umrandung an, sobald man per Tastatur auf einen Link kommt. Allerdings ist diese Umrandung oft so subtil, dass sie vom Nutzer kaum wahrgenommen wird. Zudem lässt sich dies für die meisten Browser durch a {outline:none;} unterdrücken.

Verlinkten Bildern kann man mit den begrenzten Möglichkeiten von HTML & CSS keine anderen Zustände wie z.B. den Wechsel der Hintergrundfarbe bei :hover und :focus mitgeben, ohne das Bild selbst zu ändern (z.B. durch zusätzliche transparente Bereiche) oder es per JavaScript auszutauschen. Bilder ausschließlich als CSS-Hintergrundbilder einzubetten und dann im Fokus-Zustand das background-image-Property auszutauschen ist keine gute Idee, da Hintergrundbilder bei benutzerdefinierten Farben unter Windows nicht mehr angezeigt werden.

Verlinkte Bilder bei :hover und :focus mit einem sichtbaren Rand zu versehen ist ebenfalls keine Lösung. Hier schlägt das CSS-Box-Modell zu, wo Ränder zu den Dimensionen einer Box hinzuaddiert werden. Dies hätte z.B. bei a:focus {border: 4px solid red} den Effekt, dass der nachfolgende Text um 4 Pixel rauf und runter springt, sobald man das Bild mit der Maus berührt.

In eng bemessenen Spalten (z.B. bei Bannern in einer schmalen Marginalspalte) würde diese Methode die Breite des Bild-Elementes so vergrößern, dass dieses unter Umständen nicht mehr in die Spalte passt. Das wiederum würde im Extremfall in flexiblen Layouts dazu führen, dass die Spalte beim antabben des verlinkten Bildes an eine andere Stelle verrutscht (sog. float drop).

Die bessere Alternative a:focus {outline: 4px solid red} würde diesen unerwünschten Effekt zwar vemeiden, aber sie wird vom marktführenden Browser nicht unterstützt und fällt somit auch flach. Das insbesondere in Gecko-basierten Browsern wie Firefox zu beobachtende Verhalten, dass beim Antabben eines verlinkten Bildes ein farbiger Balken unter dem Bild erscheint ist eine Eigenart, auf die man sich auch nicht verlassen kann und zudem für einen deutlichen Fokus nicht ausreichend.

Was tun? Drei Lösungsmöglichkeiten

Wir benötigen also eine Lösung, die allen Nutzungsszenarien gerecht wird, bei der man im Idealfall das HTML einer Seite nicht ändern muss, die mit wenigen Zeilen zusätzlichem Code im CSS auskommt, und die möglichst wenig Arbeit in Photoshop verursacht. Kurz: etwas, dass sich bei einer bestehenden Site einfach nachrüsten lässt.

Variante 1: Bilder mit Transparenz

Bei dieser Variante müssen Sie den HTML-Code Ihrer Seiten nicht unbedingt verändern, da sich die Bemaßungen der eingebetteten Bilder nicht zwangsläufig ändern müssen. Allerdings hat dies zur Folge, dass sich die sichtbare Fläche der Abbildungen verkleinert, weil Sie ein paar Pixel Platz zur Erzielung des Effekts benötigen. Alternativ können Sie die Fläche der Bilder auch um die benötigten Pixel erweitern – dann allerdings müssen Sie auch deren Bemaßungen im HTML entsprechend ändern.

Für welche Variante Sie sich auch entscheiden, Sie müssen zunächst in einer geeigneten Bildverarbeitung einen mehr oder weniger schmalen transparenten Bereich um Ihre Bilder legen:

Im nächsten Schritt definieren Sie im Style Sheet Ihrer Website eine Hintergrundfarbe für Bilder, die der jeweiligen Hintergrundfarbe der Seite bzw. Spalte entspricht:

1. img {
2. background-color: #fff;
3. }

Als nächstes wird die Hintergrundfarbe des Bildes für den Fall geändert, dass dieses Bild den Fokus per Tastatur erhält oder mit der Maus überfahren wird:

4. a:focus img, a:hover img, a:active img {
5. background-color: #f00;
6. }

Die Transparenzen in den Bildern sorgen nun dafür, dass die Hintergrundfarbe durchscheint und dem Nutzer wie ein 2 Pixel breiter roter Rahmen erscheint. Noch ein Warnhinweis: bei späteren Designänderungen muss man unter Umständen alle Bilder einer Website erneut anfassen, daher sollte man diese Methode nur nach Abwägung aller Vor- und Nachteile einsetzen.

Variante 2: Bilder mit Rahmen

Variante 2 ist ohne Eingriffe in die vorhandenen Bilder zu bewerkstelligen, allerdings setzt sie ein Layout voraus, das einen zusätzlichen Rahmen von 1-2 Pixel Breite verkraften kann. Der Trick hierbei: die verlinkten Bilder haben grundsätzlich einen Rahmen, die Rahmenfarbe entspricht der Hintergrundfarbe und wird erst geändert, sobald das Bildelement bzw. genauer gesagt der umgebende Link den Fokus erhält oder mit der Maus berührt wird.

1. a:link img {
2. background-color: #fff;
3. border: 2px solid #fff;
4. }
5. a:focus img, a:hover img, a:active img {
6. background-color: #f00;
7. }

Diese Variante passt allerdings nicht unbedingt in jedes Design, da immer ein Rahmen vorhanden ist. Wenn der Hintergrund der Spalte, in der die Grafik sich befindet, nicht monochrom ist, sondern zum Beispiel ein Farbverlauf, dann ist der Rahmen vor diesem Hintergrund auch zumindest teilweise sichtbar.

Variante 3: CSS-Voodoo

Die eleganteste Lösung ist wie so oft ganz einfach. Mit ein wenig fortgeschrittenem CSS erreicht man denselben Effekt, ohne dass man dafür sämtliche Bilder in Photoshop mit einer zusätzlichen transparenten Zone versehen muss.

Die einzelnen Schritte

Zunächst erreichen wir, dass durch:

1. #rechtespalte a img {
2. display:block
3. }

aus der Zeilenbox eine Block-Box wird, die automatisch der exakten Größe des Bildes entspricht. Bilder stehen in ihrem Container auf einer gedachten Schriftlinie und von vielen Browsern würde ohne diese Vorkehrung vorsorglich Platz für Unterlängen von eventuell daneben stehendem Text reserviert.

Als nächsten heben wir die Bilder aus dem normalen Fluss des Dokumentes heraus und bereiten Sie durch overflow:hidden auf das vor, was im darauf folgenden Schritt kommt:

4. a.rahmen, a.rahmen img {
5. float: left;
6. overflow:hidden;
7. }

Als nächstes definieren wir für die :hover- und :focus-Zustände einen deutlichen Rahmen:

8. a.rahmen:focus, a.rahmen:hover {
9. border:2px solid #533B2f;
10. }

Dann verschieben wir diesen um die exakte Breite des Rahmens nach innen, indem wir dem enthaltenen Bild einen negativen Außenabstand geben, sobald es fokussiert wird:

11. a.rahmen:focus img, a.rahmen:hover img {
12. margin: -2px;
13. }

Der float-Zustand des Bildes sorgt nun dafür, dass der Rand die Dimensionen des Bildes nicht erweitert und der negative Außenabstand des Bildes verschiebt den Rahmen des Links nach innen. Fertig ist der universelle Fokus-Anzeiger.

Ein Bonus-Effekt zum Schluss: :target für Sprungmarken

In der Beispieldatei findet sich noch eine weitere Pseudo-Klasse, die wahrscheinlich kaum angewandt wird, weil der Internet Explorer sie nicht versteht. Dies sollte sie aber nicht davon abhalten, moderneren Browsern ein bisschen mehr Komfort und Übersicht zu geben.

Beim Klick auf den Seiten-internen Link Zur Überschrift tritt der :target-Selektor in Aktion und färbt die angesprungene Headline um. :target wurde vom W3C neu im zurzeit in der Entwicklung befindlichen CSS 2.1-Standard eingeführt und wird schon von vielen grafischen Browsern unterstützt.

Besonders sinnvoll ist die Verwendung dieser Pseudo-Klasse auf Seiten mit einer Vielzahl von internen Links, wie zum Beispiel in FAQs, wo wir sie auch hier bei ›Einfach für Alle‹ einsetzen.