Abbr

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: Abkürzung, Akronym

Beschreibung: Die Abbr-Komponente kennzeichnet eine Abkürzung oder ein Akronym im Fließtext und kann die ausgeschriebene Bedeutung als Tooltip oder sichtbare Ergänzung bereitstellen. Dies verbessert die Verständlichkeit für alle Nutzer, besonders für diejenigen, die mit der Kurzform nicht vertraut sind.

Beispiel

Standard-Abkürzung mit optionalem Label:

z. B.

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

Barrierefreiheit

Die Abbr-Komponente nutzt das semantische HTML-Element abbr und signalisiert assistiven Technologien, dass es sich um eine Abkürzung oder ein Akronym handelt:

• Semantische Auszeichnung: Das HTML-Element abbr wird verwendet, um Abkürzungen korrekt zu kennzeichnen.
• Label für Screen Reader: Das Attribut _label versorgt Screenreader mit der ausgeschriebenen Form, die vorgelesen wird.
• Sichtbare Erklärung: Die ausgeschriebene Form wird optional sichtbar im Text angezeigt, nicht nur als Tooltip.
• Keine Tastaturinteraktion: Die Komponente ist nicht interaktiv und erfordert keine Tastaturnavigation.

Links und Referenzen

Verwendung

Best Practices / Empfehlungen

• Verwenden Sie abbr, um Abkürzungen zu kennzeichnen, die nicht allgemein bekannt sind.
• Geben Sie über _label die ausgeschriebene Form an, damit die Bedeutung direkt verständlich ist.
• Nutzen Sie die Komponente im Fließtext und nicht als interaktives Bedienelement.
• Verwenden Sie konsistente Schreibweisen (z.B. immer z. B. statt wechselnder Kurzformen).
• Verzichten Sie auf Abkürzungen, wenn die volle Form nicht zu Platzproblemen führt.

Anwendungsfälle

• Fachbegriffe und Standardabkürzungen in Formularen und Hinweisen (z.B. z. B., u. a., MwSt.)
• Organisatorische oder rechtliche Kurzformen in Verwaltungstexten
• Technische Akronyme in Dokumentationen, wenn die Langform mitgeführt werden soll
• Internationale Abkürzungen, die für Nutzer unklar sein könnten (z.B. WHO, API)

Konstruktion / Technik

Playground

z. B.

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

Funktionalitäten (mit Code)

Abkürzung ohne Label

Abkürzung als reines Text-Element ohne zusätzliche Erklärung:

z. B.

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

Abkürzung mit Label

Abkürzung mit ausgeschriebener Erklärung über das _label-Attribut:

z. B.

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

API

Overview

The Abbr component implements the HTML tag abbr with an accessible tooltip. The tooltip for the description is displayed and read aloud when the Abbr component is focused or hovered.

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).

---