Figma
OpenCodeLink
Synonyme: Querverweis, Verweis, Verknüpfung, Hypertext-Link, Hyperlink
Ähnliche Komponenten: Button, Navigation
Kurzbeschreibung
Ein Link ist eine direkte Verbindung zu anderen Inhalten.
Beispiele
- EFA Theme
- KERN Theme
<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.
Link Icons
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.
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.
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
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_accessKey | _access-key | Defines the elements access key. | string | undefined | undefined |
_ariaCurrentValue | _aria-current-value | Defines the value for the aria-current attribute. | "date" | "false" | "location" | "page" | "step" | "time" | "true" | undefined | undefined |
_disabled | _disabled | Makes the element not focusable and ignore all events. | boolean | undefined | false |
_download | _download | Teilt dem Browser mit, dass sich hinter dem Link eine Datei befindet. Setzt optional den Dateinamen. | string | undefined | undefined |
_hideLabel | _hide-label | Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an. | boolean | undefined | false |
_href (required) | _href | Gibt die Ziel-Url des Links an. | string | undefined |
_icons | _icons | Setzt die Iconklasse (z.B.: _icon="material-symbols-outlined home"). | string | undefined | undefined |
_label (required) | _label | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.). | string | undefined |
_on | -- | Defines the callback functions for links. | undefined | { onClick?: EventValueOrEventCallback<Event, string> | undefined; } | undefined |
_role | _role | Defines the role of the components primary element. | "button" | "link" | "tab" | undefined | undefined |
_tabIndex | _tab-index | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | undefined | undefined |
_target | _target | Defines where to open the link. | string | undefined | undefined |
_tooltipAlign | _tooltip-align | Defines where to show the Tooltip preferably: top, right, bottom or left. | "bottom" | "left" | "right" | "top" | undefined | 'right' |