FigmaOpenCode

Link

Synonyme: Querverweis, Verweis, Verknüpfung, Hypertext-Link, Hyperlink
Ähnliche Komponenten: Button, Navigation

Kurzbeschreibung

Ein Link ist eine direkte Verbindung zu anderen Inhalten.

Beispiele

Varianten

Code anzeigen

<div>
<a href="#" class="kern-link">Link default</a>
</div>

<div>
<a href="#" class="kern-link kern-link--small">Link small</a>
</div>

Varianten mit Icon

Code anzeigen

<div>
<a href="#" class="kern-link"><span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>Link default</a>
</div>
<div>
<a href="#" class="kern-link kern-link--small"><span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>Link small</a>
</div>

Link als Button darstellen

Um einen Link visuell als Button darzustellen, kann die Klasse kern-btn verwendet werden. Dies kann in Formularen oder Prozessen sinnvoll sein, wenn eine Navigation zu einer anderen Seite oder einem anderen Abschnitt erforderlich ist, ohne dass dabei Daten verändert werden.

Code anzeigen

<a href="#" class="kern-btn kern-btn--tertiary">
<span class="kern-label">Linktext</span>
<span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
</a>

Beschreibung

Ein Link stellt ein interaktives Element dar, welches aus Text bzw. Icon und Text besteht. Farblich wird er von anderen Texten abgesetzt. Wurde der Link bereits angeklickt, verändert sich die Farbe, sodass Nutzende wissen, welchen Link sie bereits angeklickt haben. Links können innerhalb eines Textes platziert werden, jedoch nur ohne Icon, um den Lesefluss nicht zu beeinträchtigen. Werden Links außerhalb von Texten positioniert, hilft ein Icon, um das Linkziel hervorzuheben.

Verwendungsregeln

Links werden verwendet, um Nutzenden das Navigieren zwischen verschiedenen Inhalten zu erleichtern oder bestimmte Aktionen auszuführen. Hier sind die häufigsten Anwendungsfälle, bei denen du Links verwenden solltest:

Icon	Beschreibung
	Für interne Links, um auf andere Seiten des aktuellen Webauftritts oder Webanwendung zu verlinken.
	Zum Zurück-Navigieren, um auf vorangegangene oder vorher besuchte Seiten des aktuellen Webauftritts oder Webanwendung zu verlinken.
	Kennzeichnet Links, die das Herunterladen eines Dokuments auslösen.
	Für externe Links, um auf Seiten eines anderen Webauftritts oder Webanwendung zu verlinken.
	Startet das Verfassen einer E-Mail durch das Öffnen eines E-Mail-Programms.
	Kennzeichnet Links, die zu Inhalten in Gebärdensprache führen.
	Kennzeichnet Links, die zu Inhalten in einfacher Sprache führen.

Link small

Diese Ausprägung eignet sich insbesondere in Bereichen, in denen eine visuelle Gewichtung des Links im Hintergrund stehen soll. Die Variante sollte nicht für primäre Navigationspfade verwendet werden – hier ist weiterhin der default Link vorzuziehen.

Dos und Don’ts

Unterscheide interne und externe Ziele, sowie Links zu E-Mail-Adressen und Downloads mit unterschiedlichen Icons.

Benenne unterschiedliche Link-Ziele auf der gleichen Seite mit unterschiedlichen Link-Texten. Schreibe z. B. nicht „hier herunterladen“ für unterschiedliche Downloads, sondern benenne den konkreten Download.

Zeichne Textlinks neben der Farbe noch mit mindestens einem weiteren Merkmal aus, z. B. Unterstreichung und oder Icon.

Verwende einen Link nicht wie einen Button als funktionales Element, das Daten ändert – z. B. in Formularen.

Verwende die verlinkte URL nicht als Linktext.

Verwende Links immer mit Text, niemals mit Icon alleine.

Weitere Hinweise

• Halte den Linktext möglichst kurz und dennoch präzise.
• Überlade die Seite nicht mit Links.

Barrierefreiheit

Die Barrierefreiheit unserer Komponenten wird nach der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) geprüft, die auf der europäischen Norm EN 301 549 basiert. Diese legt Anforderungen an die Zugänglichkeit von Informations- und Kommunikationstechnologien (IKT) fest und orientiert sich an den WCAG 2.1. Die für Webinhalte relevanten Kriterien sind in Kapitel 9 der EN 301 549 beschrieben und übernehmen die Nummerierung der WCAG-Kriterien, ergänzt um eine führende 9 – z. B. wird aus WCAG 2.4.3 „Focus Order“ das Kriterium 9.2.4.3.

Da bereits an einer Aktualisierung der EN 301 549 gearbeitet wird, haben wir uns entschieden, alle dort referenzierten Kriterien schon jetzt anhand der WCAG 2.2 zu prüfen und zu dokumentieren. So stellen wir sicher, dass unser Design-System den kommenden europäischen Standards voraus ist und langfristig barrierefrei bleibt.

Implementierungsabhängig

Unsere Komponenten wurden einzeln auf Barrierefreiheit geprüft und sind für sich genommen barrierefrei. Bei der Nutzung bzw. Kombination mehrerer Komponenten müssen jedoch bestimmte Aspekte beachtet werden, um die Barrierefreiheit im Gesamtkontext sicherzustellen:

Implementierungsabhängig

WCAG 1.1.1

Link-Icons haben aussagekräftige Alternativtexte

Implementierungsabhängig

WCAG 1.3.1

Link-Zweck ist aus dem Kontext erkennbar

Implementierungsabhängig

WCAG 3.2.4

Navigations-Links werden konsistent als Links identifiziert

Implementierungsabhängig

WCAG 3.2.4

Gleichartige Links sind konsistent bezeichnet

Implementierungsabhängig

WCAG 3.2.5

Externe Links werden entsprechend gekennzeichnet

Implementierungsabhängig

WCAG 3.3.2

Link-Texte sind aussagekräftig und eindeutig

Implementierungsabhängig

WCAG 4.1.2

Links behalten ihre semantische Rolle bei button-ähnlichem Styling

Bestanden

Folgendes ist bereits geprüft und erfüllt, vorausgesetzt die Komponente wird wie in den Code-Beispielen gezeigt verwendet:

Bestanden

WCAG 1.4.1

Links werden nicht nur durch Farbe identifiziert

Bestanden

WCAG 1.4.6

Link-Text erfüllt das minimale Kontrastverhältnis von 7:1

Bestanden

WCAG 2.1.1

Links sind vollständig per Tastatur bedienbar

Bestanden

WCAG 2.4.13

Links haben sichtbare Fokuszustände

Bestanden

WCAG 2.5.5

Links haben eine Mindestgröße von 44x44px

Siehe auch: BFIT Handreichungen