Das Rückgrat eines Webauftrittes: Die Navigation

Hinweise zu Farben und Kontrasten

Allgemeine Möglichkeiten zur Hervorhebung .
border als Unterscheidungsmerkmal .
Hervorhebung abhängig vom Benutzerverhalten .

Der direkte Zugriff

Um die aktuelle Position im Webauftritt hervorzuheben, wird oft eine farbliche Kennzeichnung eingesetzt. Nach Bedingung 2.1 dürfen jedoch Informationen nicht alleine durch Farbe gekennzeichnet werden.

Zum besseren Verständnis: Wenn die aktuelle Position in der Navigation sich nur durch Vorder- und Hintergrundfarbe von den anderen Navigationspunkten unterscheidet, kann dies möglicherweise aus verschiedenen Gründen nicht wahrgenommen werden. Einerseits kann es durch eine unglückliche Wahl der Farben dazu kommen, dass jemand diese nicht unterscheiden kann, sei es weil er farbfehlsichtig ist und die Farben nicht deutlich voneinander unterscheiden kann oder sei es weil er eine Hard- und Softwarekombination einsetzt, die Farben nicht optimal anzeigt. Andererseits sind die individuellen Bildschirmeinstellungen des (sehbehinderten) Nutzers zu berücksichtigen; wer blendempfindlich oder stark farbfehlsichtig ist kann in jedem Browser Text- und Hintergrundfarbe so bestimmen, dass es seinen Bedürfnissen entspricht. Im letzten Fall werden Farbangaben auf einer Webseite vom Browser ignoriert. Schließlich müssen auch alternative Ausgabemedien wie Screenreader bedacht werden, die ebenfalls Farben nicht ausgeben.

Allgemeine Möglichkeiten zur Hervorhebung

Die Hervorhebung der "aktuellen Rubrik" erfolgt zunächst über folgende Merkmale:

die Hintergrundfarbe hat sich geändert
die Textfarbe hat sich geändert

Hier entsteht aber eine Barriere! Nicht jeder kann alle Farben erkennen. Die Vermittlung von Informationen alleine durch Farbe muss deswegen durch weitere Merkmale ergänzt werden. Möglichkeiten sind:

vorangestellte Symbole (Pfeil, Punkt, Bild ...)
andere Textformatierung (Schriftart, Schriftstärke...) oder
Änderung der Rahmendicke

Es gibt sicher noch weitere Möglichkeiten. Für unser Beispiel werden die erste und dritte Möglichkeit ergänzend zu den farblichen Änderungen als Zusatzmerkmale hinzugezogen. Das Symbol wird aus dem Grund genutzt, weil es auch dazu beiträgt, Bedingung 14.2 zu erfüllen:

Darstellung der Navigation mit unterscheidbaren Hintergrundbildern für die unterschiedlichen Arten von Navigationspunkten (Haupteintrag, aktiver Haupteintrag, Unterpunkte)

#hauptnavigation ul li.aktiv div.aktiv { color: #EE3338; background: url(img/list_icon_11.gif) no-repeat 10px 0.7em #FFF; padding: 6px 7px 6px 24px; } #hauptnavigation ul li ul li.aktiv { color: #EE3338; background: url(img/list_sub_1.gif) no-repeat 20px 0.45em #FFF; } #hauptnavigation ul li a { background: url(img/list_icon_00.gif) no-repeat 10px 0.7em; padding: 6px 7px 6px 24px; } #hauptnavigation ul li ul li a { background: url(img/list_sub_0.gif) no-repeat 20px 0.45em; padding: 4px 7px 4px 34px; }

[intern] Schritt 5 (von 10) in der Browserdarstellung anzeigen .

#hauptnavigation ul li.aktiv div.aktiv: Der "aktive" Haupteintrag erhält ein anderes Hintergrundbild.
#hauptnavigation ul li ul li.aktiv: Die Unterpunkte erhalten auch ein unterscheidbares Hintergrundbild.

Die CSS-Deklarationen weisen den verschiedenen Zuständen der Hauptnavigation unterschiedliche Hintergrundbilder zu. Die Hintergrundbilder haben neben unterscheidbare Farben auch unterschiedliche Symbole auf der linken Seite für die zwei Zustände der Hauptnavigation sowie für die Unterpunkte.

