Blocs de graphiques : des graphiques accessibles avec des axes honnêtes

Un bloc de graphique est un affichage de données délimité qui combine un graphique avec son point clé, son titre, ses étiquettes, sa source, sa période et une alternative de données accessible. Utilisez-le lorsque la forme des données répond à la question plus rapidement qu’une ligne de valeurs exactes.

Pourquoi cet élément est important

Les graphiques exploitent la reconnaissance visuelle des motifs. Un lecteur peut détecter une hausse, un écart, un regroupement ou un changement de pente avant de comparer les mêmes valeurs cellule par cellule. Cela est utile lorsque le motif — et non la recherche précise — est l’objectif. C’est également dangereux : des axes tronqués, des intervalles inégaux ou des effets de surface peuvent faire paraître une petite différence décisive. Un graphique mérite sa place uniquement lorsqu’il réduit l’effort sans modifier les preuves.

La psychologie du lecteur rend le point clé écrit essentiel. Les personnes peuvent retenir plus facilement une direction ou une taille relative qu’une note de bas de page. Énoncez la conclusion délimitée en texte, y compris la population et la période si nécessaire. Ne revendiquez jamais la causalité à partir d’une corrélation ni une tendance générale à partir d’un intervalle sélectionné.

L’extractibilité machine nécessite que les noms de séries, étiquettes, valeurs, unités, source, période et conclusion soient en texte. Un robot d’exploration ou un moteur de réponse IA peut ne pas interpréter un chemin SVG, un canvas, une capture d’écran, un état de survol ou une légende colorée. Le bloc associe donc le visuel à des données ordonnées pour les technologies d’assistance, l’indexation, la vérification et la réutilisation.

Les règles d’écriture des éléments prévalent : sélectionnez cet élément parce que le but d’un passage est de révéler un motif quantitatif, et non parce qu’un graphique décorerait la page. Si la tâche est une recherche exacte ou une comparaison élément par élément, utilisez un tableau même si un logiciel de graphique est disponible.

Quand l’utiliser

Utilisez un graphique lorsque le lecteur a besoin de voir l’une des quatre formes : un changement sur une séquence ordonnée, des différences entre un ensemble gérable de catégories, la distribution d’observations, ou la relation entre deux variables quantitatives. Un graphique linéaire peut révéler une direction dans le temps ; un diagramme à barres peut classer des catégories ; un histogramme peut révéler une distribution ; et un nuage de points peut révéler une association et des valeurs aberrantes. L’ensemble de données doit être suffisamment complet, mesuré de manière cohérente et pertinent pour l’affirmation.

Un test simple distingue le graphique du tableau : si le lecteur doit d’abord remarquer un motif, choisissez un graphique ; s’il doit trouver une valeur exacte, choisissez un tableau. Si les deux importent, incluez un tableau compact dans le bloc de graphique afin que les deux sorties ne puissent pas dériver.

Les erreurs courantes incluent :

• Deux valeurs : rédigez une phrase ou une petite comparaison. Deux barres révèlent rarement un motif plus directement.
• Une longue liste de catégories : utilisez un tableau groupé. Trente barres créent des problèmes d’étiquettes et de disposition mobile.
• Quelques indicateurs clés : utilisez une bande statistique lorsque les chiffres sont des points forts indépendants plutôt qu’une seule série.
• Un processus ou une chronologie : utilisez une frise chronologique lorsque les marques n’encodent pas de quantité.
• Une affirmation causale à partir d’une association : un nuage de points peut montrer que deux variables évoluent ensemble ; il ne peut pas établir que l’une a causé l’autre.
• Une « histoire de données » décorative : si la suppression du graphique ne fait perdre aucune conclusion, supprimez-le.
• Une comparaison avec des critères qualitatifs longs : utilisez un tableau comparatif car des catégories comme la politique de support ou l’adéquation de la mise en œuvre ne peuvent pas être encodées honnêtement comme une longueur de barre.

