AccessConfig, un sélecteur de styles open source pour rendre votre site plus accessible

Pour célébrer le GAAD 2019, toute l’équipe d’Access42 est heureuse de vous annoncer la publication d’AccessConfig, un outil d’accessibilité sur lequel nous travaillons depuis plusieurs mois !

AccessConfig est un sélecteur de styles léger, open source et gratuit, qui permet de pallier quelques problèmes d’accessibilité courants rencontrés sur le web par certaines personnes en situation de handicap.

Une fois installé sur une interface web, AccessConfig ajoute un bouton « Paramètres d’accessibilité » à l’endroit souhaité (de préférence dans l’en-tête du site).

Lorsque l’utilisateur active ce bouton, une fenêtre modale proposant plusieurs réglages d’accessibilité s’affiche :

AccessConfig est entièrement accessible aux lecteurs d’écran et au clavier.

Plusieurs réglages d’accessibilité

AccessConfig offre aux utilisateurs plusieurs paramètres d’accessibilité :

• renforcement et inversement des contrastes ;
• augmentation de l’interlignage ;
• annulation de la justification des textes ;
• remplacement des polices de caractères du site par une police adaptée à la dyslexie ;
• remplacement des images textes par leur alternative textuelle.

Il est possible d’activer ou de désactiver la ou les options qui vous semblent les plus pertinentes pour chaque projet, au cas par cas.

À quels utilisateurs AccessConfig va-t-il bénéficier ?

Les réglages proposés par AccessConfig vont bénéficier en priorité :

• aux personnes déficientes visuelles : renforcer ou inverser les contrastes, remplacer les images textes par du texte HTML personnalisable et agrandissable ;
• aux personnes DYS que la justification des textes peut gêner à cause des espaces variables entre les mots qu’elle crée ;
• aux personnes dyslexiques ayant pris l’habitude de lire avec une police adaptée à la dyslexie ;
• aux personnes dyspraxiques qui rencontrent des difficultés à lire des textes dont l’interlignage est insuffisant, notamment.

Découvrez les impacts utilisateurs plus en détail sur la page de présentation d’AccessConfig.

À noter : un dispositif comme AccessConfig ne se substitue pas aux réglages d’accessibilité du navigateur ou du système d’exploitation de l’utilisateur, mais vient les compléter ou les remplacer s’ils s’avèrent inefficaces.

Conformité RGAA 3 et WCAG 2.0

WCAG propose une technique générique qui suggère d’utiliser un style switcher pour obtenir une version alternative conforme : C29: Using a style switcher to provide a conforming alternate version.

Cette technique est utilisable chaque fois qu’une transformation peut être effectuée sur les contenus eux-mêmes pour les adapter aux conditions de consultation d’un utilisateur.

Naturellement, CSS est particulièrement adapté à ces transformations et c’est la raison pour laquelle la gestion des contrastes et l’adaptation des contenus sont les problématiques principales qui peuvent en bénéficier.

Rappelons qu’il s’agit d’une technique WCAG officielle et reconnue même si, entendons-nous bien : aucun sélecteur de styles (ni aucun autre outil) ne rendra votre site accessible en un clic comme par magie.

Adopter AccessConfig peut également constituer une première étape avant la mise en route d’une démarche de mise en accessibilité globale. C’est un quick win qui offre des gains utilisateurs importants grâce à une mise en œuvre a priori rapide.

Renforcement ou inversion des contrastes

AccessConfig permet tout d’abord à l’utilisateur de renforcer ou d’inverser les contrastes du site sur lequel il est implémenté.

Cela peut permettre de satisfaire au critère 3.3 de niveau AA du RGAA 3 (Référentiel Général d’Accessibilité pour les Administrations). En effet, le critère 3.3 peut-être rendu conforme de deux manières différentes, au choix :

• soit proposer des contrastes suffisants par défaut ;
• soit proposer une fonctionnalité à l’utilisateur qui lui permet de modifier les couleurs du site afin d’obtenir des contrastes suffisants.

