Abbr

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

This component is being retested for accessibility. The full test is still pending and can only be completed after a release.

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

---