Où le placer

Placez le graphique après le paragraphe qui introduit la question, la population, la mesure et la période. Mettez le point clé directement avant ou après, puis expliquez les implications et les limites. Dans la recherche, chaque graphique se trouve à côté de son résultat. Dans une étude de cas, établissez la référence et l’intervention avant de montrer le changement.

Gardez le titre, le visuel, la légende, le point clé, l’alternative de données, la source et les notes dans une seule limite de figure. Les notes de bas de page peuvent suivre la figure, mais une publicité, un formulaire d’inscription ou une image sans rapport ne peuvent pas l’interrompre. La source doit être visible sans ouvrir l’alternative de données.

Ne le placez pas à côté d’un graphique tout aussi important, d’un tableau indépendant ou d’une bande statistique qui répète ses données, d’un tableau de prix, d’un carrousel ou d’un appel à l’action à forte emphase. Ces associations créent une concurrence ou des sources de vérité multiples. Séparez les affichages de données par des explications.

Anatomie

La capture d’écran légendée doit identifier ces zones :

1. Point clé : une phrase énonçant le motif sans l’image.
2. Titre de la figure : une description neutre de la mesure, de la population et de la période.
3. Tracé : la zone où la position, la longueur ou la direction encode les valeurs.
4. Axes et échelles : étiquettes visibles, unités, graduations, intervalles et ligne de base.
5. Étiquettes de séries : étiquettes directes si possible ; sinon une légende qui n’est pas uniquement colorée.
6. Annotation : une note facultative liée à un point de données, jamais un substitut de méthodologie.
7. Alternative de données : un tableau ou un texte ordonné contenant les valeurs tracées.
8. Légende et source : périmètre, provenance, période de rapport et toute note de calcul.

Exemples de conception

Chaque variante utilise des marques bidimensionnelles, des unités visibles, un point clé, des données sources et une alternative accessible. Il n’existe pas de variante 3D, pictogramme, jauge ou double axe car la décoration et les échelles concurrentes faussent la comparaison.

Graphique linéaire : à utiliser pour des valeurs mesurées à intervalles ordonnés cohérents, généralement temporels. Les observations manquantes doivent apparaître comme des lacunes plutôt que comme des connexions inventées. Plus de quatre séries nécessite normalement de diviser le graphique ou de choisir un tableau.

Diagramme à barres : à utiliser pour la comparaison ou le classement entre catégories discrètes. Commencez l’axe quantitatif à zéro car la longueur des barres représente l’ampleur. Préférez les barres horizontales lorsque les étiquettes sont longues, et triez par valeur à moins qu’un ordre naturel ait un sens.

Nuage de points : à utiliser pour la relation entre deux variables quantitatives. Montrez les observations individuelles, nommez les deux mesures, divulguez toute ligne de tendance ajustée et évitez le langage causal à moins que la conception de la recherche ne le soutienne.

Diagramme à barres empilées : à utiliser lorsque le total et la composition importent tous deux sur un petit nombre de groupes. Maintenez l’ordre des segments stable et limitez la pile à quatre catégories. Si les lecteurs ont surtout besoin de comparer chaque composant, utilisez plutôt des barres groupées ou des petits multiples.

Paramètres

« Source » ci-dessous désigne l’emplacement créé à partir duquel le moteur de rendu obtient le champ, et non le fournisseur de preuves cité par le graphique.

show-data=false est autorisé uniquement lorsqu’un tableau de données équivalent ou une alternative textuelle complète valeur par valeur est déjà associé par programmation à la figure. Ce n’est jamais une licence pour publier un graphique uniquement visuel.

Syntaxe et exemples de code

Les trois notations préservent le même titre, point clé, ensemble de données, échelle, source, période et texte alternatif. Les figures sont illustratives.

Directive Markdown portable

