dsfr-data-a11y - Composants

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.

Accessibilité

Les graphiques (canvas, SVG) sont difficilement accessibles aux lecteurs d'écran. dsfr-data-a11y offre trois alternatives complementaires : un tableau HTML, un téléchargement CSV et une description textuelle. Via l'attribut for, il injecte un skip link dans le graphique, pose aria-describedby et aria-details pour creer un lien semantique complet.

Attributs

Attribut	Type	Description
`source`	String	ID du `<dsfr-data-source>` ou `<dsfr-data-query>` (requis)
`for`	String	ID de l'element cible pour skip link + ARIA automatique
`table`	Boolean	Active l'affichage du tableau de données
`download`	Boolean	Active le bouton de téléchargement CSV
`filename`	String	Nom du fichier CSV (défaut : `données.csv`)
`description`	String	Description textuelle du graphique
`label-field`	String	Colonne pour les labels du tableau (optionnel)
`value-field`	String	Colonne(s) pour les valeurs (separees par virgules, optionnel)
`label`	String	Libelle personnalise de la section accessible
`no-auto-aria`	Boolean	Desactive ARIA automatique et skip link

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

Fonctionnement ARIA

Le composant génère automatiquement un id s'il n'en a pas
Un skip link est injecte dans le graphique cible (visible au focus clavier)
aria-describedby pointe vers un resume concis dans le composant
aria-details pointe vers le tableau de données (si table est active)
A la deconnexion, tout est nettoye automatiquement

Exemples

1. Tableau + téléchargement CSV

<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>

2. Avec description textuelle

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

3. Cohabitation avec DataBox

Quand le graphique cible utilise l'attribut databox, ne PAS ajouter table ni download sur dsfr-data-a11y (DataBox les fournit deja avec un meilleur rendu : switch chart/tableau integre, CSV natif). Conserver uniquement description :

<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>

4. Mode manuel (no-auto-aria)

Si vous gerez manuellement les attributs ARIA :

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