Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

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

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

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

In den Richtlinien zur Barrierefreiheit finden sich viele Vorgaben zur geräteunabhängigen Bedienung. Üblicherweise wird darunter die Bedienung _ohne_ Maus, also per Tastatur oder anderen Eingabegeräten verstanden. Dass es hierbei nicht nur um technische Aspekte geht, sondern auch um die Gestaltung, lest ihr in unserem heutigen Türchen.

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

Erst die Dopplung der :hover- und :focus- bzw. :active-Zustände ermöglicht es diesen Nutzern, jederzeit die aktuelle Position auf der Seite im Auge zu behalten. Wie man beides für die Nutzer bereitstellt siehst du im Quelltext unserer Beispieldatei.

Deutlicher Fokus auch bei Bildern

Schwierig wird es, einen gleichwertigen Effekt für Bilder zu erzielen, die gleichzeitig ein Link sind. Browser zeigen zwar eine dünne Umrandung an, sobald man per Tastatur auf einen Link kommt – allerdings ist diese oft so subtil, dass sie kaum wahrgenommen wird. Zudem lässt sich dies für die meisten Browser durch a {outline:none} unterdrücken.

Verlinkte Bilder bei :hover und :focus mit einem sichtbaren Rand zu versehen ist keine Lösung. Hier schlägt das CSS-Box-Modell zu, das Ränder zu den Dimensionen einer Box hinzuaddiert. 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. Die Alternative a:focus {outline: 4px solid red} würde diesen unerwünschten Effekt vermeiden, aber sie wird vom IE nicht unterstützt und fällt somit flach.

Die Lösung ist wie so oft ganz einfach: zunächst machen wir durch

#rechtespalte a img {
    display: block
}

aus der Zeilenbox eine Block-Box, damit Browser keinen Platz für die Unterlängen der gar nicht vorhandenen Buchstaben reservieren. 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:

a.rahmen, a.rahmen img {
    float: left;
    overflow: hidden;
}

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

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

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

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

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

Bonus-Effekt: :target für Sprungmarken

In der Beispieldatei findet sich noch eine weitere Pseudo-Klasse, die wahrscheinlich kaum angewendet wird, weil der IE sie nicht versteht. Dies sollte niemanden davon abhalten, moderneren Browsern mehr Ü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.

Kommentare

Matthias Koch
am 14.12.2007 - 08:40

Wirklich sehr gut erklärt, bei dir traue ich mich kaum etwas hinzuzufügen!

Doch, zum Bonus: Die Pseudoklassen, die Benutzeraktionen zugeordnet werden (:hover, :focus und :active sind in CSS 1 und 2 festgelegt. Die Notierung der Reihenfolge im Stylesheet ist hierbei auch von Bedeutung - hinsichtlich IE.
Dass aber der Bonuseffekt heute noch nicht in allen Browsern funktioniert, ist kein IE-spezifisches Problem. Nicht einmal der aktuelle Opera, der bekanntermaßen den Acid2Test schon länger besteht, kommt momentan mit der CSS 3-Pseudoklasse :target klar. Diesen Bonus kann aber schon Safari einlösen, auch der aktuelle FF versteht damit umzugehen.

Permanenter Link

/T
am 14.12.2007 - 08:48

@Matthias: alles richtig, und dazu könnte man noch viel viel mehr schreiben, aber das hätte dann nicht mehr in die selbstauferlegte Längenbegrenzung der Advents-Quickies gepasst :–)

Permanenter Link

iKArus
am 14.12.2007 - 08:49

Hmh, wenn ich ehrlich bin, habe ich die Tastatur-User bisher zumindest beim "Webdesign" bisher total vernachlässigt. (Und das mir, der permanent immer irgendwo eine Shell etc. offen hat.) Danke für den Wink mit dem Zaunpfahl und die gute Erklärung, werde ich mir für die Zukunft mal zu herzen nehmen. :)

Permanenter Link

Boris Stumpf
am 14.12.2007 - 11:40

Schön, daran erinnert zu werden, die via Tastatur angesteuerten Links auch z.B. mittels "text-decoration:underline;" für den "Focus"- und "Active"-Zustand erkennbar auszuzeichnen. Das hatte ich bei meinem eigenen WP-Theme glatt vergessen.