:::chart-block{type=bar y-label="Demandes" y-min=0 source="Ensemble de données éditorial illustratif" period="T1–T4 2026" alt="Les demandes diminuent à chaque trimestre, passant de 120 au T1 à 72 au T4."}
## Demandes de support illustratives par trimestre

Point clé : Les demandes diminuent chaque trimestre, passant de 120 au T1 à 72 au T4.

| Trimestre | Demandes |
|---|---:|
| T1 | 120 |
| T2 | 108 |
| T3 | 84 |
| T4 | 72 |
:::

Le premier titre correspond à title ; le point clé et le tableau de données canonique correspondent aux champs du corps.

Shortcode Hugo

L’adaptateur Hugo utilise des paramètres nommés et dérive le visuel et le tableau d’un seul ensemble de données du corps. Cette notation spécifie le mappage prévu.

{{< chart-block type="bar" yLabel="Demandes" yMin="0" source="Ensemble de données éditorial illustratif" period="T1–T4 2026" alt="Les demandes diminuent à chaque trimestre, passant de 120 au T1 à 72 au T4." >}}
## Demandes de support illustratives par trimestre

Point clé : Les demandes diminuent chaque trimestre, passant de 120 au T1 à 72 au T4.

| Trimestre | Demandes |
|---|---:|
| T1 | 120 |
| T2 | 108 |
| T3 | 84 |
| T4 | 72 |
{{< /chart-block >}}

Bloc WordPress

<!-- wp:amicited/chart-block {"type":"bar","title":"Demandes de support illustratives par trimestre","yLabel":"Demandes","yMin":0,"source":"Ensemble de données éditorial illustratif","period":"T1–T4 2026","alt":"Les demandes diminuent à chaque trimestre, passant de 120 au T1 à 72 au T4.","takeaway":"Les demandes diminuent chaque trimestre, passant de 120 au T1 à 72 au T4."} -->
<table><thead><tr><th>Trimestre</th><th>Demandes</th></tr></thead><tbody><tr><th>T1</th><td>120</td></tr><tr><th>T2</th><td>108</td></tr><tr><th>T3</th><td>84</td></tr><tr><th>T4</th><td>72</td></tr></tbody></table>
<!-- /wp:amicited/chart-block -->

Le bloc peut générer du SVG ou du canvas, mais la sortie enregistrée et rendue côté serveur doit conserver le point clé et le tableau. JavaScript peut améliorer l’interaction, jamais fournir les seules étiquettes ou valeurs.

Exemples

Bon : le visuel et le texte racontent la même histoire délimitée

Point clé : Dans l’ensemble de données illustratif, le temps de résolution médian passe de 18 heures en janvier à 12 heures en avril ; le graphique n’établit pas pourquoi.

Le graphique linéaire utilise des intervalles mensuels réguliers et un axe « Heures » étiqueté de 10 à 20. Cette échelle linéaire non nulle divulguée est appropriée car la position, et non la longueur des barres, encode les valeurs. Le tableau expose chaque point, et le texte n’attribue pas la baisse à une intervention.

Mauvais : le graphique fabrique l’urgence

Un diagramme à barres intitulé « Le temps de résolution s’effondre après le lancement » montre les mêmes valeurs de 18, 17, 14 et 12 heures sur un axe qui commence à 11,5. Les barres semblent rétrécir presque jusqu’à disparaître. Janvier est étiqueté « avant », avril « après », les mois intermédiaires sont cachés derrière un survol, et ni la date de l’intervention ni une source ne sont montrées. La couleur rouge-vert fournit la seule signification de performance.

Cela échoue car les barres nécessitent une ligne de base zéro, le titre affirme la causalité, et les étiquettes sélectives empêchent la vérification. Les valeurs uniquement au survol excluent les contextes clavier, tactile, d’extraction et de technologie d’assistance. Corrigez-le avec une ligne de base zéro ou une ligne clairement graduée, chaque observation, la source, la période, un tableau de données et un point clé non causal.

