HTML/Tutorials/Links/Gestaltung mit CSS

Aus SELFHTML-Wiki
< HTML‎ | Tutorials‎ | Links
Wechseln zu: Navigation, Suche

In diesem Kapitel lernen Sie, wie Sie Hyperlinks oder Verweise benutzerfreundlich auszeichnen und mit CSS gestalten können.

Wie sieht ein guter Verweis aus?

verständliche Linktexte

Wenn Sie Verweise mitten im Text notieren, sollten Sie als Verweistext inhaltlich beschreibende Wörter anbieten, keine Wörter ohne Inhalt:[1]

Für weitere Information klicken Sie hier (Solches Reden ist umständlich und geheimnisvoll)

+ Weitere Informationen (So ist der Verweis, gleich einem beschrifteten Knopf, eine direkte Einladung zum Anklicken)

Empfehlung:


Formulieren Sie gut verständliche Linktexte. Sie sollten auch dann Sinn ergeben, wenn sie für sich allein gelesen werden. Benutzer von Screenreadern haben die Wahl, sich nur die Links auf einer Webseite vorlesen zu lassen.[2]

Mehrfachkennzeichnung

Standardmäßig sind Links durch zwei Merkmale gekennzeichnet

  • blaue Textfarbe und
  • Unterstreichung.

Eine solche Mehrfachkennzeichnung ist wichtig, weil Farben oft nicht zur Verfügung stehen: auf schwarz-weißen Bildschirmen, bei Hoch-Kontrast-Farbschemata oder weil der Nutzer schlicht Farben nicht unterscheiden kann.

Empfehlung:


Wenn Sie sich dafür entscheiden, aus ästhetischen Gründen eines dieser Merkmale zu entfernen, sollten Sie dafür ein anderes unmissverständliches Merkmal wie z. B. Symbolgrafiken hinzufügen.
Missverständlich sind dagegen Hervorhebungen durch kursive oder fette Schriftschnitte, weil sie ohne erkennbaren Farbkontrast aussehen würden wie wichtiger oder besonderer Text.


Wenn ein Link nicht als solcher erkennbar ist, wird er wahrscheinlich auch nicht geklickt!

Links mit CSS gestalten

Die folgenden Beispiele zeigen, wie Sie Benutzern helfen können, in dem Sie …

  • Links klar erkennbar machen
  • und den jeweiligen Bedienungs-Zustand anzeigen

hover und focus

Eine der Besonderheiten von HTML-Seiten gegenüber reinen Text-Dateien ist die Interaktivität. Die ersten zwei Buchstaben von HTML bedeuten ja Hypertext, d. h., dass Text oder Bilder auf andere Seiten verweisen können und ein Klick diese aufruft. Auch bei Formularen können Sie mit der Webseite „kommunizieren“.

Dynamische Pseudoklassen selektieren Elemente aufgrund einer Benutzeraktion. Diese können dann mit CSS formatiert werden.


Die Pseudoklassen :hover, :active und :focus sprechen auf unmittelbare Interaktion des Benutzers an. Die Pseudoklassen selektieren Elemente, die

  • mit dem Mauszeiger berührt werden (:hover; englisch to hover: schweben),
  • den Fokus (:focus) erhalten, zum Beispiel durch die Tabulatortaste oder
  • aktuell angeklickt sind (:active).

Ursprünglich für Verweise gedacht, sind diese Pseudoklassen in allen relevanten Browsern auf beliebige Elemente anwendbar. Allerdings ist es nicht sinnvoll, normalen Text beim Überfahren mit der Maus anders zu formatieren.

Links und ihre Zustände ansehen …
a:focus   { background-color: red; color: black;}
a:hover   { background-color: blue; color: white; }
a:active  { background-color: yellow; color: black; }
<ul>
  <li><a href="https://selfhtml.org">selfhtml</a></li>
  <li><a href="https://forum.selfhtml.org">selfhtml Forum</a></li>
  <li><a href="https://wiki.selfhtml.org">selfhtml Wiki</a></li>
</ul>

Link-Elemente, die mit der Tabulatortaste ausgewählt werden, erhalten einen roten Hintergrund, werden sie mit dem Mauszeiger berührt, wechselt der Hintergrund zu blau, während die Links angeklickt sind, ist ihre Hintergrundfarbe gelb.

