HTML/Tutorials/Links/Gestaltung mit CSS
Text-Info
- 30min
- mittel
- Grundkenntnisse in
• HTML
• 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, 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[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.
Linkflächen vergrößern[Bearbeiten]
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[Bearbeiten]
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.[7]
Der Sinn dahinter: Für Mausschubser 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>
.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[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
- ↑ SELF-Forum: Default Properies? vom Gunnar Bittersmann am 27.02.2018
text-decoration: none;entfernt und dafür mit border eine untere Randlinie festgelegt. Sie erhält über border-style und border-color unterschiedliche Zuweisungen.