You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The A11y and PO reviews will only take place after all other DoD steps
have been completed by the Developer:
- [x] Maturation completed and documented
- [x] Meaningful pull request title for the release notes
- [x] Pull request is linked to an issue
- [x] All changes relate to the issue
- [x] No TODOs or commented out code in the final commit
- [x] Tests to protect this code implemented (if applicable)
- [x] Manual test performed successfully (if applicable)
- [x] Documentation or migration has been updated (if applicable)
Die **Abbr**-Komponente implementiert den HTML-Tag `abbr`, wobei hier jedoch der Tooltip barrierefrei ist.
19
+
Der Tooltip für die Beschreibung wird bei Focus oder Hover der **Abbr**-Komponente angezeigt und vorgelesen.
20
+
21
+
## Konstruktion
22
+
23
+
### Code
24
+
25
+
```html
26
+
<p>Ich bin eine <kol-abbr_label="Abkürzung"_tooltip-align="top">Abbr</kol-abbr> mit Tooltip oben.</p>
27
+
<p>Ich bin eine <kol-abbr_label="Abkürzung"_tooltip-align="right">Abbr</kol-abbr> mit Tooltip rechts.</p>
28
+
<p>Ich bin eine <kol-abbr_label="Abkürzung"_tooltip-align="bottom">Abbr</kol-abbr> mit Tooltip unten.</p>
29
+
<p>Ich bin eine <kol-abbr_label="Abkürzung"_tooltip-align="left">Abbr</kol-abbr> mit Tooltip links.</p>
30
+
```
31
+
32
+
### Beispiel
33
+
34
+
<p>Ich bin eine <kol-abbr_label="Abkürzung"_tooltip-align="top">Abbr</kol-abbr> mit Tooltip oben.</p>
35
+
<p>Ich bin eine <kol-abbr_label="Abkürzung"_tooltip-align="right">Abbr</kol-abbr> mit Tooltip rechts.</p>
36
+
<p>Ich bin eine <kol-abbr_label="Abkürzung"_tooltip-align="bottom">Abbr</kol-abbr> mit Tooltip unten.</p>
37
+
<p>Ich bin eine <kol-abbr_label="Abkürzung"_tooltip-align="left">Abbr</kol-abbr> mit Tooltip links.</p>
38
+
39
+
## Verwendung
40
+
41
+
### Angabe der Beschreibung zur Abkürzung
42
+
43
+
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.
44
+
45
+
### Ausrichtung des Tooltip
46
+
47
+
Über das Attribut **`_tooltip-align`** wird die Positionierung des ToolTip, relativ zur Abkürzung, festgelegt.
48
+
49
+
## Barrierefreiheit
50
+
51
+
Die Abbr-Komponente wurde von KoliBri umgesetzt, weil der Standard-Tooltip nicht barrierefrei bzgl. der Skalierung ist.
52
+
Der KoliBri Tooltip kann von Screenreadern vorgelesen werden und verändert seine Größe beim Zoomen korrekt.
Die **Accordion**-Komponente ist ein Aufklapp-Menü. Klickt man auf den Kopfbereich, bestehend aus Icon und Überschrift, klappt der Inhalt mit zusätzlichen Informationen auf. Somit ist es ein interaktives Navigationselement, welches dazu dient, umfangreiche Inhalte platzsparend darzustellen.
21
+
22
+
Accordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zugeordnete Inhalte angezeigt oder verborgen werden sollen. Sie erlauben umfangreichere Detailinformationen zu einem Oberbegriff, als es aus Gründen der Übersichtlichkeit eigentlich sinnvoll wäre. Sie überlassen es den Besucher:innen selbst, ob sie sich diese Informationen anzeigen lassen möchten.
23
+
24
+
## Konstruktion
25
+
26
+
### Code
27
+
28
+
```html
29
+
<divclass="grid gap-2">
30
+
<kol-accordion_label="Element 1">
31
+
<div>
32
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
33
+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
34
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
35
+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
36
+
</div>
37
+
</kol-accordion>
38
+
<kol-accordion_label="Element 2">
39
+
<div>
40
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
41
+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
42
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
43
+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
44
+
</div>
45
+
</kol-accordion>
46
+
</div>
47
+
```
48
+
49
+
### Beispiel
50
+
51
+
<divclass="grid gap-2">
52
+
<kol-accordion_label="Element 1">
53
+
<div>
54
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
55
+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
56
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
57
+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
58
+
</div>
59
+
</kol-accordion>
60
+
<kol-accordion_label="Element 2">
61
+
<div>
62
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
63
+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
64
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
65
+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
66
+
</div>
67
+
</kol-accordion>
68
+
</div>
69
+
70
+
## Verwendung
71
+
72
+
### Überschrift im Accordion-Tab
73
+
74
+
Der Text, der als Überschrift im Accordion-Tab angezeigt werden soll, wird durch das Attribut **`_label`** übergeben. Der Text kann neben Sonderzeichen auch Umlaute oder Leerzeichen enthalten.
75
+
76
+
### Überschriftenebene
77
+
78
+
Die Überschriftenebene wird durch das Attribut **`_level`** übergeben. Möglich sind die Level **1** bis **6**
79
+
80
+
### Inhalt des Accordion
81
+
82
+
Der Hauptinhalt des Accordions wird über deb Slot übergeben.
Standardmäßig wird das Accordion nach dem Laden der Seite im geschlossenen Zustand angezeigt. Soll das Accordion geöffnet angezeigt werden, setzen Sie das Attribut **\_open** zusätzlich ein.
89
+
90
+
### Best practices
91
+
92
+
- Verwenden Sie ein Accordion, um lange Textabschnitte unter einem thematischen Oberbegriff zusammenzufassen
93
+
- Verwenden Sie ein Accordion, um weniger wichtige Informationen, als Ergänzung zu Hauptinformationen, zur Verfügung zu stellen.
94
+
- Mit einem Accordion können Sie die Länge Ihrer Webseite deutlich reduzieren und stellen gleichzeitig die Erreichbarkeit aller Informationen für die Nutzer:innen sicher.
95
+
- Verwenden Sie eindeutige Überschriften, um die Nutzer:innen auf die weiteren Informationen des Accordions hinzuweisen.
96
+
- Vermeiden Sie, wichtige `Call-To-Action`-Elemente innerhalb eines Accordions zu verbergen.
97
+
- Lassen Sie Fehlermeldungen nicht innerhalb des Accordions anzeigen, um zu vermeiden, dass Nutzer:innen wichtige Informationen übersehen.
98
+
- Verwenden Sie ein Accordion nicht als Auswahl-Element für Nutzer:innen.
99
+
- Verwenden Sie ein Accordion nicht, um wichtige Informationen zu rechtlichen Angaben oder zum Datenschutz anzuzeigen.
100
+
101
+
### Anwendungsfälle
102
+
103
+
- Häufig gestellte Fragen (FAQ)
104
+
105
+
## Barrierefreiheit
106
+
107
+
In der **Accordion**-Komponente wird das Öffnen-/Schließen-Icon links ausgerichtet, um Nutzer:innen mit eingeschränktem Sichtfeld eine bessere Bedienbarkeit zu ermöglichen.
108
+
109
+
Es wurde bewusst auf die Verwendung von Icons, wie z.B. `<` oder `>` verzichtet. Die Verwendung der Icons `+` und `-` gewährleistet eine bessere Sicht- und Erkennbarkeit bezüglich des Geöffnet- und Geschlossen-Status.
110
+
111
+
Bei der farblichen Gestaltung wurde besonders Wert auf einen höchstmöglichen Kontrast in der
Die **Alert**-Komponente gibt ein optisches Feedback an die Nutzer:innen. Sie besteht aus einem farblich gestalteten Container, einer Überschrift, einem Inhaltstext sowie einem Icon. Das verwendete Icon und die farbliche Gestaltung sind abhängig vom Typ `_type` des Alert.
20
+
21
+
## Konstruktion
22
+
23
+
### Code
24
+
25
+
```html
26
+
<kol-alert_label="Überschrift im Alert"_level="1"_type="success">Textbereich im Alert</kol-alert>
27
+
<kol-alert_label="Überschrift im Alert"_level="2"_type="info"_variant="card">Textbereich im Alert</kol-alert>
28
+
```
29
+
30
+
### Beispiel
31
+
32
+
<kol-alert_label="Überschrift im Alert"_level="1"_type="success" >Textbereich im Alert</kol-alert>
33
+
<kol-alert_label="Überschrift im Alert"_level="2"_type="info"_variant="card">Textbereich im Alert</kol-alert>
34
+
35
+
## Verwendung
36
+
37
+
### Überschrift
38
+
39
+
Die **Überschrift** der Alert-Komponente wird über das Attribut `_label` bestimmt.
40
+
41
+
### Überschriftenebene
42
+
43
+
Die Überschriftenebene wird durch das Attribut **`_level`** übergeben. Möglich sind die Level **1** bis **6**
44
+
45
+
### Typ des Alert
46
+
47
+
Die **Alert**-Komponente bietet **vier** unterschiedliche Typen, die sich jeweils auf die farbliche Gestaltung und das verwendetet Icon im Alert beziehen. Zur Wahl stehen:
48
+
49
+
<ul>
50
+
<li>Success</li>
51
+
<li>Error</li>
52
+
<li>Info</li>
53
+
<li>Warning</li>
54
+
</ul>
55
+
56
+
Der Typ eines Alert wird über das Attribut `_type` festgelegt.
57
+
58
+
### Inhalt des Alert
59
+
60
+
Der Inhalt des Alert wird zwischen das öffnende Element `<kol-alert>` und das schließende `</kol-alert>` geschrieben. Der Inhalt kann aus beliebigem **HTML-Code**, aber auch aus weiteren **KoliBri**-Komponenten bestehen.
61
+
62
+
### Variante des Alert
63
+
64
+
Über das Attribut **`_variant`** kann festgelegt werden, in welcher Darstellungsvariante das Alert angezeigt wird. `msg` lässt die linke, farbig hinterlegte Spalte mit dem Icon über die gesamte Höhe des Alerts gehen, `card` setzt die linke Spalte nur neben die Überchrift.
65
+
66
+
### Best practices
67
+
68
+
- Verwenden Sie die **Alert**-Komponente an geeigneten Positionen auf Ihrer Webseite, um Informationen im richtigen Zusammenhang darzustellen.
69
+
- Verwenden Sie immer den richtigen **Type** der **Alert**-Komponente, um bei den Benutzer:innen die gewünschte Reaktion zu erzeugen. Vermeiden Sie bspw. den Typ **_Error_**, wenn Sie auf den erfolgreichen Abschluss eines Speichervorgangs hinweisen möchten.
70
+
- Vermeiden Sie, zu viele **Alert**-Komponenten auf einer Seite zu platzieren, da der Informationsgehalt von den Benutzer:innen dann oft nicht mehr als besonders wichtig wahrgenommen wird.
71
+
72
+
### Anwendungsfälle
73
+
74
+
- Verwenden Sie die **Alert**-Komponente, wenn Sie die Benutzer:innen auf Fehler bei der Eingabe in Formularen hinweisen möchten.
75
+
- Verwenden Sie die **Alert**-Komponente, um Nutzer:innen auf die erfolgreiche Ausführung von Funktionen hinzuweisen, z.B. **`Ihre Anfrage wurde erfolgreich gespeichert`**.
76
+
- Verwenden Sie die **Alert**-Komponente, um Nutzer:innen weitere Informationen zu einem Thema zur Verfügung zu stellen.
77
+
78
+
## Barrierefreiheit
79
+
80
+
Die **Alert**-Komponente wurde auf die Darstellung mit höchstmöglichen Kontrast optimiert.
81
+
82
+
Das zusätzliche Icon (je nach gewähltem Typ) gewährleistet, dass die Information vom Nutzer nicht allein über die Farbe klassifiziert werden muss.
83
+
84
+
Bei der Nutzung eines Screenreaders wird immer das Icon mitgelesen.
85
+
Der Titel sollte daher nicht mit dem **Alert**-Typ beginnen, da das zu einem doppelten Vorlesen des **Alert**-Typs führt.
86
+
87
+
**Beispiel:**
88
+
Richtig: Label = "Füllen Sie das Feld aus." → Ausgabe: "Fehler - Füllen Sie das Feld aus."
89
+
Falsch: Label = "Fehler: Füllen Sie das Feld aus." → "Ausgabe: Fehler - Fehler: Füllen Sie das Feld aus."
90
+
91
+
Bei der **Alert**-Komponente wurden insbesondere folgende Punkte der Barrierefreiheit betrachtet:
92
+
93
+
- Die Schriftfarbe ist entweder weiß oder schwarz.
94
+
- Die Schriftfarbe ist abhängig von der Hintergrundfarbe und wechselt immer auf die Schriftfarbe mit dem größeren Farbkontrast zur Hintergrundfarbe.
95
+
- Ist der Farbkontrast für AA nicht ausreichend, wird die Hintergrundfarbe überschrieben.
Die **Avatar**-Komponente zeigt entweder ein kleines Bild des Users oder dessen Initialen an, falls kein Bild vorhanden ist.
20
+
21
+
## Konstruktion
22
+
23
+
### Code
24
+
25
+
```html
26
+
<kol-avatar_label="Erika Maria Mustermann"></kol-avatar>
27
+
<kol-avatar_label="Erika"></kol-avatar>
28
+
<kol-avatar_src="https://www.w3schools.com/howto/img_avatar.png"_label="Erika Maria Mustermann"></kol-avatar>
29
+
```
30
+
31
+
### Beispiele
32
+
33
+
<kol-avatar_label="Erika Maria Mustermann"></kol-avatar>
34
+
<kol-avatar_label="Erika"></kol-avatar>
35
+
<kol-avatar_src="https://www.w3schools.com/howto/img_avatar.png"_label="Erika Maria Mustermann"></kol-avatar>
36
+
37
+
## Verwendung
38
+
39
+
### Mit Bild
40
+
41
+
In der Standard-Ansicht zeigt die **Avatar**-Komponente ein Avatar-Bild. Hierzu muss das Attribut `_src` mit einer URL zum Bild angegeben werden.
42
+
Zusätzlich ist es notwendig, das `_label`-Attribut mit dem Namen des Benutzers anzugeben, damit ein Alternativtext ausgezeichnet werden kann.
43
+
44
+
### Ohne Bild
45
+
46
+
Die **Avatar**-Komponente kann auch ohne `_src`-Attribut verwendet werden und zeigt in diesem Fall die Initialen des Benutzers, basierend auf dem
47
+
`_label`-Attribut.
48
+
49
+
### Anwendungsfälle
50
+
51
+
Verwenden Sie die **Avatar**-Komponente, um das Bild eines Users anzuzeigen.
52
+
53
+
## Barrierefreiheit
54
+
55
+
Bei der **Avatar**-Komponente wurden insbesondere folgende Punkte der Barrierefreiheit betrachtet:
56
+
57
+
- Die Komponente ist mit einem Beschreibungstext, der den Namen des Users beinhaltet, als aria-label ausgezeichnet.
58
+
- Die Initialen, die alternativ zum Avatar-Bild gezeigt werden, werden als rein visuelles, semantisch nicht relevantes Element betrachtet und für Screenreader
0 commit comments