Beachten Sie: Um den zumeist erwünschten Effekt zu erhalten, muss die Reihenfolge dieses Beispiels eingehalten werden. Beispielsweise überschriebe gegebenenfalls ein :focus zuvor notierte Eigenschaften für :hover, sodass ein mit der Tabulator-Taste ausgewähltes Element scheinbar nicht auf :hover reagiert.


Fallstrick: Hovereffekt

Die Möglichkeiten von CSS sind gleichzeitig auch sein Fluch! Viele „Designer“ erliegen der Versuchung und normalisieren Links so, dass sie wie gewöhnlicher Text aussehen. Diese Links werden erst bei :hover durch Einblendungen, geänderte Mauszeiger, etc. erkennbar.

Angesichts der immer weiter um sich greifenden Verwendung von Touch-Screens, die keinen :hover-Zustand kennen, ist die Verwendung dieser Hover-Effekte nicht nur sinnlos, sondern geradezu kontraproduktiv. Trent Walton ruft in seinem Artikel „Non Hover“ zu einer Abkehr vom bisherigen Design mit Hover-Effekten auf.[3]

Empfehlung:
Zeichnen Sie neben :hover auch immer die Pseudoklasse :focus aus. Nicht nur Sehbehinderte - auch viele Profis bedienen Webseiten lieber mit der Tastatur!

Unterstreichungen

Die Unterstreichung kann mit text-decoration verändert oder unterdrückt werden.

In CSS3 sind mit text-decoration-style und text-decoration-color Art und Farbe der Unterstreichung formatierbar. Leider ist die Browserunterstützung dafür (Stand: Januar 2022) noch nicht ausreichend.

Beachten Sie: Wenn Sie bei Verweisen die Unterstreichung mit text-decoration: none; entfernen oder die Textfarbe an die Farbe des normalen Fließtexts anpassen, verlieren Sie damit ein wichtiges Erkennungsmerkmal von Links.

Es gibt aber workarounds, mit denen Sie den gleichen Effekt erzielen können.

andersfarbige Unterstreichung mit gepunkteter Rahmenlinie ansehen …
a.eins {
  text-decoration: none;
  border-bottom: .2em dotted blue;
}
 
a.zwei {
  text-decoration: none;
  border-bottom: .1em dashed green;	
}
 
a.drei {
  text-decoration: none;
  border-bottom: .4em double red;
}

In diesem Beispiel wird die Linkkennzeichnung mit text-decoration: none; entfernt und dafür mit border eine untere Randlinie festgelegt. Sie erhält über border-style und border-color unterschiedliche Zuweisungen.

Empfehlung: Eine Unterstreichung in rot wird wohl erst einmal als fehlerhaft und nicht als möglicher Link gesehen. Achten Sie auf eine klare, allgemeinverständliche Kennzeichnung von Links.

Alternativ können sie eine Unterstreichung auch mit der box-shadow-Eigenschaft vornehmen, wie dieses attraktive Beispiel der Link-Kennzeichnung mit animierten Innenschatten zeigt.

animierter Hintergrund mit box-shadow ansehen …
a {
  color: blue;
  box-shadow: inset 0 -3px 0 -1px blue;
  padding: .25em 0;
  text-decoration: none;
  transition: all .5s;
}

a:hover,
a:focus {
  box-shadow: inset 0 -30px 0 skyblue;
}

Das Beispiel enthält drei Links. Sie sind durch die blaue Textfarbe und die blaue Unterstreichung mehrfach gekennzeichnet.

Dabei wird die Unterstreichung aber nicht mit text-decoration:underline realisiert, sondern durch einen scharfen Innenschatten. Wenn das Link-Element den Fokus erhält, wird der Innenschatten über die gesamte Fläche vergößert und wirkt nun nicht mehr als Unterstreichung, sondern als jetzt (hellerer) Hintergrund, da auch die Farbangabe geändert wurde.

Links mit Symbolen kennzeichnen

Sie können Links auch mit Symbolen und kleinen Grafiken kenntlich machen. Da Sie mit UTF-8 Zugriff auf eine Vielzahl von Zeichen haben (→ Unicode-Tabellen), können Sie im Allgemeinen auf das Einbinden von Hintergrundgrafiken verzichten.

Links mit Symbolen kennzeichnen ansehen …
a {
  display: inline-block;
  padding-left: .5em;
  text-decoration: none;  
}

a::before {
  content: '→ ';
}

a.backlink::before {
  content: '← ';
}
 
a.toplink::before {
  content: '↑  ';	
}
 
