L’accessibilité, au cœur de la démarche du DSFR

L’inclusivité est au cœur de la démarche du Système de Design de l’État, conçu pour permettre à tous les français d’utiliser correctement les sites et applications mobiles de l’État. Le choix des couleurs en particulier, et les règles qui encadrent leur usage permettent d’atteindre un niveau de contraste conforme au RGAA.

Cette vidéo présente les enjeux d’accessibilité liés aux contrastes de couleur.

Mais même avec une conformité de 100% des critères du RGAA, certains utilisateurs peuvent encore se retrouver en difficulté. C’est le cas notamment des personnes utilisant un mode “contraste élevé” : à quoi cela correspond, et en quoi la version 1.12 du DSFR vient améliorer l’accessibilité pour cette catégorie d’utilisateurs ? Explications.

Qu'est-ce que le mode "contraste élevé" ?

Le mode "haut contraste" ou “contraste élevé” est un paramètre d'affichage d’un appareil ou d’un navigateur choisi par l’utilisateur. Ce paramètre modifie le rendu visuel de l'interface pour offrir un contraste plus élevé entre le texte et les arrière-plans.

Il est avant tout destiné aux personnes ayant des troubles de la vision, pouvant générer de la fatigue visuelle ou des difficultés à comprendre une interface. Ce mode peut également compenser l’incapacité à distinguer certaines couleurs (c’est le cas du daltonisme) en appliquant des schémas de couleurs spécifiques ou personnalisés par l’utilisateur.

La part de la population ayant recours au mode contrasté est loin d’être anecdotique : environ 4% des utilisateurs de windows activent ainsi ce mode. Il était donc essentiel d’en corriger le rendu, même si ce contexte d’affichage n’est pas encadré, aujourd’hui, par le RGAA.

Cette vidéo présente le mode “contraste élevé” des systèmes d’exploitation Windows.

Il existe deux approches de mode contrasté proposées par les systèmes d’exploitation et les navigateurs :

• La première est un système de couleurs limitées à un thème de contraste. Windows, notamment, propose un système de thèmes contrastés. Ces thèmes définissent des couleurs associées au fond, au texte, aux boutons, aux liens, aux éléments désactivés ou sélectionnés. Ce comportement s’applique alors automatiquement à toutes les applications et site web, et peut être ajusté en CSS via la media-query forced-colors: active.
• Le second système, utilisé notamment par MacOS, permet d’accentuer ou de diminuer le contraste tout en gardant le style défini par l’application ou le site Web. Ce comportement est interprété en CSS via les media-queries prefers-contrast: more et [prefers-contrast:](<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast>) less. Contrairement aux thèmes de contraste, sans modifications appliquées par ses media-queries aucun changement ne s’applique.

Le DSFR en mode “contraste élevé”

Des défauts d’affichage avant la version 1.12

Le DSFR étant respectueux des normes de niveau de contraste minimum prévues par le Web Content Accessibility Guideline (WCAG), le travail concernait surtout l’amélioration du rendu en mode forced-colors: active, dit thème contrasté.

Lorsqu'il est activé, ce mode modifie automatiquement plusieurs aspects de l'interface, notamment :

• Les couleurs de fond et de texte
• Les bords et contours des composants

Jusqu’à la version DSFR v1.12, le mode thème contrasté ne permettait pas d’améliorer l’expérience des personnes l’utilisant sur une interface conçue avec le DSFR, car nos composants n’étaient pas codés de façon bien interprétable par cette surcouche.

En particulier, les bordures de nos composants sont dessinées via les propriétés box-shadow ou background-image évitant ainsi l’ajout d’épaisseur causée par la propriété border. Or, ces propriétés sont supprimées automatiquement par le mode thème contrasté, ce qui fait disparaitre les délimitations de la plupart de nos composants.

Sur cette capture, on peut se rendre compte que les bordures autour de la navigation et des boutons disparaissent complètement :

Capture de l'accueil du site en affichage classique

Capture de l'accueil du site en mode contrasté avant la version 1.12

C’est encore plus parlant sur un formulaire :

Capture d'un exemple de formulaire en affichage classique

Capture d'un exemple de formulaire en mode contrasté avant la version 1.12

Les améliorations apportées par la version 1.12

Afin d’améliorer le rendu de nos composants, nous avons ajouté une media-query CSS dédiée à ce mode haut contraste pour préserver le rendu original de nos composants et pouvoir en adapter l’affichage sur mesure pour chacun.

Ce travail à nécessité une repasse composant par composant pour s’assurer que toutes les zones sont bien compréhensibles et que chaque élément d’interaction (lien ou bouton) hérite du style voulu.

Cette adaptation a été faite avec l’aide précieuse de Sélim Méziti, expert accessibilité et utilisateur du mode haut contraste.

Header complet avant la version 1.12

Header complet après la version 1.12

Exemple de formulaire avant la version 1.12

Exemple de formulaire après la version 1.12

Voir le résultat en conditions réelles

Pour visualiser la version 1.12 du DSFR en conditions réelles, vous pouvez activer le mode haut contraste sur PC en vous rendant dans le menu Windows, puis :

• Sur Windows 11 : Paramètres > thèmes Accessibilité > Contraste
• Sur Windows 10 : Paramètres > Options d’ergonomie > Contraste élevé

Sélectionnez le thème souhaité dans le menu déroulant Thèmes de contraste, puis sélectionnez le bouton Appliquer.

Il est également possible de créer un thème personnalisé ou de modifier un thème existant.

Si vous utilisez le navigateur Chrome, vous pouvez simuler le rendu du mode thème contrasté en activant l’émulateur dans la console de l’inspecteur du navigateur :

1. Clic droit sur la page → Inspecter
2. Dans l’onglet console, appuyer sur ctrl+shift+p (ou cmd+shift+p sur mac)
3. Choisir l’option Emulate CSS forced-color: active

Attention toutefois, cette émulation n’est pas parfaitement stable ou fidèle au vrai rendu.

Pour conclure

En améliorant progressivement le DSFR, nous cherchons à le rendre toujours plus inclusif pour que tous les français puissent interagir facilement avec les services de l’Etat en ligne. Si vous rencontrez des problèmes d’accessibilité avec le DSFR et que vous souhaitez nous en faire part, n’hésitez pas à nous contacter via notre formulaire pour que nous puissions les prendre en compte.

Sources :

https://learn.microsoft.com/fr-fr/windows/compatibility/high-contrast-mode

https://www.accessibility-developer-guide.com/setup/helper-tools/high-contrast-mode/

https://intopia.digital/articles/assistive-technology-survey-2021-preliminary-results/

https://webaim.org/projects/lowvisionsurvey/

https://www.smashingmagazine.com/2022/03/windows-high-contrast-colors-mode-css-custom-properties/

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast