Abbr
Die Abbr-Komponente implementiert den HTML-Tag abbr um eine Abkürzung darzustellen. Optional kann ein Label übergeben werden, das in Klammern nach der Abkürzung angezeigt wird.
Konstruktion
Code
<p>Ich <kol-abbr _label="zum Beispiel">z. B.</kol-abbr> bin eine Abkürzung mit Label.</p>
<p>Ich <kol-abbr>z. B.</kol-abbr> bin eine Abkürzung ohne Label.</p>
Beispiel
Ich
Ich
Verwendung
Angabe der Beschreibung zur Abkürzung
Der Begriff bzw. die Erklärung wird über das Attribut _label übergeben, die Abkürzung bzw. der erklärungswürdige Begriff kommt zwischen die Tags im HTML.
Links und Referenzen
Die Abbr-Komponente implementiert den HTML-Tag abbr, wobei hier jedoch der Tooltip barrierefrei ist. Der Tooltip für die Beschreibung wird bei Focus oder Hover der Abbr-Komponente angezeigt und vorgelesen.
Konstruktion
Code
<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="top">Abbr</kol-abbr> mit Tooltip oben.</p>
<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="right">Abbr</kol-abbr> mit Tooltip rechts.</p>
<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="bottom">Abbr</kol-abbr> mit Tooltip unten.</p>
<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="left">Abbr</kol-abbr> mit Tooltip links.</p>
Beispiel
Ich bin eine
Ich bin eine
Ich bin eine
Ich bin eine
Verwendung
Angabe der Beschreibung zur Abkürzung
Der Begriff bzw. die Erklärung wird über das Attribut _label übergeben, die Abkürzung bzw. der erklärungswürdige Begriff kommt zwischen die Tags im HTML.
Ausrichtung des Tooltip
Über das Attribut _tooltip-align wird die Positionierung des ToolTip, relativ zur Abkürzung, festgelegt.
Barrierefreiheit
Die Abbr-Komponente wurde von KoliBri umgesetzt, weil der Standard-Tooltip nicht barrierefrei bzgl. der Skalierung ist. Der KoliBri Tooltip kann von Screenreadern vorgelesen werden und verändert seine Größe beim Zoomen korrekt.
Links und Referenzen
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_label (required) | _label | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | string | undefined |
_tooltipAlign | _tooltip-align | Defines where to show the Tooltip preferably: top, right, bottom or left. | "bottom" | "left" | "right" | "top" | undefined | 'top' |
Slots
| Slot | Description |
|---|---|
| Der Begriff, der erläutert werden soll. |