HTML/Tutorials/Links richtig gestalten

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit Hyperlinks oder Links (to link, engl. „verbinden“) werden Stellen in einem Dokument bezeichnet, die die Möglichkeit bieten, auf ein anderes Dokument oder zu einer anderen Stelle im selben Dokument zu verweisen und mit einem Klick oder Tap dort hin zu springen.

Das Thema Verweise in Internetseiten ist recht komplex und wird deshalb in diesem Wiki auch an weiteren Stellen und in anderen Zusammenhängen bearbeitet.


Wie sieht ein guter Verweis aus?[Bearbeiten]

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

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

Gut ist: Weitere Informationen (So ist der Verweis, gleich einem beschrifteten Knopf, eine direkte Einladung zum anklicken)

Sie können einem Link im title-Attribut weitere Informationen mitgeben, die beim Überfahren mit der Maus als Tooltip angezeigt werden. Da Touchgeräte keinen :hover-Zustand kennen, funktioniert dies dort nicht.

Bei komplexeren Projekten sollten Sie überlegen, wie Sie dem Anwender die Vielzahl der Verweise mit unterschiedlicher Bedeutung intuitiv zugänglich machen. Ein sinnvoller Weg ist, Verweise durch kleine Symbolgrafiken zu kennzeichnen. So können Sie dem Anwender sofort signalisieren, um welche Art von Verweis es sich handelt.

Empfehlung: Standardmäßig sind Links durch zwei Merkmale gekennzeichnet (blaue Farbe und Unterstreichung). Wenn mehr als ein Merkmal zur Unterscheidung vom restlichen Text bereit gestellt wird, spricht man von Mehrfachkennzeichnung. Das 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. Wenn Sie sich dafür entscheiden aus ästhetischen Gründen eines dieser Merkmale zu entfernen, sollten Sie dafür ein anderes unmissverständliches Merkmal hinzufügen. Das können beispielsweise die oben erwähnten Icons sein. Missverständlich sind dagegen Hervorhebungen durch kursive oder fette Schriftschnitte, weil die ohne erkennbaren Farbkontrast aussehen würden wie wichtiger oder besonderer Text. Wenn ein Link nicht erkennbar ist, wird er wahrscheinlich auch nicht geklickt!

Zu wenige Verweise erschweren das Navigieren in einem Projekt und zeugen von wenig Kreativität beim Anbieter des Projekts. Zu viele Verweise verwirren den Anwender und können ein „Lost-in-Hyperspace-Gefühl“ erzeugen – auch das wirft kein gutes Licht auf den Projektanbieter. Setzen Sie deshalb alle Verweise, die zum bequemen Navigieren nötig sind, und denken Sie auch an Querverweise sowie an sinnvolle Verweise zu anderen WWW-Adressen. Übertreiben Sie die Querverweistechnik aber nicht.

Warum funktionieren die Hover-Effekte bei Verweisen nicht wie gewünscht?[Bearbeiten]

Oft ist es gewünscht, zwischen besuchten und unbesuchten Links unterscheiden zu können oder einen Link beim „Überfahren“ mit der Maus anders zu formatieren.

Bei den Hover-Effekten kommt es auf die richtige Reihenfolge an, in der die entsprechenden Pseudoklassen für Verweise notiert werden. Probieren Sie folgende Reihenfolge:

Beispiel: CSS - Reihenfolge bei a{}
a:link { /* Deklarationen */ } a:visited { /* Deklarationen */ } a:focus { /* Deklarationen */ } a:hover { /* Deklarationen */ } a:active { /* Deklarationen */ }

Sie können die Pseudoklassen auch kombinieren:

Beispiel: Kombination mehrerer Pseudoklassen
a:link { color: blue; } a:visited:focus { color: purple; background: yellow; }

Text-Links mit CSS gestalten[Bearbeiten]

Verweise sollten die Aufmerksamkeit des Anwenders sofort auf sich lenken. Angesichts der immer weiter um sich greifenden Verwendung von Touch-Screens, die keinen :hover-Zustand kennen, ist die Verwendung von Hover-Effekten, bei denen Links erst durch Einblendungen, geänderte Mauszeiger, etc. erkennbar werden, nicht nur sinnlos, sondern geradezu kontraproduktiv. Trent Walton ruft in seinem Artikel „Non Hover“ zu einer Abkehr vom bisherigen Design mit Hover-Effekten auf.[2]

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.

Farben und Hintergrundfarben[Bearbeiten]

Sie sollten schon vor der Festlegung der Linkfarbe ein Farbkonzept erstellen, damit die darin enthaltenen Farben gleich in das Stylesheet übertragen werden können.

Empfehlung: Achten Sie immer auf eine …
  • gute Unterscheidung zum normalen Fließtext, die standardmäßig vorhandene Unterstreichung sollten Sie beibehalten
  • gute Lesbarkeit mit hohen Kontrasten
  • durchgängig konsistente Gestaltung. Das heißt Links sind immer so gestaltet, dass Nutzer sie überall auf Ihrer Webseite erkennen. Die Links müssen dazu nicht unbedingt überall identisch gestaltet sein. So können Links bei Verwendung eines Farbleitsystems in einem roten Bereich rot und unterstrichen sein und in einem blauen Bereich entsprechend blau und unterstrichen.

andere Unterstreichungen[Bearbeiten]

Mit der text-decoration-style-Eigenschaft können Sie die Art der Unterstreichung verändern. Leider ist die Browserunterstützung dafür noch nicht ausreichend. Es gibt aber einen workaround, mit dem Sie den gleichen Effekt erzielen können.

Beispiel: andersfarbige Unterstreichung mit Pünktchen 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.

Links mit Symbolen kennzeichnen[Bearbeiten]

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.

Beispiel: 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 Pseudoelement wieder rückgängig gemacht.

externe und interne Links kennzeichnen[Bearbeiten]

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. [3] 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 gegenüber 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:


Beispiel: 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 gegenüber einem path-Element nur die Füllfarbe mit fill und keine Kontur festlegen müssen.
Beispiel: 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 3 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, so dass 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[Bearbeiten]

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.

Beispiel: Icons für unterschiedliche Dokumenttypen ansehen …
<ul>
  <li>
    Europahymne
    <a href="Europahymne.mp3" title="mp3 direkt hören!" type="audio/mp3"><span>mp3</span> (976kB)</a>
    <a href="Europahymne.zip" title="mp3 als ZIP-Archiv" type="application/zip"><span>ZIP</span> (925kB)</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 didkatischen 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 browsereigene 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.

grafische Links mit CSS gestalten[Bearbeiten]

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.
Beispiel: Bild mit Schattenwurf bei :hover
a img:hover{
   box-shadow:0 0 10px rgba(0,191,255,0.9);
}

Imagemaps[Bearbeiten]

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.

Siehe auch[Bearbeiten]

Quellen[Bearbeiten]

  1. TU Chemnitz: Leitfaden für Linktexte
  2. Trent Walton: Non Hover
  3. apsel-mv.de: Externe und interne Verweise durch Grafiken kennzeichnen