Link

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.

Playground

Testen Sie die verschiedenen Eigenschaften der Link-Komponente:

Variant

Icons

Tooltip Align

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

Funktionalitäten

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" />

Varianten

Die Darstellung wird über _variant gesteuert. Die Themes steuern welche Varianten zur Verfügung stehen und welche der Standardwert ist. Hier sind zu sehen. Im Folgenden zeigen wir nur das Default Theme.

Variant

<KolLink _href="https://public-ui.github.io/docs" _label="Link-Varianten" _target="_blank" _variant="small" />

Link-Zustände

Verschiedene Zustände:

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

Download-Link

Link mit Download-Funktionalität:

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

Tooltip-Alignment

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.	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
_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 | string[] | undefined	undefined

Methods

focus

focus(options?: KolFocusOptions) => Promise<void>

Sets focus on the internal element.

Parameters

Name	Type	Description
options	KolFocusOptions | undefined

Returns

Type: Promise<void>

Slots

Slot	Description
"expert"	Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot

---