Balisage Schema et accessibilité

Schema.org n’a pas de type général Chart ou Graph. Un graphique reste une preuve au sein d’une entité éligible au niveau de la page telle que Article, Report ou Dataset. La recherche peut décrire un ensemble de données réel téléchargeable avec des propriétés telles que la couverture temporelle, les variables, le créateur et la distribution. N’inventez jamais un ensemble de données, une évaluation, une tendance ou une propriété de résultat parce qu’un graphique existe.

L’accessibilité nécessite plus qu’un texte alternatif. Donnez à la figure un titre et une légende, et au SVG un nom et une description accessibles. Le canvas a besoin d’une représentation DOM équivalente. Fournissez les valeurs tracées dans un tableau avec de véritables en-têtes, et conservez le point clé en dehors du graphique afin qu’il survive à l’impression, à l’extraction et à l’échec de l’image.

N’utilisez pas la couleur comme seul identifiant de série ; ajoutez des étiquettes directes, des motifs de ligne, des formes de points ou du texte. Les infobulles doivent être accessibles au clavier, dismissibles et supplémentaires. À 200 % de zoom et sur des largeurs étroites, réorganisez ou faites défiler une zone de graphique étiquetée sans créer de défilement au niveau de la page.

Respectez les préférences de mouvement réduit et évitez les dessins animés ou les transitions automatiques. Si des filtres modifient les données, annoncez l’état et montrez les filtres actifs en texte. Un graphique statique n’est pas une cible clavier à moins qu’il n’ait de véritables contrôles.

Règles d’écriture

Ces règles maintiennent l’autorité visuelle du graphique proportionnelle à ses preuves :

• Rédigez un point clé de 15 à 35 mots. Nommez la direction ou la relation, les points limites pertinents, la population et la période lorsqu’ils évitent l’ambiguïté.
• Utilisez 2 à 20 points par série et pas plus de quatre séries. Divisez un travail plus dense en petits multiples, un tableau ou un ensemble de données téléchargeable.
• Limitez les titres à 5–16 mots et les étiquettes à 1–6 mots. Les titres décrivent ; les points clés concluent.
• Utilisez la même unité et la même définition de mesure dans toute une série. Si une méthode change, interrompez la ligne et expliquez la discontinuité.
• Commencez les axes quantitatifs des barres et des barres empilées à zéro. Une échelle linéaire ou de nuage de points peut être plus étroite uniquement lorsque les limites et les unités restent visibles et que le choix n’exagère pas le bruit.
• Utilisez un espacement visuel égal pour des intervalles numériques ou temporels égaux. N’espacez pas février et décembre comme s’ils étaient des mois adjacents lorsque des périodes intermédiaires sont manquantes.
• Montrez les valeurs manquantes comme manquantes. Ne les convertissez jamais en zéro, ne les connectez pas silencieusement et n’interpolez pas sans une méthode déclarée.
• Étiquetez directement les projections, estimations, valeurs modélisées et valeurs ajustées saisonnièrement. Ne les stylisez pas comme des données observées.
• Évitez les doubles axes, les effets 3D, la perspective, le redimensionnement pictural des surfaces, les axes brisés, les palettes arc-en-ciel et les courbes lissées qui impliquent des valeurs non mesurées.
• Indiquez la source, la période de couverture, l’échantillon ou la cohorte le cas échéant, et toute transformation telle que l’indexation, la normalisation ou la moyenne mobile.
• Ne placez jamais un appel à l’action, un témoignage, un badge promotionnel, une affirmation causale non étayée ou une mise en garde essentielle uniquement à l’intérieur de l’image.
• Dérivez le graphique et son tableau d’un seul ensemble de données canonique. Si les valeurs changent, mettez à jour une fois et régénérez les deux sorties.

La méthodologie détaillée et les citations peuvent continuer dans un bloc de sources à proximité, mais le graphique a toujours besoin d’une source et d’une période visibles qui lui sont propres.

