dsfr-data-a11y - Composants

Companion d'accessibilite unifie pour les visualisations. Offre trois alternatives activables independamment : tableau de donnees, telechargement CSV et description textuelle. Le contenu est replie dans un accordeon DSFR par defaut.

Accessibilite

Les graphiques (canvas, SVG) sont difficilement accessibles aux lecteurs d'ecran. dsfr-data-a11y offre trois alternatives complementaires : un tableau HTML, un telechargement 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 donnees
`download`	Boolean	Active le bouton de telechargement CSV
`filename`	String	Nom du fichier CSV (defaut : `donnees.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 definis, les trois sont actives par defaut.

Fonctionnement ARIA

Le composant genere 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 donnees (si table est active)
A la deconnexion, tout est nettoye automatiquement

Exemples

1. Tableau + telechargement 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>