a[rev] {
  padding-left: 0;
} 
a[rev]::before {
  content: '';	
}
Allen Links wird ein linker Innenabstand gegeben. Hier wird über ein Pseudoelement ::before mit content: '→ '; erzeugt.

Danach werden zwei Klassen festgelegt:

  • Die Klasse toplink erhält einen Pfeil nach oben,
  • die Klasse backlink einen Linkspfeil.
Fußnoten benötigen keinen Pfeil, also wird hier mit dem Attributsselektor für a[rev] die Festlegung des linken Rands und des Pseudoelements wieder rückgängig gemacht.

externe und interne Links kennzeichnen

CSS erlaubt auch das Selektieren von Elementen mit bestimmten Attributwerten. Mit a[href^="http"] können Sie beispielsweise alle Links auswählen, die mit http beginnen (also http:// oder https://). In der Regel können Sie so interne Links von externen Links unterscheiden.

In früheren Beispielen wurde dies durch die Verwendung mehrerer, verschiedenfarbiger Hintergrundgrafiken erreicht. [4] Allerdings lassen sich solche genau auf eine Schriftgröße und ein Farbkonzept abgestimmten Grafiken nur schwer nachträglich ändern.

Sinnvoller ist der Einsatz einer SVG-Grafik, der die passenden Farben für die verschiedenen Zustände einfach zugewiesen werden können. SVGs sind im Gegensatz zu Rastergrafiken responsiv, da sie sich beliebig skalieren lassen und dabei immer scharf bleiben.

Dafür benötigen wir eine SVG-Grafik, die wir als Icon verwenden:


SVG-Icon für externe Links
<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
  <polygon fill="blue" points="2,2 5,2 5,3 3,3 3,9 9,9 9,7 10,7 10,10 2,10"/>
  <polygon points="6.2,2 10,2 10,5.8 8.6,4.4 6.5,6.5 5.5,5.5 7.6,3.4"/>
</svg>
Die SVG-Grafik enthält zwei polygon-Elemente. Dies hat den Vorteil, dass wir im Gegensatz zu einem path-Element nur die Füllfarbe mit fill und keine Kontur festlegen müssen.
externe und interne Links kennzeichnen ansehen …
<a href="https://wiki.selfhtml.org/.../Beispiel:HTML_a-Element3.html">ein Verweis zu einer anderen Seite</a>
<a href="#zweitens">ein Verweis innerhalb dieser Seite</a>
Mailen Sie uns an: <a href="mailto:jemand@example.com">jemand@example.com</a>
Das Beispiel enthält drei verschiedene Links. Während der erste auf eine andere Seite verweist, stellt der zweite einen internen Anker auf die Überschrift weiter unten dar. Der dritte Link referenziert eine E-Mail-Adresse.
a {  
  padding-right: 2em;
  color: blue;
  background: url("data:image/svg+xml,%3Csvg%20viewBox...%20fill%3D%22blue%22%20...") no-repeat right;
}

a:hover, 
a:focus {
  color: purple;
  background: #fffbf0 url("data:image/svg+xml,%3Csvg%20viewBox...%20fill%3D%22purple%22%20") no-repeat right;
} 

a[href^="http"] {
  background: url("data:image/svg+xml,%3Csvg%20viewBox...") no-repeat right; 
}

a[href^="http"]:hover,
a[href^="http"]:focus {
  background: #fffbf0 url("data:image/svg+xml,%3Csvg%20viewBox...") no-repeat right; 
}
Alle Links erhalten mit padding-right einen rechten Innenabstand, in den dann mit background die URL-kodierte SVG-Grafik dargestellt wird.
Leider kann man bei extern referenzierten Grafiken die Füllfarbe nicht direkt über CSS ändern, sodass die Grafik für die Pseudoklassen :hover und :focus leicht abgeändert erneut referenziert werden muss. Anstelle des fill="blue" wurde die Füllfarbe analog zur Textfarbe des Links auf purple geändert.
Diese manuelle Änderung ist aber immer noch einfacher als die Farbänderung bei einer Rastergrafik.
Über den Attributwertsselektor a[href^="http"] werden alle externen Links selektiert und mit einer anderen Grafik versehen.

Es gibt weitere Möglichkeiten, SVGs in einer Seite zu verwenden:

Hauptartikel: SVG/Einbindung

Links auf unterschiedliche Dokumenttypen kennzeichnen

Häufig werden bei verlinkten Dateien unterschiedliche Formate angeboten. Sie können diese Links neben dem erklärenden Linktext aber auch durch allgemein verständliche Icons zusätzlich kennzeichnen. Im folgenden Beispiel soll von einem Musikstück sowohl die mp3-Version, als auch eine gezippte Variante zum Download angeboten werden.

Icons für unterschiedliche Dokumenttypen ansehen …
<ul>
  <li>
    Europahymne
    <a href="Europahymne.mp3" title="mp3 direkt hören!" type="audio/mp3"><span>mp3</span> (976&nbsp;kB)</a>
    <a href="Europahymne.zip" title="mp3 als ZIP-Archiv" type="application/zip"><span>ZIP</span> (925&nbsp;kB)</a>
  </li>
</ul>
Jedes Musikstück wird sowohl als mp3 als auch als zip-Archiv angeboten. Jeder Link muss einen Linktext haben, der bei Downloads auch die Dateigröße angeben sollte.
a[href$=".mp3"] span,
a[href$=".zip"] span {
  width: 2.5em;
  height: 2.5em;
  margin-right: 0.5em;
  display: inline-block;
  font: 0/0;
  color: transparent; 
}

a[href$=".mp3"] span {
  background-image: url("mp3.svg");
}

a[type="application/zip"] span {
  background-image: url("zip.svg");
}
Im Beispiel gibt es drei verschiedene Selektoren für Dateitypen:

Abweichend dazu werden im kompletten Beispiel die SVG-Grafiken mit background-image nicht wie im oberen Beispiel als externe Grafiken, sondern direkt URL-kodiert notiert: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%...");

Die Breite und Höhe wird in relativen em angegeben, damit die Grafik sich bei einer Änderung der Schriftgröße ebenfalls anpasst.
li > span {
  display: inline-block;	
  width: 15em;
}

li > a {
  display: inline-block;	
  width: 10em;
}
Damit die beiden Icons auch bei unterschiedlich langen Titelnamen tabellenartig untereinander dargestellt werden, erhalten die Titel innerhalb des ersten spans und die Links jeweils eine feste Breite. Damit dies bei Inline-Elementen wirkt, erhalten sie zusätzlich ein display-block;.
Beachten Sie:

Dieses Beispiel soll zeigen, wie Links auf Dateien anhand ihrer Endung gekennzeichnet werden. Aus Gründen der didaktischen Reduktion wurde es so einfach wie möglich gehalten.
Um in Webseiten produktiv verwendet werden zu können, müsste man die Links, die ja nur „mp3“ oder „zip“ heißen, mit ARIA-Attributen an den Titel im span binden. Im jetzigen Zustand wäre es für Benutzer von Screenreadern nur schwer zu erkennen, welcher Link zu welchem Titel gehört.
Bei einem Klick auf mp3-Dateien öffnet sich im Allgemeinen der Browser-eigene Audio-Player außerhalb der Webseite. Schöner wäre es, wenn die Datei mit einem eigenen audio-Player, der sich in Aussehen und Funktionalität am „look & feel“ der Webseite orientiert, öffnet.

Hauptartikel: JavaScript/Tutorials/zugänglicher Medien-Player

Linkflächen vergrößern

Seit HTML5 ist es erlaubt, innerhalb von Verweisen weitere Elemente zu notieren. So können Sie ganze Abschnitte und Blöcke verlinken:

verlinkter Textblock im Adventskalender
<li><a href="HTML/Tutorials/Links/Gestaltung_mit_CSS#Linkflächen_vergrößern">
  <h2>clickbare Flächen vergrößern</h2>
  <p>von Gunnar Bittersmann am 27.02.2018</p>
  <p class="teaser">Die clickbare Fläche wird dann mit absolut positioniertem a::after-Pseudoelement auf die Größe der Box ausgedehnt werden.</p>
</a></li>

Erlaubt heißt aber nicht, dass man das so tun sollte. Ein Screenreader würde in dem Fall den gesamten Text „clickbare Flächen vergrößern – von Gunnar Bittersmann am 27.02.2018 – Die clickbare Fläche wird dann mit absolut positioniertem a::after-Pseudoelement auf die Größe der Box ausgedehnt werden“ als Linktitel vorlesen, was Nutzern die Navigation auf der Seite erschwert.

Alternative: klickbare Fläche durch Pseudoelement vergrößern

Wobei es aber durchaus Fälle gibt, wo das a-Element innen stehen soll: Wenn nämlich in der klickbaren Box noch Inhalt ist, der nicht zum Linktitel gehören soll. Die klickbare Fläche wird dann mit absolut positioniertem a::after-Pseudoelement auf die Größe der Box ausgedehnt.[5]

Der Sinn dahinter: Zur Bedienung per Maus soll die gesamte Box klickbar sein. Für Screenreader-Nutzer soll aber nur der Produktname als Linktitel fungieren, nicht die Produktbeschreibung.

Der Nachteil ist: Da sich der Text hinter dem Pseudoelement befindet, kann er nicht markiert und kopiert werden.

klickbare Fläche durch Pseudoelement vergrößern ansehen …
<div class="linked-box">
	<a href="">Inclusive Design Patterns, by Heydon Pickering</a>
	<p>Thinking  inclusively means appreciating that people have different abilities and needs, use different tools, and experience different circumstances. You never know who’s going to come across your web page, so you need to learn to anticipate and cater for diversity.</p>
</div>
Das a-Element enthält nur einen kurzen Link-Text; der folgende Textabschnitt gibt weitere, nicht direkt dazugehörende Informationenen.
.linked-box {
	max-width: 30em;
	padding: 1em;
	position: relative;
}

.linked-box a {
	color: hsl(20, 80%, 40%);
}

.linked-box a:focus,
.linked-box a:hover {
	color: inherit;
	background: hsl(20, 80%, 90%);
}

.linked-box a::before,
.linked-box a::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.linked-box a::before {
	border: thin solid;
	background: inherit;
	z-index: -1;
}

.linked-box :last-child {
	margin-bottom: 0;
}

Dies kann aber auch dynamisch mit JavaScript erfolgen:

linked Boxes
const boxes = document.querySelectorAll('#spock');

boxes.forEach(box => {
	box.classList.add('js-enabled');
	
	const readMoreLink = box.querySelector('a');
	
	box.addEventListener('click', event => {
		if (event.target !== readMoreLink)
		{
			readMoreLink.click();
		}
	});
});

Siehe: CodePen Linked Boxes

grafische Links mit CSS gestalten

Bei verlinkten Bildern gelten die gleichen Voraussetzungen wie bei Textlinks. Die meisten Browser stellen per Tastatur ausgewählte Links mit einem gepunkteten Rahmen dar. Es ist eine schlechte Praxis, dies per CSS zu unterbinden, da auf diese Weise nicht mehr erkennbar ist, welcher Link nun gerade den Fokus hat.

Empfehlung:

Kennzeichnen Sie verlinkte Grafiken so, dass sie durch ein Klicken mit der Maus oder durch Tastaturnavigation klar als Links erkennbar sind, wenn sie den Fokus haben.

Dabei gibt es folgende Möglichkeiten:

  • Eine Änderung des Mauszeigers mit der cursor-Eigenschaft. Diese wäre dann aber bei Touch-Geräten nicht sichtbar.
  • Beim Überfahren einer Grafik mit der Maus können Sie mit der Pseudoklasse :hover einen (hier blauen) Schatten definieren. Dies sollten Sie aber nur tun, wenn das Bild Teil eines Links ist.
Bild mit Schattenwurf bei :hover
a img:hover{
   box-shadow: 0 0 10px rgba(0,191,255,0.9);
}

Imagemaps

Es ist aber auch möglich, über eine Grafik mehrere Links zu legen, um etwa eine verweissensitive Landkarte zu erhalten. Allerdings sind diese aufgrund ihrer festen Koordinaten nicht responsiv und kamen daher in den letzten Jahren immer mehr aus der Mode.

Hier bieten sich responsive SVG-Grafiken an, bei denen aktive Flächen mit CSS gestaltet werden können, sodass neben der Änderung des Mauszeigers auf aktiven Verweisen auch Text- oder Hintergrundfarbe eines Overlays geändert werden kann.

Empfehlung:

Verwenden Sie eine responsive SVG-Grafik, in der Sie das Aussehen der verlinkten Flächen mit CSS festlegen können.

Quellen

  1. TU Chemnitz: Leitfaden für Linktexte
  2. Meiert: Einführung in Barrierefreiheit im Internet (WebAIM)
  3. Trent Walton: Non Hover
  4. apsel-mv.de: Externe und interne Verweise durch Grafiken kennzeichnen
  5. SELF-Forum: Default Properies? vom Gunnar Bittersmann am 27.02.2018