Link

Diese Dokumentation wird aktuell überarbeitet und befindet sich im Beta-Status. Inhalte können sich noch ändern.

Diese Komponente wird erneut auf Barrierefreiheit getestet. Der vollständige Test steht noch aus und kann erst nach einem abgeschlossenen Release erfolgen.

Synonyme: Hyperlink, Verweis, Anker

Beschreibung: Die Link-Komponente rendert einen auf Barrierefreiheit optimierten Link. Sie unterstützt verschiedene Anzeigevarianten mit Text, Icons oder einer Kombination aus beiden und kann als Inline-Element oder Block-Element dargestellt werden.

Beispiel

Standard-Link mit Text und optionalem Icon-Symbol:

<KolLink _href="https://example.com" _label="Beispiel-Link" _target="_blank" />

Barrierefreiheit

Die Link-Komponente ist vollständig über die Tastatur bedienbar.
Das Label (_label) wird als sichtbarer Text ausgegeben und ist für alle Nutzer:innen verfügbar.
Icons können zusätzlich zum Label angezeigt werden und verdeutlichen visuell den Linkzweck.
Für versteckte Label-Texte (_hideLabel: true) wird automatisch ein Tooltip beim Fokussieren oder Hovern angezeigt.
Das Attribut _ariaCurrentValue kann verwendet werden, um eine aktive/aktuelle Seite zu kennzeichnen (z. B. _ariaCurrentValue="page").
Mit dem _ariaDescription können zusätzliche Accessibility-Informationen bereitgestellt werden.

Links und Referenzen

Verwendung

Tastatursteuerung

Taste	Funktion
`Tab`	Fokussiert das Link-Element.
`Enter`	Öffnet den Hyperlink.
`Space`	Öffnet den Hyperlink (je nach Browser und Kontext).

Best Practices / Empfehlungen

Aussagekräftige Link-Texte: Verwenden Sie beschreibende Link-Texte wie „Weitere Informationen" statt „Hier klicken".
Kontext bewahren: Links sollten auch out-of-context verständlich sein, z. B. für Screenreader-Nutzer:innen die eine Linkliste höherer (z. B. nur Links).
Inline vs. Block: Nutzen Sie _inline: true (Standard) für Links im Fließtext. Verwenden Sie _inline: false für Links, die als eigenständige Blöcke dargestellt werden sollen.
Icons sinnvoll einsetzen: Icons sollten den Link-Zweck verdeutlichen, z. B. ein Download-Icon bei Dateilinks. Das Label bleibt das Primäre.
Download-Attribute nutzen: Verwenden Sie _download für Links zu Dateien, um dem Browser zu signalisieren, dass eine Datei heruntergeladen werden soll: _download="dateiname.pdf".
Ziel klar machen: Wenn der Link ein neues Fenster/Tab öffnet (_target="_blank"), erwähnen Sie dies im Label oder mit einem Icon.
Externe vs. interne Links: Icon-Konventionen helfen Nutzer:innen, externe Links zu erkennen.
Nicht deaktivieren ohne Grund: Das Attribut _disabled sollte nur mit guter Begründung verwendet werden.

Anwendungsfälle

Navigation in Menüs und Navigationsleisten
Links im Fließtext und in Absätzen
Verlinkungen zu externen Ressourcen und Dokumentationen
Download-Links für Dateien
Breadcrumb-Navigation
Links in Tabellen und Listen
Call-to-Action-Links

FAQ

Wie aktiviere ich die automatische Erkennung der aktuellen Seite (aria-current)? Nutzen Sie den setCurrentLocation()-Service von KoliBri. Siehe hierzu den Abschnitt aria-current Service unten.

Wann sollte ich _hideLabel: true verwenden? Nutzen Sie dies, wenn ein aussagekräftiges Icon vorhanden ist und der Label-Text aus Platzgründen versteckt werden soll, aber dennoch von Screenreadern gelesen wird. Der Text wird dann als Tooltip angezeigt.

Kann ich mehrere Icons anzeigen? Ja, Sie können mehrere Icon-Klassen über das _icons-Attribut kombinieren.

Konstruktion / Technik

Playground

Testen Sie die verschiedenen Eigenschaften der Link-Komponente:

Icons

Tooltip Align

<KolLink _href="https://public-ui.github.io/docs" _label="KoliBri - Public UI" _target="_blank" />

Funktionalitäten (mit Code)

Basis-Link

