Accessibilité

Le bundle rend les classes DSFR et une partie des relations ARIA attendues, mais l’accessibilité finale dépend du contenu, des libellés, de la structure de page et des états métier fournis par l’application.

Responsabilité projet

Un composant correct ne suffit pas à garantir la conformité RGAA. Les contenus, alternatives, titres, parcours clavier et messages d'erreur doivent être validés sur les écrans réels.

Checklist par famille

Famille	À vérifier
Navigation	ariaLabel, page active, ordre clavier, aria-controls vers un id présent
Formulaires	label, legend, aide, erreurs, valeurs conservées après validation
Contenu	hiérarchie de titres, alternatives d’image, ordre de lecture
Feedback	message compréhensible sans couleur seule, rôle d’alerte seulement si nécessaire
Surcouches	nom accessible, focus géré par le DSFR, bouton d’ouverture lié à la modale
Tableaux	caption, en-têtes, nombre de cellules cohérent

Règles pratiques

• Une modale doit avoir un nom accessible : utilisez title ou dsfr:modal:title avec modalId.
• Un tableau de données doit avoir un caption, même si vous choisissez de le masquer visuellement.
• Un bouton icône seule doit avoir un libellé accessible.
• Les images décoratives ont alt=""; les images informatives décrivent l’information utile.
• Les messages d’erreur de formulaire doivent expliquer la correction attendue.
• Les menus, accordéons, onglets et modales doivent utiliser des identifiants stables et uniques.

Exemple modale accessible

<twig:dsfr:button label="Ouvrir la confirmation" aria-controls="confirm-modal" />

<twig:dsfr:modal id="confirm-modal">
  <twig:dsfr:modal:content>
    <twig:dsfr:modal:title modalId="confirm-modal">Confirmer l'action</twig:dsfr:modal:title>
    <p>Cette action peut être annulée depuis l'historique.</p>
  </twig:dsfr:modal:content>
  <twig:dsfr:modal:footer>
    <twig:dsfr:button label="Confirmer" />
    <twig:dsfr:button label="Annuler" variant="secondary" />
  </twig:dsfr:modal:footer>
</twig:dsfr:modal>

Debug

Signal	Action
Le profiler signale un nom accessible manquant	Ajoutez title, label, caption, legend, ariaLabel ou aria-labelledby
Le DSFR signale aria-controls invalide	Vérifiez que la cible existe et que son id est unique
La navigation clavier est bloquée	Vérifiez les composants ouverts, les modales et les panneaux masqués
Le rendu est correct visuellement mais annoncé de travers	Inspectez le nom accessible et l’ordre du DOM