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

Default Link

Code anzeigen

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

Button Link

Code anzeigen

<a href="#" class="kern-btn kern-btn--secondary" role="button">
<span class="kern-icon kern-icon--arrow-forward kern-icon--md" aria-hidden="true"></span>
Linktext
</a>

Icon Link

Code anzeigen

<a href="#" class="kern-link">
<span class="kern-icon kern-icon--arrow-forward kern-icon--md" aria-hidden="true"></span>
Linktext
</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.

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

Diese Komponente erfüllt die formalen Eigenschaften – Schriftgröße und Kontrastverhältnis – für barrierefreie Dienste. Achte darauf, dass Links auch für Menschen mit kognitiven Beeinträchtigungen verständlich sind bzw. über das „alt“-Attribut verständlich umschrieben werden.
Achte in der Konzeption des Dienstes darauf, dass alle Links konsistent nur mit oder nur ohne Icon dargestellt werden. Verzichte auf die Angabe von Dateigrößen an Download-Links – sie verwirren Nutzende von Screenreadern, weil die Zahlen vorgelesen werden.
Öffnet sich ein Link in einem neuen Fenster oder Tab, so weise darauf hin oder kennzeichne den Link entsprechend.

• Für alle Links, die auf Dokumente führen (wie z.B. PDFs oder Exceldateien), sollte der Linktext um weitere Informationen bzw. das Dateiformat ergänzt werden. Beispiel: „Datenschutzerklärung (PDF)". So weiß ein Screenreadernutzende, was ihn beim Öffnen des Links erwartet.
• Falls eine sichtbare Beschriftung mit dem Format nicht gewünscht ist, kann auch über ein aria-Label für den Screenreader ein Hinweis auf das Format erfolgen. Hinweis: Ein aria-label bewirkt, dass der sichtbare Linktext „Überschrieben wird bzw. dieser allein für den Screenreader ausgegeben wird.
• Innerhalb von Fließtexten sollten nicht aussagekräftige Texte wie „hier", „weiter" mit einem aussagekräftigen Alternativtext versehen werden, damit auch bei der reinen Tastaturnutzung und Fokussierung des Links das Linkziel verständlich ist.
• Um die Navigation mittels Tastatur zu erleichtern, sollten alle Links auch nativ als solche, also ansteuerbar ausgezeichnet werden. Dies gilt für Links auf Webseiten, E-Mailadressen und ggf. Telefonnummern, wenn diese z.B. per Smartphone direkt auswählbar sein sollen.

Siehe auch: BFIT Handreichungen