Diagram
À quoi il sert
Diagram enveloppe un schéma SVG avec un titre, une description complète et une légende visible.
Quand l’utiliser
- Montrer une chaîne de trois à cinq blocs reliés par des flèches.
- Fournir une description complète, lue à la place du schéma par les lecteurs d’écran.
Quand ne pas l’utiliser
- Pour une photo ou une illustration : utiliser Photo ou Figure.
- Pour un graphe de plus de cinq blocs : simplifier le schéma ou le décrire en liste.
Exemples
<Diagram
id="chaine"
title="Chaîne de dépendances"
description="Les jetons alimentent css, css alimente astro."
caption="Trois paquets, un seul sens de dépendance."
viewBox="0 0 360 120"
>
<defs>
<marker id="pp-diagram-arrow" viewBox="0 0 10 10" refX="10" refY="5"
markerWidth="8" markerHeight="8" markerUnits="userSpaceOnUse" orient="auto">
<path class="pp-diagram__head" d="M0 0L10 5L0 10Z" />
</marker>
</defs>
<rect class="pp-diagram__box" x="8" y="40" width="96" height="40" />
<rect class="pp-diagram__box" x="128" y="40" width="96" height="40" />
<text class="pp-diagram__label" x="56" y="65" text-anchor="middle">tokens</text>
<text class="pp-diagram__label" x="176" y="65" text-anchor="middle">css</text>
<path class="pp-diagram__line" d="M104 60H124" marker-end="url(#pp-diagram-arrow)" />
</Diagram>Accessibilité
Clavier
- Sans scroll, le schéma ne reçoit pas le focus et n’a pas de touche propre.
- Avec scroll, le conteneur reçoit le focus (tabindex="0") et se parcourt au clavier.
- Le contour de focus entoure le conteneur (WCAG 2.4.7).
Lecteur d’écran
- Le nom du schéma est le titre suivi de la description (aria-labelledby).
- Le SVG a le rôle img : ses blocs et ses flèches ne sont pas lus un à un.
- Avec scroll, le conteneur est un groupe nommé par le titre.
Garanti par le composant
- Le SVG expose un titre et une description (WCAG 1.1.1).
- Traits, boîtes et étiquettes viennent de jetons ; aucun dégradé, ombre ni flou.
- En forced-colors: active, traits et textes passent en CanvasText, les boîtes en Canvas.
- Aucun JavaScript et aucun attribut style.
À la charge de l’intégrateur
- Écrire une description qui donne les étapes, les relations et le sens des flèches (WCAG 1.1.1).
- Ne pas porter le sens par la couleur d’accent seule : le texte doit le dire (WCAG 1.4.1).
- Vérifier le contraste des traits et des boîtes, non garanti par le composant (WCAG 1.4.11).
- Choisir un viewBox proche de la taille d’affichage : le texte suit l’échelle du schéma.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| id (obligatoire) | string | — | Préfixe unique des ids de titre et de description : lettres, chiffres et tirets. |
| title (obligatoire) | string | — | Titre court du schéma, premier élément du nom accessible. |
| description (obligatoire) | string | — | Alternative textuelle complète : étapes, relations, sens des flèches. |
| caption | string | — | Légende visible sous le schéma. |
| viewBox (obligatoire) | string | — | Boîte du SVG, « min-x min-y largeur hauteur », par exemple « 0 0 360 120 ». |
| scroll | boolean | false | Schéma à largeur naturelle, dans un conteneur défilable et focalisable au clavier. |
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
--pp-color-accent--pp-color-fg--pp-color-focus--pp-color-muted--pp-color-surface--pp-font-family-sans--pp-font-size--1--pp-size-focus-offset--pp-size-focus-width--pp-size-measure--pp-space-2xs
Preuves et décisions
- WCAG 1.1.1 Contenu non textuel
- WCAG 1.4.1 Utilisation de la couleur
- WCAG 1.4.11 Contraste non textuel
- WCAG 2.4.7 Focus visible
- Motif APG : aucun motif APG ne couvre les schémas SVG (non vérifié)
- Tests : packages/astro/test/Diagram.test.ts