AccessConfig vous permet donc de répondre au critère 3.3 en utilisant cette seconde méthode. En effet, AccessConfig est une solution qui permet de prendre en charge les situations où il n’est pas possible d’afficher des contrastes suffisants de base.

Cela peut être le cas lorsque les contraintes de la charte graphique originale ne le permettent pas, ou bien lorsque de multiples contributeurs, qu’il n’est pas possible de former à l’accessibilité, vont publier des contenus susceptibles de contenir des contrastes insuffisants.

Un sélecteur de styles tel qu’AccessConfig permet alors d’offrir une solution immédiate d’accessibilité qui bénéficie à de nombreux d’utilisateurs déficients visuels.

Cependant, en matière de contrastes, il n’y a aucune généralité : un site respectant un niveau de contrastes suffisant pourra quand même être difficile à lire pour quelqu’un qui a une pathologie visuelle comme le syndrome de Meares-Irlen, par exemple. Pour les personnes concernées par ce syndrome, les lettres semblent « danser » à l’écran lorsque le contraste entre le texte et son arrière-plan est trop élevé.

C’est pourquoi notre roadmap prévoit notamment l’implémentation d’un sélecteur de couleurs (color picker), qui permettra à l’utilisateur de sélectionner directement les couleurs avec lesquelles il a l’habitude de lire.

Enfin, un sélecteur de styles constitue également une solution élégante pour concilier design graphique et accessibilité, si vous concevez une charte graphique pastel par exemple.

Adaptation des contenus pour les troubles DYS

Par ailleurs, même si cela n’est pas requis par la conformité AA de RGAA ou WCAG, beaucoup d’utilisateurs rencontrent des difficultés de lecture lorsque les contenus sont justifiés et/ou que l’interlignage est insuffisant.

Il s’agit des critères 10.9 (AAA) et 10.12 (AAA) pour RGAA 3, et 1.4.8 (AAA) pour WCAG.

Un dispositif tel qu’AccessConfig peut alors permettre à l’utilisateur d’annuler la justification des textes, et/ou d’augmenter leur interlignage.

Police optimisée pour les personnes dyslexiques

En complément, AccessConfig propose l’utilisation d’une police de caractères conçue pour faciliter la lecture de certains utilisateurs dyslexiques.

Ce n’est toutefois pas une obligation en termes de conformité, d’autant que de nombreux débats existent sur la pertinence d’utiliser ce type de polices, qui ne sont pas forcément utiles à toutes les personnes dyslexiques.

Remplacement des images-textes

Enfin, AccessConfig permet à l’utilisateur de remplacer les images-textes par leur alternative textuelle, sous forme de texte HTML. En effet, certains utilisateurs rencontrent des difficultés à lire les textes présentés sous forme d’image.

Il s’agit d’une problématique AA : critère 1.8 (AA) pour le RGAA 3, et 1.4.5 (AA) pour WCAG.

La recommandation est donc d’éviter d’utiliser des images-textes lorsqu’on peut reproduire les styles du texte avec CSS, ou alors de proposer un moyen, pour l’utilisateur, de remplacer les images-textes par leurs alternatives.

Comment installer AccessConfig sur votre site ?

Rendez-vous sur notre page dédiée : téléchargez l’archive et suivez les indications du fichier README ou la documentation présente sur la page dédiée directement.

L’installation d’AccessConfig sur votre site est gratuite (nous utilisons la licence MIT), et légère grâce à quelques lignes de code seulement.

AccessConfig est livré avec un thème par défaut, mais il est possible de le personnaliser (intitulés, préfixes des classes et des identifiants, styles…).

Conclusion

À l’instar d’AccessSlide, notre script de diaporama accessible, et d’AccessTooltip, notre script rendant les infobulles accessibles au clavier, AccessConfig est une nouvelle contribution open source d’Access42 en faveur de l’accessibilité numérique. Nous publions ces outils sans restriction d’usage dans l’objectif de faciliter la mise en accessibilité des sites et applications par un large public.

N’hésitez pas à nous faire part de vos retours, à suggérer des améliorations et à contribuer au code sur le dépôt GitHub dédié.

Joyeux GAAD à toutes et à tous !