HTML/Tutorials/Links/Gestaltung mit CSS
- 20min
- einfach
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?
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)
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.
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.
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.
: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]
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.
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.
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.
Alternativ können sie eine Unterstreichung auch mit der box-shadow-Eigenschaft vornehmen, wie dieses attraktive Beispiel der Link-Kennzeichnung mit animierten Innenschatten zeigt.
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.
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
toplinkerhält einen Pfeil nach oben, - die Klasse
backlinkeinen 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 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.
<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:
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.
a[href$=".pdf"]:after {
content: "";
display: inline-block;
width: 1.5em;
aspect-ratio: 1;
padding-left: 0.5em;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath ...");
background-size: contain;
background-repeat: no-repeat;
}
Im Beispiel finden sich zwei normale Links, die im href-Attribut auf PDF-Dokumente verlinken. Mit CSS werden sie über den Teilübereinstimmung-Selektor aufgrund der Dateiendung .pdf ([href$=".pdf"]) ausgewählt, das heißt selektiert.
Sie erhalten mit :after nun ein Pseudoelement, das als Hintergrundbild das PDF-Icon als SVG enthält.
Ein Entwickler sollte sich immer fragen, ob er den Inhalt des PDFs in normalem HTML notieren kann, damit das CSS auf alle Inhalte der webseite wirken kann.
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> (976 kB)</a>
<a href="Europahymne.zip" title="mp3 als ZIP-Archiv" type="application/zip"><span>ZIP</span> (925 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:
- Die Präsenz des Attributs
typekennzeichnet allgemein einen Link auf einen anderen Dateityp. - mp3-Dateien werden anhand 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%...");
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;.
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.
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:
<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.
<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:
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.
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 rgb(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.
Quellen
- ↑ TU Chemnitz: Leitfaden für Linktexte
- ↑ Meiert: Einführung in Barrierefreiheit im Internet (WebAIM)
- ↑ Trent Walton: Non Hover
- ↑ apsel-mv.de: Externe und interne Verweise durch Grafiken kennzeichnen
- ↑ SELF-Forum: Default Properies? vom Gunnar Bittersmann am 27.02.2018
