UNPKG

@public-ui/components

Version:

Contains all web components that belong to KoliBri - The accessible HTML-Standard.

public-ui.github.io

public-ui/kolibri

61 lines (35 loc) • 2.53 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
# Avatar Synonyme: Persona Die **Avatar**-Komponente zeigt entweder ein kleines Bild des Users oder dessen Initialen an, falls kein Bild vorhanden ist. ## Konstruktion ### Code ```html <kol-avatar _label="Erika Maria Mustermann"></kol-avatar> <kol-avatar _label="Erika"></kol-avatar> <kol-avatar _src="https://www.w3schools.com/howto/img_avatar.png" _label="Erika Maria Mustermann"></kol-avatar> ``` ### Beispiele <kol-avatar _label="Erika Maria Mustermann"></kol-avatar> <kol-avatar _label="Erika"></kol-avatar> <kol-avatar _src="https://www.w3schools.com/howto/img_avatar.png" _label="Erika Maria Mustermann"></kol-avatar> ## Verwendung ### Mit Bild In der Standard-Ansicht zeigt die **Avatar**-Komponente ein Avatar-Bild. Hierzu muss das Attribut `_src` mit einer URL zum Bild angegeben werden. Zusätzlich ist es notwendig, das `_label`-Attribut mit dem Namen des Benutzers anzugeben, damit ein Alternativtext ausgezeichnet werden kann. ### Ohne Bild Die **Avatar**-Komponente kann auch ohne `_src`-Attribut verwendet werden und zeigt in diesem Fall die Initialen des Benutzers, basierend auf dem `_label`-Attribut. ### Anwendungsfälle Verwenden Sie die **Avatar**-Komponente, um das Bild eines Users anzuzeigen. ## Barrierefreiheit Bei der **Avatar**-Komponente wurden insbesondere folgende Punkte der Barrierefreiheit betrachtet: - Die Komponente ist mit einem Beschreibungstext, der den Namen des Users beinhaltet, als aria-label ausgezeichnet. - Die Initialen, die alternativ zum Avatar-Bild gezeigt werden, werden als rein visuelles, semantisch nicht relevantes Element betrachtet und für Screenreader entsprechend versteckt. <!-- Auto Generated Below --> ## 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` | | `_src` | `_src` | Sets the image `src` attribute to the given string. | `string` \| `undefined` | `undefined` | ----------------------------------------------