DSFR et accessibilité : le Design System de l'État garantit-il la conformité ?

Le Système de Design de l'État (DSFR) est devenu la norme pour les sites publics français. Développé par le Service d'Information du Gouvernement (SIG) et la Direction Interministérielle du Numérique (DINUM), il fournit une bibliothèque de composants prêts à l'emploi : boutons, formulaires, navigation, en-têtes, pieds de page. Ces composants intègrent nativement des bonnes pratiques d'accessibilité. Mais utiliser le DSFR suffit-il pour être conforme au RGAA 4.1 ? La réponse courte : non. Et voici pourquoi.

Qu'est-ce que le DSFR ?

Le DSFR (Design System de l'État français) est un ensemble de composants, de styles et de règles de conception destiné à uniformiser l'apparence et le fonctionnement des sites et applications de l'État. Il est open-source, disponible sur GitHub, et utilisé par des centaines de sites publics : services déconcentrés, opérateurs, collectivités, établissements publics.

Le DSFR couvre les éléments d'interface les plus courants :

• Navigation : en-tête, menu principal, fil d'Ariane, pagination
• Formulaires : champs texte, sélecteurs, cases à cocher, boutons radio, messages d'erreur
• Contenus : cartes, accordéons, onglets, modales, alertes
• Mise en page : grille, espacements, typographie, couleurs

Chaque composant est conçu avec des considérations d'accessibilité : rôles ARIA, gestion du focus clavier, contrastes conformes, labels associés aux champs. Le DSFR respecte les principes du WCAG 2.1 niveau AA et, par extension, du RGAA 4.1 pour les composants qu'il couvre.

Ce que le DSFR couvre en matière d'accessibilité

Le DSFR prend en charge une partie significative des exigences techniques d'accessibilité, au niveau des composants d'interface :

Structure et sémantique HTML

Les composants DSFR utilisent les balises HTML sémantiques appropriées : <nav>, <main>, <header>, <footer>, <button>, <fieldset>, <legend>. La structure de base d'une page DSFR est donc sémantiquement correcte.

Navigation au clavier

Les composants interactifs (menus, accordéons, onglets, modales) gèrent le focus clavier conformément aux design patterns ARIA du W3C. Un utilisateur naviguant au clavier peut ouvrir un menu, parcourir les onglets ou fermer une modale avec les touches attendues (Tab, Entrée, Échap, flèches).

Contrastes et typographie

Le système de couleurs du DSFR est conçu pour respecter les ratios de contraste minimaux du RGAA (4.5:1 pour le texte courant, 3:1 pour les grands textes). La typographie par défaut (Marianne) est lisible et ses tailles respectent les critères de lisibilité.

Formulaires

Les composants de formulaire incluent des labels associés via l'attribut for, des messages d'erreur liés aux champs via aria-describedby, et des regroupements logiques via <fieldset> et <legend>.

Ce que le DSFR ne couvre pas

Le DSFR fournit des briques d'interface. Mais un site web, c'est bien plus que des composants. Voici les domaines où le DSFR ne peut rien garantir — et où la conformité RGAA dépend entièrement de toi.

Le contenu rédactionnel

Le DSFR ne rédige pas tes textes. Il ne vérifie pas que tes titres respectent une hiérarchie logique (H1, H2, H3 sans saut de niveau). Il ne s'assure pas que tes liens sont explicites (« En savoir plus » sans contexte est non conforme, même dans un composant DSFR). Il ne contrôle pas la clarté de tes messages d'erreur.

Les alternatives textuelles des images

Si tu insères une image dans un composant DSFR (une carte, un article, un en-tête), c'est à toi de fournir l'attribut alt pertinent. Le DSFR ne peut pas deviner le contenu de tes images. Une image informative sans alt est une non-conformité, quel que soit le framework utilisé.

Les documents téléchargeables

Les PDF, documents Word et tableurs mis à disposition sur un site DSFR doivent eux-mêmes être accessibles. Un PDF non balisé, sans structure de titres, sans texte alternatif pour les images, sans ordre de lecture défini, est non conforme. Le DSFR ne rend pas tes documents accessibles — il ne concerne que l'interface web.

Les contenus multimédias

Les vidéos intégrées dans un site DSFR doivent comporter des sous-titres synchronisés et, si nécessaire, une audiodescription et une transcription textuelle. Le composant vidéo du DSFR fournit le conteneur, mais le contenu accessible (sous-titres, transcription) dépend de toi.

Les contrastes personnalisés

Si tu personnalises les couleurs du DSFR (ce qui est courant pour les sites d'opérateurs ou de collectivités qui ajoutent leur identité visuelle), les ratios de contraste ne sont plus garantis. Un texte gris clair sur fond blanc ne devient pas accessible parce qu'il est dans un composant DSFR.

L'intégration de composants tiers

Beaucoup de sites DSFR intègrent des éléments qui ne font pas partie du design system : cartes interactives, widgets de prise de rendez-vous, chatbots, formulaires tiers, outils de recherche avancée. Ces composants échappent au périmètre du DSFR et doivent être audités séparément.

Les erreurs les plus fréquentes sur les sites DSFR

Après analyse de sites publics basés sur le DSFR, les mêmes non-conformités reviennent régulièrement :

1. Images sans alternative textuelle

C'est la non-conformité la plus fréquente, y compris sur les sites DSFR. Les images d'illustration dans les cartes, les bannières et les articles sont souvent dépourvues d'attribut alt ou dotées d'un alt générique (« image », « photo », « illustration ») qui ne décrit pas le contenu.

2. PDF non accessibles

De nombreux sites publics publient des documents PDF : rapports, formulaires, délibérations, notes d'information. La grande majorité de ces PDF ne sont pas balisés pour l'accessibilité. Ils sont illisibles pour les lecteurs d'écran.

3. Vidéos sans sous-titres

Les contenus vidéo (présentations, conférences, tutoriels) sont rarement accompagnés de sous-titres synchronisés. Or c'est une exigence du RGAA pour tout média temporel pré-enregistré contenant de l'information sonore.

4. Hiérarchie de titres incohérente

Le DSFR structure correctement les composants, mais la hiérarchie globale des titres dépend de l'intégrateur. On trouve fréquemment des sauts de niveau (H1 suivi directement d'un H3), des pages sans H1, ou plusieurs H1 sur la même page.

5. Liens non explicites

Les intitulés de liens comme « Cliquez ici », « En savoir plus » ou « Lire la suite » sont non conformes au critère 6.1 du RGAA s'ils ne sont pas complétés par un contexte accessible (via aria-label ou le contexte du paragraphe). Le DSFR fournit le composant lien, mais pas l'intitulé.

6. Langue des contenus non déclarée

Quand un passage de texte est dans une langue différente de la langue principale de la page (un terme anglais, une citation en italien), l'attribut lang doit être ajouté sur l'élément concerné. Le DSFR gère la langue globale de la page, mais pas les changements de langue dans le contenu.

Comment tester un site basé sur le DSFR

Étape 1 : lancer un scan automatisé

Un scan automatisé détecte rapidement les non-conformités les plus courantes : contrastes, alternatives textuelles manquantes, labels absents, structure de titres. C'est le premier filtre pour identifier les problèmes qui échappent au DSFR. L'outil WebConforme est particulièrement adapté car il mappe directement les résultats sur les critères du RGAA, ce qui est le référentiel de conformité pour les sites publics français.

Pour découvrir les autres outils disponibles, consulte notre comparatif des outils de test d'accessibilité gratuits.

Étape 2 : vérifier le contenu manuellement

Parcours les pages principales du site en vérifiant : les alternatives textuelles des images, la hiérarchie des titres, les intitulés des liens, les messages d'erreur des formulaires, la présence de sous-titres sur les vidéos, l'accessibilité des documents PDF.

Étape 3 : tester au clavier et avec un lecteur d'écran

Navigue sur l'ensemble du site en utilisant uniquement le clavier (Tab, Entrée, Échap, flèches). Vérifie que le focus est toujours visible, qu'aucun piège clavier n'existe, et que tous les éléments interactifs sont atteignables. Complète avec un test au lecteur d'écran (NVDA ou VoiceOver) sur les parcours critiques.

Étape 4 : auditer les composants hors DSFR

Identifie tous les éléments du site qui ne proviennent pas du DSFR (widgets tiers, intégrations, composants custom) et teste-les séparément. Ce sont souvent les maillons faibles en matière d'accessibilité.

La déclaration d'accessibilité reste obligatoire

Que ton site utilise le DSFR ou non, la déclaration d'accessibilité est une obligation légale pour tous les sites publics et pour les entreprises concernées par l'EAA. Cette déclaration doit mentionner le niveau de conformité atteint, les non-conformités identifiées, les mesures correctives prévues et un moyen de contact. Utiliser le DSFR ne dispense pas de cette obligation.

Conclusion

Le DSFR est un excellent point de départ. Il prend en charge une part significative des exigences techniques d'accessibilité au niveau des composants d'interface. Mais il ne couvre ni le contenu, ni les documents, ni les médias, ni les composants tiers. Un site construit avec le DSFR peut tout à fait être non conforme au RGAA si le contenu et l'intégration n'ont pas été traités avec la même rigueur que les composants.

Même avec le DSFR, un audit reste indispensable. Testez votre site sur webconforme.fr.