Ein einfacher Link mit Label und href:

<KolLink _href="https://example.com" _label="Beispiel-Link" _target="_blank" />

Link mit Icon

Link mit einem Icon, das den Linkzweck visualisiert:

Icons

<KolLink _href="https://example.com" _icons="kolicon-external" _label="Mit Icon" _target="_blank" />

Link-Variationen

Verschiedene Anzeigevarianten und Zustände:

<KolLink _href="https://example.com" _label="Link-Variation" _target="_blank" />

Download-Link

Link mit Download-Funktionalität:

<KolLink _download="datei.pdf" _href="https://example.com/datei.pdf" _label="Datei herunterladen" _target="_blank" />

Konfiguration der Tooltip-Positionierung (bei _hideLabel: true):

Tooltip Align

<KolLink _hideLabel={true} _href="https://example.com" _icons="kolicon-external" _label="Nur Icon" _target="_blank" _tooltipAlign="top" />

ARIA-Attribute und Accessibility

Erweiterte Accessibility-Konfigurationen:

<KolLink _ariaCurrentValue="page" _ariaDescription="Dies ist die aktuelle Seite" _href="/current-page" _label="Aktive Seite" _target="_blank" />

aria-current Service

Damit die Link-Komponente automatisch ein aria-current-Attribut setzen kann, muss ihr über den setCurrentLocation()-Service mitgeteilt werden, welche Seite gerade aktiv ist:

import { setCurrentLocation } from '@public-ui/components';

/* Bei jedem Seitenwechsel aufrufen: */
setCurrentLocation('/path/to/page');

Der übergebene Location-String muss dabei exakt dem _href-Attribut des Links entsprechen.

Events

Zur Behandlung von Events bzw. Callbacks siehe .

Event	Auslöser	Value
`click`	Der Link wird angeklickt	-

API

Properties

Property	Attribute	Description	Type	Default
`_accessKey`	`_access-key`	Defines the key combination that can be used to trigger or focus the component's interactive element.	`string \| undefined`	`undefined`
`_ariaControls`	`_aria-controls`	Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)	`string \| undefined`	`undefined`
`_ariaCurrentValue`	`_aria-current-value`	Defines the value for the aria-current attribute.	`"date" \| "false" \| "location" \| "page" \| "step" \| "time" \| "true" \| undefined`	`undefined`
`_ariaDescription`	`_aria-description`	Defines the value for the aria-description attribute.	`string \| undefined`	`undefined`
`_ariaExpanded`	`_aria-expanded`	Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)	`boolean \| undefined`	`undefined`
`_disabled`	`_disabled`	Makes the element not focusable and ignore all events.	`boolean \| undefined`	`false`
`_download`	`_download`	Tells the browser that the link contains a file. Optionally sets the filename.	`string \| undefined`	`undefined`
`_hideLabel`	`_hide-label`	Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.	`boolean \| undefined`	`false`
`_href` (required)	`_href`	Sets the target URI of the link or citation source.	`string`	`undefined`
`_icons`	`_icons`	Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).	`KoliBriHorizontalIcons & KoliBriVerticalIcons \| string \| undefined`	`undefined`
`_inline`	`_inline`	Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.	`boolean \| undefined`	`true`
`_label`	`_label`	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.	`string \| undefined`	`undefined`
`_on`	--	Defines the callback functions for links.	`undefined \| { onClick?: EventValueOrEventCallback<Event, string> \| undefined; }`	`undefined`
`_role`	`_role`	[DEPRECATED] We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future. Defines the role of the components primary element.	`"tab" \| "treeitem" \| undefined`	`undefined`
`_shortKey`	`_short-key`	Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.	`string \| 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'`
`_variant`	`_variant`	Defines which variant should be used for presentation.	`string \| undefined`	`undefined`

Methods

focus

focus() => Promise<void>

Sets focus on the internal element.

Returns

Type: Promise<void>

Beispiel​

Barrierefreiheit​

Links und Referenzen​

Verwendung​

Tastatursteuerung​

Best Practices / Empfehlungen​

Anwendungsfälle​

FAQ​

Konstruktion / Technik​

Playground​

Funktionalitäten (mit Code)​

Basis-Link​

Link mit Icon​

Link-Variationen​

Download-Link​

Tooltip-Alignment​

ARIA-Attribute und Accessibility​

aria-current Service​

Events​

API​

Properties​

Methods​

focus​

Returns​