Wenn Sie nun denken, damit sei der Hervorhebung in der Navigation genüge getan müssen wir Sie leider enttäuschen. Optisch am Bildschirm und mit normalen Bildschirmeinstelllungen (und einem CSS-fähigen Browser!) stimmt dies, aber wie sieht es mit einer Sprachausgabe oder bei individuellen Bildschirmeinstellungen aus? Weil das Symbol als Hintergrundgrafik per CSS eingebunden ist, gibt es keine Möglichkeit für Screenreader den Inhalt zu erfassen. Dazu lesen Sie im nächsten Abschnitt mehr. Bei individuellen Bildschirmeinstellungen kann es jedoch dazu kommen, dass eine eigene Hintergrundfarbe gewählt wird und somit auch alle Hintergrundbilder einschließlich des Symbols nicht mehr angezeigt werden. So schön die Hervorhebung durch Symbole ist, so bedarf es mindestens eines weiteren Unterscheidungsmerkmales, um die aktuelle Position in der Navigation hervorzuheben.

`border` als Unterscheidungsmerkmal

Die CSS-Eigenschaft border bietet sich insbesondere deswegen als ergänzendes Unterscheidungsmerkmal an, weil sie bei individuellen Farbeinstellungen in der Textfarbe des Benutzers dargestellt wird. Das gilt insbesondere für den Internet Explorer und für Mozilla-Browser. Mit dem Rahmen kann also ein Formatierungsmerkmal vermittelt werden, dass auch unter solchen Extrembedingungen dargestellt wird. Das schöne ist: Das muss bei "normalen" Bildschirmeinstellungen nicht mal sichtbar sein!

Die CSS-Gestaltung der Haupteinträge könnte dann wie folgt ergänzt werden:

Darstellung im Browser - kein Unterschied zum vorherigen Screenshot erkennbar

#hauptnavigation ul li.aktiv div.aktiv { border-left: 5px solid #FFF; background: url(img/list_icon_11.gif) no-repeat 5px 0.7em #FFF; padding: 6px 7px 6px 19px; } * html #hauptnavigation ul li.aktiv div.aktiv { background-position: 10px 0.7em; } #hauptnavigation ul li ul li.aktiv { border-left: 10px solid #A9B0D7; background: url(img/list_sub_1.gif) no-repeat 10px 0.45em #FFF; padding: 4px 7px 4px 24px; }

[intern] Schritt 6 (von 10) in der Browserdarstellung anzeigen .

#hauptnavigation ul li.aktiv div.aktiv: Hier wird für den "aktiven" Hauptpunkt ein Rahmen links gesetzt in derselben Farbe wie der Hintergrund. Bei Standardeinstellungen ist der Rahmen somit nicht sichtbar.
* html #hauptnavigation ul li.aktiv div.aktiv: Diese Deklaration ist für den Microsoft Internet Explorer erforderlich, der die Hintergrundbilder dieser Konstruktion etwas anders berechnet als richtige Browser.
#hauptnavigation ul li ul li.aktiv: Auch die Unterpunkte erhalten eine (andere) von den restlichen Hervorhebungen unterscheidbare Kennzeichnung.

Darstellung im Browser mit invertierten Farben - Hintergrund und Symbole sind nicht erkennbar, aber die Rahmen sind deutlich sichtbar

Hier wird nun der aktuellen Hauptrubrik ein linker Rahmen von 5 Pixel Dicke gegeben. Die Farbe des Rahmens ist dieselbe, wie die Farbe des Hintergrunds und somit normalerweise nicht sichtbar. Nur wenn der Benutzer eine eigene Farbdarstellung im Browser wählt wird dieser Rahmen in der Textfarbe angezeigt und sollte deutlich erkennbar sein. Die horizontalen Linien im Screenshot wurden im Übrigen im vorherigen Teil dieser Artikelserie beschrieben - es handelt sich um die sonst farblich gekennzeichnete, untere Begrenzung der Hauptrubriken!

Dieses Verfahren sollte man ausweiten, indem für alle unterscheidbaren Status die Mehrfachkennzeichnung auch über den Rahmen erfolgt. Am Ende dieses Beitrages finden Sie auch ein komplettes Beispiel zum Herunterladen.

Hervorhebung abhängig vom Benutzerverhalten

Ergänzend zu den oben beschriebenen Unterscheidungsmerkmalen kann natürlich auch mit Mouse-Over- und Fokuseffekten gearbeitet werden. Wenn der Benutzer den Mauszeiger auf ein bestimmtes Element der Navigationsleiste führt oder mit der Tabulatorentaste entsprechend zu einem Link springt ist im Sinne der Gebrauchstauglichkeit die Vermittlung der Information, "hier dürfen Sie klicken", nützlich.

