Faire un service accessible avec le DSFR

• Utiliser correctement le DSFR permet de garantir une base saine en accessibilité.

• On peut créer ses propres composants, à condition de le faire avec soin !

• Le DSFR ne résout pas tout : attention à produire des contenus accessibles.

Ce contenu est aussi disponible sous la forme de webinaire 🖥️ Support de présentation

Le DSFR aide à une base saine

Nativement, les composants officiels du DSFR sont déjà accessibles. Concrètement, le DSFR aide à être conforme au RGAA :

• 40 % des critères sont nativement inclus dans le DSFR. Par exemple : le critère 11.1 « Chaque champ de formulaire a-t-il une étiquette ? »

• 30 % des critères sont documentés dans le DSFR. Par exemple : le Critère 11.2 « Chaque étiquette associée à un champ de formulaire est-elle pertinente ? »

• 30 % des critères sont « hors DSFR ». Par exemple : le Critère 11.3 « Dans chaque formulaire, chaque étiquette associée à un champ de formulaire ayant la même fonction et répété plusieurs fois dans une même page ou dans un ensemble de pages est-elle cohérente ? »

Créer ses propres composants

Si un composant n’existe pas, il est possible de créer ses propres composants, en respectant quelques bonnes pratiques :

Designer un composant accessible

Choisir les couleurs avec soin :

• Respecter les tokens de couleurs

• Ne pas communiquer des informations uniquement par la couleur

• Vérifier les contrastes

Coder un composant accessible

• Est-ce que ça ne serait pas déjà une balise HTML ? S’appuyer sur la référence HTML elements reference – MDN

• S’inspirer d’autres sources

  • Patterns du WAI (W3C)

  • Design System de GOV.UK

  • Inclusive Components

  • A Complete Guide To Accessible Front-End Component

• Est-ce que mon composant est utilisable au clavier ?

• Est-ce que l’état de mon composant est disponible à l’API d’accessibilité ?

• Est-ce que je peux utiliser mon composant avec un lecteur d’écran ?

Produire des contenus accessibles

La majorité des critères qui relèvent du design ou du code sont pris en compte dans le DSFR. Mais reste globalement tous les critères liés aux contenus. Par exemple :

• Soigner les titres des pages (Chaque titre est pertinent, unique et bref).

• Soigner la hiérarchie des titres (Le plan est pertinent, logique, et à l’image du design).

• La navigation est possible de plusieurs manière (menu, moteur de recherche, plan du site)

• etc etc.

👉 La Notice d’accessibilité éditoriale vous guidera sur toutes les bonnes pratiques en terme de contenu