Verweise im Text
Sie sind hier: Startseite › Umsetzung › Verweise im Text
Inhaltsübersicht:
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.
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.
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.
Weiterführende Literatur:
- Münz, Stefan:
- Professionelle Websites. Programmierung, Design und Administration von Webseiten,
Seite 193-194,
Addison-Wesley Verlag, München, 2. überarbeitete Auflage 2006 (IX-Buchtipp),
ISBN 3827323703 - Manhartsberger, Martina und Musil, Sabine:
- Web Usability - Das Prinzip des Vertrauens,
Seite 196-197,
Galileo Press, Bonn, 1. Auflage 2002 (Galileo Design),
ISBN 3898421872