Abbr

Synonyme: Abkürzung, Akronym

Die Komponente kennzeichnet eine Abkürzung im Fließtext und kann die ausgeschriebene Bedeutung direkt ergänzen. So bleibt Inhalt verständlich, auch wenn Leser:innen die Kurzform nicht kennen.

Beispiel (Default)

z. B.

<KolAbbr _label="zum Beispiel" >z. B.</KolAbbr>

Barrierefreiheit

abbr ist ein semantisches HTML-Element und signalisiert assistiven Technologien, dass es sich um eine Abkürzung handelt. Die KoliBri-Variante nutzt diese Semantik und ergänzt bei Bedarf die ausgeschriebene Form sichtbar im Text. So ist die Erklärung nicht nur per Hover verfügbar, sondern für alle Nutzergruppen direkt lesbar.

Die Komponente ist bewusst nicht interaktiv und besitzt daher keine eigenen Tastaturfunktionen. Interaktionen wie Klick, Expand/Collapse oder Fokuszustände wurden absichtlich nicht ergänzt, weil sie fachlich nicht zum Zweck einer reinen Textauszeichnung gehören.

Links und Referenzen

Verwendung

Tastatursteuerung

Die Komponente selbst hat keine eigene Tastaturinteraktion, da sie keine Aktion ausführt. Sie wird als normaler Textinhalt gelesen und verhält sich entsprechend der umgebenden Textstruktur.

Best Practices / Empfehlungen

• Verwende abbr, wenn eine Abkürzung nicht allgemein bekannt ist.
• Gib bei Bedarf die ausgeschriebene Form über _label an, damit Bedeutung direkt sichtbar ist.
• Nutze die Komponente im Fließtext und nicht als interaktives Bedienelement.
• Verwende konsistente Schreibweisen (z. B. immer z. B. statt wechselnder Kurzformen).

Anwendungsfälle

• Fachbegriffe in Formularen und Hinweisen (z. B. z. B., u. a., MwSt.)
• Organisatorische Kurzformen in Verwaltungstexten
• Technische Akronyme in Dokumentationen, wenn die Langform mitgeführt werden soll

Konstruktion / Technik (Arbeitstitel)

Playground

Platzhalter

Funktionalitäten (mit Code)

Abkürzung mit ausgeschriebener Erklärung:

<p>Ich <kol-abbr _label="zum Beispiel">z. B.</kol-abbr> bin eine Abkürzung mit Label.</p>

Abkürzung ohne zusätzliche Erklärung:

<p>Ich <kol-abbr>z. B.</kol-abbr> bin eine Abkürzung ohne Label.</p>

Ich z. B. bin eine Abkürzung mit Label.

Ich z. B. bin eine Abkürzung ohne Label.

API

Properties

Property	Attribute	Description	Type	Default
_label	_label	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).	string | undefined	undefined

Slots

Slot	Description
	The abbreviation (short form).

---

Beispiele