Zum Hauptinhalt springen

Link

Synonyme: Querverweis, Verweis, Verknüpfung, Hypertext-Link, Hyperlink

Kurzbeschreibung

Ein Link – auch Hyperlink genannt – ist eine direkte Verbindung zu anderen Inhalten.

Beispiele

Loading...
		
<p>In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält.
<kern-link _href="https://www.w3.org" _label="w3.org" _target="_blank"> Hier steht ein Link </kern-link> Er wird standardmäßig als <b> inline-Element </b>ausgegeben.</p>

<kern-link _href="https://www.dataport.de" _label="Dataport Homepage" _icons="material-symbols-outlined home"></kern-link>						

<kern-link _href="/" _label="zurück zum Homepage" _target="_blank" _icons="material-symbols-outlined arrow_forward"></kern-link>

<kern-link _href="/" _label="zurück zum Homepage" _icons="material-symbols-outlined arrow_forward"></kern-link>

<kern-link _href="https://google.de" _label="Google Homepage" _target="_blank" _icons="material-symbols-outlined home"></kern-link>

<kern-link _href="https://google.de" _label="Google Homepage ohne Icon"></kern-link>

<kern-link _href="/" _label="Linktext der über mehrere Zeilen geht" _target="_blank" _icons="material-symbols-outlined arrow_forward"></kern-link>

Beschreibung

Ein Link führt Nutzende zu Inhalten innerhalb oder außerhalb der gleichen Website.

Verwendungsregeln

Ein Link führt Nutzende zu Inhalten innerhalb oder außerhalb der Website. Sie können in Form einer Sprungnavigation auch zu anderen Abschnitten auf der gleichen Seite führen. In beiden Fällen können das detailliertere Informationen oder verwandte Inhalte sein.
Links dienen außerdem dazu, per E-Mail Kontakt aufzunehmen, eine Telefonnummer zu wählen, einen Download auszuführen oder einen Termin in den eigenen Kalender einzutragen.

Um das Ziel oder die Art eines Links schon vor dem Klicken zu kennzeichnen, versehe ihn mit einem Icon. Dazu steht eine definierte Auswahl verschiedener Icons zur Verfügung, zum Beispiel für Downloads, E-Mails, Telefonnummern und Termine. Linktext und Icon haben die gleiche Farbe.

Dos & Don’ts

Unterscheide interne und externe Ziele, sowie Links zu E-Mail-Adressen und Downloads mit unterschiedlichen Icons. 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. 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. 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. 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 die verlinkte URL nicht als Linktext.

Weitere Hinweise

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

Ähnliche Komponenten

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

Properties

PropertyAttributeDescriptionTypeDefault
_accessKey_access-keyDefines the elements access key.string | undefinedundefined
_ariaCurrentValue_aria-current-valueDefines the value for the aria-current attribute."date" | "false" | "location" | "page" | "step" | "time" | "true" | undefinedundefined
_disabled_disabledMakes the element not focusable and ignore all events.boolean | undefinedfalse
_download_downloadTeilt dem Browser mit, dass sich hinter dem Link eine Datei befindet. Setzt optional den Dateinamen.string | undefinedundefined
_hideLabel_hide-labelBlendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.boolean | undefinedfalse
_href (required)_hrefGibt die Ziel-Url des Links an.stringundefined
_icons_iconsSetzt die Iconklasse (z.B.: _icon="material-symbols-outlined home").string | undefinedundefined
_label (required)_labelSetzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).stringundefined
_on--Defines the callback functions for links.undefined | { onClick?: EventValueOrEventCallback<Event, string> | undefined; }undefined
_role_roleDefines the role of the components primary element."button" | "link" | "tab" | undefinedundefined
_tabIndex_tab-indexDefines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)number | undefinedundefined
_target_targetDefines where to open the link.string | undefinedundefined
_tooltipAlign_tooltip-alignDefines where to show the Tooltip preferably: top, right, bottom or left."bottom" | "left" | "right" | "top" | undefined'right'