Verweise im Text

Verweise sind gegenüber umfließendem Text deutlich hervorzuheben. Für die Gestaltung von Verweisen stehen die fünf Pseudoformate :link, :visited, :hover, :active und :focus zur Verfügung. Über Attribute zu Hintergrund, Textfarbe, Schriftgewicht, Abstände und Textdekoration können Verweise umfangreich gestaltet werden.
Stand 30.08.2012

Inhaltsübersicht:

1. Zustände von Verweisen
2. Gestaltungsmöglichkeiten bei Verweisen

Zustände von Verweisen

Verweise im Textfluss (engl. Embedded Links) sind gegenüber dem umfließenden Text deutlich hervorzuheben. Wie bereits im Artikel Verweise erwähnt, können Verweise verschiedene Zustände annehmen. Diese können in CSS über sog. Pseudoelemente formatiert werden.

Für die Gestaltung von Verweisen stehen die Pseudoformate :link (Verweise zu noch nicht besuchten Zielen), :visited (Verweise zu bereits besuchten Zielen), :hover (Verweise bei Mouse-over), :active (Verweise beim Anklicken) und :focus (Verweise, die per Tabulator den Fokus bekommen) zur Verfügung.

Schwarz, Blau, Violett und Rot sind die Standardfarben der Browser für Text, Verweise, besuchte Verweise und aktive Verweise. Mittlerweile gehen Nutzer davon aus, dass blauer Text einem Verweis entspricht. Farbig hervorgehobene Textstellen können beim Nutzer zu Verwirrung führen - farbiger Text ist daher bei barrierefreiem bzw. barrierearmem Webdesign der Kennzeichnung von Verweisen vorbehalten. Die gesonderte Kennzeichnung bereits besuchter Verweise ist für Nutzer eine zusätzliche Orientierungshilfe.

Seitenanfang

Gestaltungsmöglichkeiten bei Verweisen

Über Attribute zu Hintergrund, Textfarbe, Schriftgewicht, Abstände und Textdekoration stehen umfangreiche Gestaltungsmöglichkeiten zur Verfügung. Eine mögliche Formatierung von Verweisen im Textfluss ist im nachfolgenden Beispiel hinterlegt. In diesem Beispiel ist festgelegt, dass Verweise nicht unterstrichen (text-decoration: none), aber fett (font-weight: bold) dargestellt werden und dass Verweise zu noch nicht besuchten Zielen in Blau erscheinen, während Verweise zu besuchten Zielen in Violett und kursiver Schrift (font-style: italic) angezeigt werden (Hinweis: :visited - nur noch Farbeigenschaften). Verweise, auf die der Anwender gerade mit der Maus positioniert, werden mit der Textfarbe Rot hervorgehoben und zusätzlich durch Unterstreichung gekennzeichnet (text-decoration: underline). Aktive Verweise sowie Verweise, die per Tastaturnavigation den Fokus erlangen, erhalten eine rote Hintergrundfarbe und eine weiße Textfarbe. Um diese Zustandsänderung nicht alleine durch Farbe zu kennzeichnen, wird der Linktext zusätzlich unterstrichen.

Beispiel CSS-Datei - Verweise (Ausschnitt):

/* Verweis allgemein */ a:link {
/* Hintergrund: weiss */   background: #ffffff;
/* Textfarbe: blau */   color: #0000a3;
/* Schriftgewicht: fett */   font-weight: bold;
/* Außenabstand: keiner */   margin: 0;
/* Innenabstand: keiner */   padding: 0;
/* Textdekoration: keine */   text-decoration: none;
}
/* Bereits besuchter Verweis */ a:visited {
/* Hintergrund: weiss */   background: #ffffff;
/* Textfarbe: violett */   color: #5d005d;
/* Schriftstil: kursiv */   font-style: italic;
/* Schriftgewicht: fett */   font-weight: bold;
/* Außenabstand: keiner */   margin: 0;
/* Innenabstand: keiner */   padding: 0;
/* Textdekoration: keine */   text-decoration: none;
}
/* Verweis bei Mouse-over */ a:hover {
/* Hintergrund: weiss */   background: #ffffff;
/* Textfarbe: rot */   color: #b80000;
/* Schriftgewicht: fett */   font-weight: bold;
/* Außenabstand: keiner */   margin: 0;
/* Innenabstand: keiner */   padding: 0;
/* Textdekoration: unterstrichen */   text-decoration: underline;
}
/* Aktiver Verweis oder Verweis mit Fokus */ a:active,
a:focus {
/* Hintergrund: rot */   background: #b80000;
/* Textfarbe: weiss */   color: #ffffff;
/* Schriftgewicht: fett */   font-weight: bold;
/* Außenabstand: keiner */   margin: 0;
/* Innenabstand: keiner */   padding: 0;
/* Textdekoration: unterstrichen */   text-decoration: underline;
}

Das nachfolgende Bild zeigt die möglichen Layout-Varianten, die ein Verweis durch die angegebenen Formatierungen annehmen kann (von links nach rechts: unbesucht, besucht, Mouse-over, Fokus).

Bildbeschreibung "Verweise": Bildschirmfotos der vier Verweis-Zustände. Von links nach rechts: unbesucht, besucht, Mouse-over, Fokus.

Die Fokus-Eigenschaft wird bei der Website-Entwicklung oft vergessen. Ob die Fokus-Eigenschaft gesetzt wurde, kann durch die Navigation per Tabulator-Taste überprüft werden. Ändert sich ein Verweis visuell, wenn er den Fokus erhält, ist die Fokus-Eigenschaft hinterlegt. Erhält der Verweis nur einen kaum sichtbaren Rahmen, wurde die Eigenschaft bei der Realisierung nicht berücksichtigt.

:visited - nur noch Farbeigenschaften

Aufgrund einer bereits seit 2002 bekannten Sicherheitsproblematik mit der Browserchronik haben die Hersteller, vorangehend Mozilla, ab 2010 die Eigenschaften zur Gestaltung besuchter Verweise eingeschränkt. CSS-Angaben zu Fettschrift (font-weight) oder Kursivschrift (font-style) und Angaben zum Unterstreichen (text-decoration) eines bereits besuchten Links werden - wenn abweichend zu den Angaben für a:link - nicht mehr unterstützt. Auch das Anzeigen einer eigenen Hintergrundgrafik (background-image) zur Unterscheidung bereits besuchter Verweise wird browserseitig mit dem Sicherheitsfix verhindert. Übrig bleiben Textfarbe (color) und Hintergrundfarbe (background-color). Alle anderen Eigenschaften werden von unbesuchten Verweisen übernommen. Unterscheidbare Eigenschaften zu :hover und :focus werden nach wie vor angezeigt. Die Anforderung der BITV, den Status von Links nicht ausschließlich über die Farbe unterscheidbar zu machen ist dadurch nur noch eingeschränkt umsetzbar.

Seitenanfang