Avatar
À quoi il sert
Avatar affiche une image carrée au rayon des médias, recadrée en haut, pour accompagner un nom.
Quand l’utiliser
- Accompagner un nom affiché : l’avatar est alors decorative, le nom est lu seul.
- Afficher une image de profil en trois tailles, s, m ou l, par data-size.
Quand ne pas l’utiliser
- Pour une image qui porte seule une information : utiliser Photo avec un alt.
- Pour un sujet placé hors du haut de l’image : le cadrage est fixé en haut.
Exemples
<Avatar src={portrait} decorative size="m" />Variantes
Accessibilité
Clavier
- Avatar n’est pas interactif : il ne prend pas le focus.
Lecteur d’écran
- Avec decorative, l’image a alt="" et est ignorée des lecteurs d’écran.
- Le nom affiché à côté est lu seul, sans doublon.
Garanti par le composant
- Image rendue par Photo, dans picture, avec alt ou alt vide.
- Cadre carré au rayon média, taille par data-size (s, m, l), focal en haut.
À la charge de l’intégrateur
- Écrire un alt si l’image est seule, sans nom à côté.
- Importer l’image localement : Photo n’affiche que des images locales.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| alt | string | — | Texte alternatif : ce que l'image apporte au contenu. Vide : erreur au build. |
| decorative | true | — | Image purement décorative, rendue avec `alt=""`. Exclusif de `alt`. |
| src (obligatoire) | ImageMetadata | — | Image carrée, importée localement (aucun visage dans la doc). |
| size | "s" | "m" | "l" | 'm' | Taille : `s`, `m` ou `l` (tokens `--pp-space-xl`, `-2xl`, `-3xl`). |
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
--pp-space-2xl--pp-space-3xl--pp-space-xl
Preuves et décisions
- WCAG 1.1.1 Contenu non textuel (A)
- Tests : packages/astro/test/Avatar.test.ts
- Tests : packages/astro/test/Photo.test.ts