Types d’articles qui l’utilisent

Le champ postTypes du front matter définit les relations approuvées ci-dessous. L’inclusion permet un graphique lorsqu’un motif quantitatif réel existe ; elle n’oblige pas les auteurs à fabriquer un graphique pour chaque page.

Liste de contrôle QA

• La tâche principale du lecteur est de voir un motif ; une recherche exacte seule serait mieux servie par un tableau.
• Le point clé est une phrase complète en texte HTML, concorde avec les données tracées et reste dans les limites des preuves.
• Le titre nomme la mesure, la population et la période nécessaires à la compréhension de la figure.
• Le type de graphique correspond à la tâche analytique : séquence, comparaison de catégories, distribution ou relation.
• Les lignes de base des barres commencent à zéro ; toute autre échelle est visible, justifiée et non trompeuse.
• Les intervalles, unités, dénominateurs, calculs et valeurs manquantes sont représentés honnêtement.
• Les séries sont directement étiquetées ou distinguables sans recours exclusif à la couleur.
• Chaque valeur essentielle est disponible sans survol, JavaScript, animation ou interprétation d’image.
• Un tableau de données ou une alternative textuelle complète utilise de véritables en-têtes et correspond exactement au visuel.
• La source, la période de couverture, la cohorte ou l’échantillon, et les transformations sont visibles à côté du graphique.
• Le graphique et l’alternative accessible dérivent d’un seul ensemble de données canonique.
• Le bloc ne se trouve pas à côté d’un affichage de données en double, d’un module de conversion ou d’un visuel concurrent à forte emphase.
• Le graphique fonctionne avec une saisie clavier, des réglages de contraste élevé, un zoom à 200 %, des écrans étroits et un mouvement réduit.
• Aucun effet 3D, double axe, axe brisé, mise à l’échelle picturale, affirmation causale non étayée ou série décorative ne subsiste.
• Toute donnée structurée au niveau de la page est éligible et cohérente avec les preuves visibles.
• Le type d’article sélectionné inclut le bloc de graphique dans son contrat de contenu.

FAQ

Quand dois-je utiliser un graphique plutôt qu’un tableau ?

Utilisez un graphique lorsque la première tâche est de voir une tendance, une distribution, un classement ou une relation. Utilisez un tableau lorsque les lecteurs ont besoin d’une recherche précise sur plusieurs champs. Lorsque les deux tâches comptent, conservez un tableau compact à l’intérieur du bloc de graphique comme alternative de données accessible.

Un diagramme à barres doit-il commencer à zéro ?

Oui. La longueur des barres représente l’ampleur à partir d’une ligne de base, donc tronquer cette ligne de base modifie le rapport apparent. Un graphique linéaire peut utiliser une échelle non nulle lorsque la plage visible et les unités sont explicites et que la vue plus étroite est analytiquement nécessaire.

Le texte alternatif est-il suffisant pour rendre un graphique accessible ?

Généralement non. Le texte alternatif doit identifier l’affichage et résumer son motif principal. Un graphique à valeurs multiples a également besoin d’un tableau de données à proximité ou d’un texte équivalent contenant les étiquettes, les valeurs, les unités, la source et la période.

Le point clé peut-il apparaître uniquement dans le titre du graphique ?

Non. Un titre identifie ce que la figure montre ; un point clé énonce ce que le lecteur doit remarquer. Conservez le point clé comme une phrase complète en dehors du graphique afin qu’il reste disponible lorsque l’image n’est pas perçue ou extraite.

Un bloc de graphique crée-t-il un balisage Schema.org ?

Non. Utilisez un balisage valide au niveau de la page tel que Article, Report ou Dataset uniquement lorsque la page se qualifie indépendamment. Le graphique ne crée pas un nouveau droit schema ni ne justifie des revendications structurées absentes des preuves visibles.