Abbr

This documentation is currently being revised and is in beta status. Content may still change.

Synonyms: Abbreviation, Acronym

Description: The Abbr component marks an abbreviation or acronym in running text and can provide the expanded meaning as a tooltip or visible supplement. This improves comprehensibility for all users, especially for those unfamiliar with the short form.

Example

Standard abbreviation with optional label:

e.g.

<KolAbbr _label="for example" >e.g.</KolAbbr>

Accessibility

The Abbr component uses the semantic HTML element abbr and signals to assistive technologies that an abbreviation or acronym is present:

• Semantic markup: The HTML element abbr is used to correctly identify abbreviations.
• Label for screen readers: The _label attribute provides screen readers with the expanded form, which is read aloud.
• Visible explanation: The expanded form is optionally displayed visibly in the text, not just as a tooltip.
• No keyboard interaction: The component is not interactive and requires no keyboard navigation.

Links and References

Usage

Best Practices / Recommendations

• Use abbr to mark abbreviations that are not commonly known.
• Provide the expanded form via _label so the meaning is immediately understandable.
• Use the component in running text, not as an interactive control.
• Use consistent spellings (e.g. always e.g. rather than alternating short forms).
• Avoid abbreviations if the full form does not cause space issues.

Use Cases

• Technical terms and standard abbreviations in forms and notes (e.g. e.g., i.e., VAT)
• Organizational or legal short forms in administrative texts
• Technical acronyms in documentation when the long form should be included
• International abbreviations that may be unclear to users (e.g. WHO, API)

Construction / Technical Details

Playground

e.g.

<KolAbbr _label="for example" >e.g.</KolAbbr>

Features (with Code)

Abbreviation without label

Abbreviation as a plain text element without additional explanation:

e.g.

<KolAbbr _label="for example" >e.g.</KolAbbr>

Abbreviation with label

Abbreviation with expanded explanation via the _label attribute:

e.g.

<KolAbbr _label="for example" >e.g.</KolAbbr>

API

Overview

The Abbr component implements the HTML tag abbr.

Properties

Property	Attribute	Description	Type	Default
_label	_label	DEPRECATED! 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).

---