Darstellung der Hervorhebung durch Mouse-Over bei Standardbildschirmeinstellungen

Darstellung der Hervorhebung durch Mouse-Over bei benutzerdefinierten Farben

#hauptnavigation ul li.aktiv div a { border-left: 5px solid #DFE1F0; padding-left: 19px; background-position: 5px 0.7em; background-image: url(img/list_icon_10.gif); } #hauptnavigation ul li.aktiv div a:hover, #hauptnavigation ul li.aktiv div a:focus, #hauptnavigation ul li.aktiv div a:active { border-left-color: #FFF; } #hauptnavigation ul li a:hover, #hauptnavigation ul li a:focus, #hauptnavigation ul li a:active { background-color: #FFF; border-left: 5px solid #FFF; border-right: 5px solid #FFF; padding-left: 19px; padding-right: 2px; background-position: 5px 0.7em; } #hauptnavigation ul li.aktiv div a:hover, #hauptnavigation ul li.aktiv div a:focus, #hauptnavigation ul li.aktiv div a:active { border-left-color: #FFF; } #hauptnavigation ul li ul li a:hover, #hauptnavigation ul li ul li a:focus, #hauptnavigation ul li ul li a:active { background-color: #FFF; border-left: 5px solid #FFF; border-right: 5px solid #FFF; padding-left: 29px; padding-right: 2px; background-position: 15px 0.45em; }

[intern] Schritt 7 (von 10) in der Browserdarstellung anzeigen .

#hauptnavigation ul li.aktiv div a: Der "aktive" Haupteintrag bekommt immer einen linken Rahmen; deshalb muss der Innenabstand um die Breite des Rahmens für den Link korrigiert werden. Entsprechend muss auch das Hintergrundbild neu positioniert werden bzw. ein anderes Hintergrundbild eingebunden werden, da er sich von den anderen unterscheiden soll.; Hinweis: Das gilt nur, wenn ein Unterpunkt ausgewählt ist. Damit müsste der Haupteintrag wieder als Link ausgezeichnet werden und der Unterpunkt nicht. Hierzu siehe das vollständige Beispiel zum Herunterladen am Ende des Beitrags.
#hauptnavigation ul li.aktiv div a:hover, #hauptnavigation ul li.aktiv div a:focus, #hauptnavigation ul li.aktiv div a:active: Für einen Haupteintrag bei ausgewähltem Unterpunkt müssen auch die Maus- und Tastaturhervorhebungen antsprechend angepasst werden.
#hauptnavigation ul li a:hover, #hauptnavigation ul li a:focus, #hauptnavigation ul li a:active: Für die Hervorhebung eines Haupteintrags bei Mausberührung oder Tastaturfokus bekommt der dazugehörige Link rechts und links einen Rahmen; der Innenabstand muss um die Breiten der Rahmen verringert werden. Aufgrund dessen muessen wir auch das Hintergrundbild neu positionieren.
#hauptnavigation ul li.aktiv div a:hover, #hauptnavigation ul li.aktiv div a:focus, #hauptnavigation ul li.aktiv div a:active: Die Farben der Rahmen werden auf die Farben der Hervorhebung (Mouse-Over, Fokus) angepasst.
#hauptnavigation ul li ul li a:hover, #hauptnavigation ul li ul li a:focus, #hauptnavigation ul li ul li a:active: Im Prinzip wie oben, aber für die Unterpunkte sind wie gehabt einige besondere Positionierungsangaben zu berücksichtigen.

Hier wird das Beispiel zunächst um einen Mouse-over-Effekt ergänzt, der die Farben bei Mausberührung verändert. Mit dem Pseudoattribut a:focus wird dieselbe Hervorhebung für den Fall generiert, dass der Benutzer mit der Tastatur navigiert.

Es wurde auch eine ergänzende Hervorhebung für den Fall berücksichtigt, dass der Benutzer individuelle Farben eingestellt hat. Auch hier wurde ein linker Rahmen von 5 Pixel gewählt, der allerdings in individuellen Bildschirmeinstellungen genauso aussieht, wie die oben beschriebene Hervorhebung der Hauptnavigation. Für die Mouse-over- und Fokuseffekte wurde also eine weiterer rechter Rahmen ergänzt. Beide Rahmen sind bei Standardbildschirmeinstellungen nicht erkennbar.

vorherige Seite Übersicht nächste Seite