Companion d'accessibilité unifie pour les visualisations. Offre trois alternatives activables independamment : tableau de données, téléchargement CSV et description textuelle. Le contenu est replie dans un accordeon DSFR par défaut.

Attributs

Si ni table, ni download, ni description ne sont définis, les trois sont actives par défaut.

Source en panne

Quand la source échoue, le tableau est retiré et le téléchargement désactivé : les lignes du dernier chargement ne sont ni montrées ni exportées. La section dit « Données momentanément indisponibles. Le tableau et le téléchargement reviendront avec les données. » (ou la phrase de la cause ; error-message de la source la remplace). Le bouton reste atteignable au clavier, aria-disabled, et désigne cette phrase comme sa raison (aria-describedby) ; la description liée au graphique devient « Données du graphique momentanément indisponibles. » Tout revient au chargement réussi. Voir Quand la source est en panne.

Quand la source porte stale-if-error, le tableau reste pendant une panne passagère : sa légende devient visible — « Données du graphique — « Non actualisé » chiffres relevés aujourd'hui à 14 h 32 » — et la description liée au graphique se termine par « Chiffres relevés aujourd'hui à 14 h 32, non actualisés. » Le téléchargement reste possible : le bouton dit « Télécharger en CSV (chiffres relevés à 14 h 32) » et le fichier s'appelle données_relevé-2026-10-13-14h32.csv (la date du relevé avant l'extension de filename). Son contenu reste brut. Voir Le dernier relevé, sur demande.

En attente d'un filtre

Sur une page d'exploration, l'amont peut refuser de charger tant qu'aucun filtre n'est posé (require-where sur <dsfr-data-source> ou <dsfr-data-query>). Le complément accessible annonce alors idle-message à la place de « aucune donnée disponible » : rien n'a été chargé, rien n'a échoué, et c'est cette nuance qu'un lecteur d'écran doit entendre. Le tableau et le bouton de téléchargement restent masqués tant que la source attend. Le mécanisme est décrit sur dsfr-data-source.

Le groupe non renseigné

Quand <dsfr-data-chart> porte empty-label, la barre du groupe vide (null, undefined ou chaîne vide) est nommée sur l'axe et dans la légende. Poser le même empty-label ici nomme la ligne correspondante du tableau équivalent, qui sinon a une cellule de libellé vide : le tableau dirait autre chose que le graphique qu'il double. Seule la colonne de libellé est concernée — label-field s'il est posé, sinon la première colonne rendue ; une mesure absente reste une cellule vide. Le CSV téléchargé porte le même libellé. Sans cet attribut, le rendu est celui d'avant : la valeur n'est pas reprise du graphique visé par for.

Un graphique multi-séries

En-têtes lisibles. label-field et value-field acceptent l'alias inline champ:Libellé, la grammaire de value-field et value-fields de dsfr-data-chart : la colonne lue est champ, le libellé va en en-tête du tableau et du CSV téléchargé. Les champs du graphique se recopient donc tels quels — value-field="v_fede:Fédération sélectionnée, v_all:Ensemble des fédérations" — et le tableau équivalent dit « Fédération sélectionnée » là où le graphique le dit. Sans deux-points, l'en-tête reste le nom de la colonne. Une colonne nommée qui n'existe dans aucune ligne reçue est signalée en console (« colonne … introuvable », avec les colonnes disponibles) : sa colonne du tableau serait vide alors que le tableau a le bon nombre de lignes. Les colonnes se lisent par chemin pointé, comme sur le graphique : sur des lignes imbriquées, value-field="fields.total" se recopie tel quel.

Un jeu au format long — celui que produit dsfr-data-concat avec origin-field, et que <dsfr-data-chart series-field> consomme déjà — a une ligne par couple (libellé, série). Rendu tel quel, le tableau équivalent répète chaque libellé sans jamais dire de quelle série vient la valeur. Poser ici le même series-field pivote le tableau : une ligne par libellé, une colonne par série, la cellule de libellé en <th scope="row"> pour que chaque valeur garde ses deux coordonnées. Le CSV suit la même structure. L'attribut exige label-field et value-field : sans eux, le manque est signalé en console et le tableau reste à plat plutôt que pivoté de travers. Un couple absent des données laisse une cellule vide — le graphique y trace 0, le tableau ne l'affirme pas.

Fonctionnement ARIA

1. Le composant génère automatiquement un id s'il n'en a pas
2. Un skip link est injecte dans le graphique cible (visible au focus clavier)
3. aria-describedby pointe vers un resume concis dans le composant
4. aria-details pointe vers le tableau de données (si table est active), seulement quand le tableau est affiché : il est retiré pendant le premier chargement et pendant une panne, et gardé pendant un dernier relevé stale-if-error
5. A la deconnexion, tout est nettoye automatiquement

Exemples

<dsfr-data-chart id="mon-graph" source="data" type="bar"
  label-field="statut" value-field="total">
</dsfr-data-chart>
<dsfr-data-a11y for="mon-graph" source="data" table download></dsfr-data-a11y>

<dsfr-data-a11y for="mon-graph" source="data"
  table download
  description="Ce graphique montre la repartition des sites par statut.">
</dsfr-data-a11y>

<dsfr-data-chart id="mon-graph" source="data" type="bar"
  label-field="region" value-field="total"
  databox databox-title="Population par region"
  databox-download databox-screenshot>
</dsfr-data-chart>
<!-- Avec DataBox : pas de table ni download -->
<dsfr-data-a11y for="mon-graph" source="data"
  description="L'Ile-de-France concentre la majorite de la population.">
</dsfr-data-a11y>

<dsfr-data-a11y source="data"
  no-auto-aria table download>
</dsfr-data-a11y>