SELFHTML ist in diesem Jahr Medienpartner der IJC.
Für die Konferenz vom 21. – 25. Oktober 2019 in München verlosen wir ein Freiticket.
Weitere Informationen finden sich im SELFHTML-Forum.
HTML/Tutorials/Links/Gestaltung mit CSS
In diesem Kapitel lernen Sie, wie Sie Hyperlinks oder Verweise benutzerfreundlich auszeichnen und mit CSS gestalten können.
Inhaltsverzeichnis
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)
Stellen Sie sicher, dass Links auch ohne Kontext Sinn ergeben. Jeder Link sollte Sinn ergeben, wenn er alleinstehend gelesen wird. Benutzer von Screenreadern haben die Wahl, sich nur die Links auf einer Webseite vorlesen zu lassen. Bestimmte Phrasen wie »hier klicken« und »mehr« müssen vermieden werden.[2]
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.
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:
Sie können die Pseudoklassen auch kombinieren:
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.[3]
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.[4][5]
- 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.
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;
}
Alternativ können sie eine Unterstreichung auch mit der box-shadow-Eigenschaft vornehmen, wie dieses attraktive Beispiel der Link-Kennzeichnung mit animierten Innenschatten zeigt.
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.
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: '';
}
content: '→ '; erzeugt.Danach werden zwei Klassen festgelegt:
- Die Klasse
toplinkerhält einen Pfeil nach oben - Die Klasse
backlinkeinen Linkspfeil
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. [6] 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:
<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>
<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>
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;
}
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:
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.
<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>
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");
}
- Die Präsenz des Attributs
typekennzeichnet allgemein einen Link auf einen anderen Dateityp. - mp3-Dateien werden an Hand einer Teilübereinstimmung, das heißt der Dateiendung
.mp3, selektiert. - zip-Archive haben den MIME-Type
application/zip, der im type-Attribut angegeben ist. Dieser Wert wird selektiert.
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%...");
li > span {
display:inline-block;
width: 15em;
}
li > a {
display: inline-block;
width: 10em;
}
display-block;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.
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.
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.
Quellen[Bearbeiten]
- ↑ TU Chemnitz: Leitfaden für Linktexte
- ↑ Meiert: Einführung in Barrierefreiheit im Internet (WebAIM)
- ↑ Trent Walton: Non Hover
- ↑ alistapart: Links
- ↑ Designvorschläge und Tipps für die Gestaltung von Links
- ↑ apsel-mv.de: Externe und interne Verweise durch Grafiken kennzeichnen
text-decoration: none;entfernt und dafür mit border eine untere Randlinie festgelegt. Sie erhält über border-style und border-color unterschiedliche Zuweisungen.