Permanenter Link

Daniel
am 14.12.2007 - 11:55

Hallo Thomas,

ein Thema, welches ich oft beim Besuchen anderer Internetseiten – teilweise auch bei angeblich barrierearmen – bemerkt habe. Auch hier gilt, wie so oft: kleiner Aufwand, großer Nutzen".
Danke für den Beitrag :-).

Viele Grüße,
Dan

Permanenter Link

Aakadasch
am 14.12.2007 - 16:17

@Boris: Eigentlich solltest du links IMMER per text-decoration: underline auszeichnen.

Permanenter Link

Rainer
am 17.12.2007 - 21:42

@Aakadasch: wer sagt das? Links sollen als solche erkennbar sein, das ist die Forderung. Optisch ist es Wurscht, ob ich underline oder eine border-bottom oder sonstwas nutze. Und die Optik zählt nur für den Sehenden.
Im Sinne der allgemeinen Erwartungshaltung mag eine Unterstreichung die beste Variante für Linkkennzeichnungen sein. Wichtig ist aber, dass ich Links innerhalb von Texten als solche identifizieren kann (durch Linien, Symbole und und und). Und zwar unabhängig von Farbschemata. Links in "geschlossenen" Navibereichen brauchen keine besondere optische Auszeichnung, da der Nutzer in der Regel einen "kompakten" Navigationsbereich erkennt (vereinfacht gesagt).
Tatsache ist aber, dass die meisten Entwickler den Tastaturnutzer vergessen und eben beim "Durchtabben" einer Seite keine Hervorhebungen bieten (focus), während sie dem Mouseover (hover) eventuell noch eine Chance gegeben haben.
Danke Tomas und allen schöne Weihnachten!

Permanenter Link

Michael
am 09.01.2008 - 00:09

1) Der Tipp hat mich darauf gestoßen, :active/:focus nicht nur für Links einzusetzen, sondern auch für meine über Links realisierten Infoboxen. Dabei: Mozilla/IE verwenden :active und :focus entgegengesetzt, und beim IE ist in der Tat die Reihenfolge wichtig.
Leider funktioniert :active ja nur bei Links und nicht bei div's etc. Ist dann eine Tastaturnavigation bei CSS-Menüs möglich?
2) Opera 9.5: Die beschriebene Tastaturnavigation + usw. funktioniert bei meiner Seite nicht, wohl aber mit . Allerdings komme ich mit nicht in den "Hauptteil" meiner Seite, sondern nur drumherum. Hat jemand ähnliche Erfahrung oder Abhilfe?
3) Danke für den target-Tipp!

Permanenter Link
Tomas Caspers

Tomas Caspers (Autor)
am 09.01.2008 - 08:15

»Leider funktioniert :active ja nur bei Links und nicht bei div's etc. Ist dann eine Tastaturnavigation bei CSS-Menüs möglich?«

Verständnisproblem: im CSS-Menü sind doch auch Links drin, oder? Sonst wäre es ja kein Navigationsmenü. Wenn ja, dann lassen sich die Dimensionen des enthaltenen Links per CSS auf die größe des umgebenden Containers ausdehnen und schon ist das ganze div anklickbar (bzw. fokussierbar).

»Opera 9.5: Die beschriebene Tastaturnavigation + usw. funktioniert bei meiner Seite nicht«

Opera hat grundsätzliche andere Tastaturbelegungen als alle anderen Browser, d.h. die gewohnten Shortcuts zur Tastaturnavigation aus FF, IE & Safari funktionieren dort nicht.

»Danke für den target-Tipp!«

Bitte

Permanenter Link

Ralph
am 14.04.2008 - 20:43

Ich muss leider auch gestehen, dass ich im Moment mir keine Gedanken über die Steuerung einer Website mit Hilfe der Tastatur mache. Am Rechner nutze ich dagegen sehr viel die Tastatur und sollte doch somit den Vorteil kennen. Ich werde es aber in meinen Lernplan mit aufnehmen. Vielen Dank für den Denkanstoß.

Ralph

Permanenter Link

Die Kommentare sind geschlossen.