Présentation

AccessConfig est un composant JavaScript offrant plusieurs options pour personnaliser l’affichage des contenus web, et les rendre plus faciles à lire pour les utilisateurs ayant besoin de contrastes forts, les personnes dyslexiques, ainsi que pour les personnes déficientes visuelles ayant besoin de remplacer les images-textes par leur alternative.

Pour tester AccessConfig rapidement, cliquez sur le bouton « Paramètres d’accessibilité » situé en haut à droite de cette page.

Le script va insérer, à l’intérieur de l’attribut class de la balise body, des classes CSS spécifiques en fonction des paramètres sélectionnés par l’utilisateur :

  • Contrastes
    • Défaut : .a42-ac-default-contrast
    • Renforcés : .a42-ac-high-contrast
    • Inversés : .a42-ac-inv-contrast
  • Interlignage
    • Défaut : .a42-ac-default-spacing
    • Adapté : .a42-ac-dys-spacing
  • Police
    • Défaut : .a42-ac-default-font
    • Adapté : .a42-ac-dys-font
  • Justification
    • Défaut : .a42-ac-default-justify
    • Adapté : .a42-ac-cancel-justify
  • Remplacement d’image
    • Défaut : .a42-ac-default-img
    • Adaptée : .a42-ac-text-img
    • Note : le remplacement s’effectue par un traitement JavaScript.

Installation

Pour installer AccessConfig, téléchargez-le et copiez le dossier accessconfig à l’endroit souhaité, à la racine de votre projet par exemple.

Ce dossier contient :

  • un dossier /js où sont rangés les fichiers JavaScript (JS) d’AccessConfig (version minifiée et version non minifiée) ;
  • un dossier /css où sont rangés :
    • les feuilles de styles CSS d’AccessConfig (version minifiée et version non minifiée),
    • le sous-dossier /fonts, contenant les fichiers .woff et .woff2 utilisés pour la police adaptée à la dyslexie.

Notes :

  • en fonction de l’arborescence de votre projet, veillez à modifier les chemins pour appeler les CSS et le script ;
  • nous vous conseillons de renommer le dossier téléchargé accessconfig.

Installation des CSS

Appelez la feuille de styles accessconfig.min.css après vos styles personnels, de sorte que ceux-ci soient écrasés lorsqu’AccessConfig est actif.

<link rel="stylesheet" href="accessconfig/css/accessconfig.min.css" type="text/css" media="screen" />

Classes CSS adaptées

La feuille de styles d’AccessConfig contient les styles de la fenêtre modale ainsi que quelques styles déjà configurés pour fonctionner avec les options proposées par AccessConfig.

Voici un échantillon des règles CSS déjà présentes :

/**
 * Enforced contrast (.a42-ac-high-contrast)
 */
.a42-ac-high-contrast,
.a42-ac-high-contrast *{
	background-color: #343643 !important;
	color: white !important;
}

.a42-ac-high-contrast,
.a42-ac-high-contrast *,
.a42-ac-high-contrast *::before,
.a42-ac-high-contrast *::after{
	border-color: white !important;
}

/**
 * Inverted contrast (.a42-ac-inv-contrast)
 */
.a42-ac-inv-contrast,
.a42-ac-inv-contrast *{
	color: #FFFF00 !important;
	background-color: #000080 !important;
}

.a42-ac-inv-contrast,
.a42-ac-inv-contrast *,
.a42-ac-inv-contrast *::before,
.a42-ac-inv-contrast *::after{
	border-color: #FFFF00 !important;
}

/**
 * Dyslexia font 
 */
@font-face {
  font-family: 'opendys';
  src: url('fonts/opendyslexic-regular-webfont.woff2') format('woff2'),
       url('fonts/opendyslexic-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body.a42-ac-dys-font,
body.a42-ac-dys-font *{
	font-family: 'opendys' !important;
}

/** 
 * Dyslexia line-spacing 
 */
.a42-ac-dys-spacing,
.a42-ac-dys-spacing *{
	line-height: 1.5 !important;
}

/**
 * Dyslexia justification 
 */
.a42-ac-cancel-justification,
.a42-ac-cancel-justification *{
	text-align: left !important;
}

/**
 * Replace images by their alternatives 
 */
.a42-ac-replace-style{
	border: 5px solid !important;
	padding: .2em;
}

Vous pouvez bien sûr modifier ou surcharger ces styles selon vos besoins. Voir Note à propos de l’option permettant de renforcer les contrastes.

Installation du script

Appelez le script accessconfig.min.js dans votre document HTML dans la balise head de la page.

<script src="accessconfig/js/accessconfig.min.js" type="text/javascript"></script>

Initialisation d’AccessConfig

Une fois que le script, les CSS et les polices sont installés, il faut initialiser AccessConfig dans votre page HTML.

Pour cela, copiez le code suivant et collez-le à l’endroit où vous souhaitez faire apparaître le bouton permettant de lancer AccessConfig :

<div id="accessconfig" data-accessconfig-buttonname="Paramètres d’accessibilité" data-accessconfig-params='{ "Prefix" : "a42-ac", "ContainerClass" : "","ModalCloseButton" : "","ModalTitle" : "","FormFieldset" : "","FormFieldsetLegend" : "","FormRadio" : ""}' ></div>

AccessConfig met à votre disposition un certain nombre de paramètres, disponibles depuis ce code HTML. Il n’est pas nécessaire d’aller modifier le script pour les changer. Nous les détaillons ci-après.

Modification du préfixe

Par défaut, les classes et les identifiants relatifs à AccessConfig et à ses cookies sont préfixés par a42-ac.

Mais il vous est possible de définir votre propre préfixe en modifiant le code d’initialisation d’AccessConfig : data-accessconfig-params='{ "Prefix": "xxx" … }'.

Autres options de personnalisation

Vous pouvez également configurer les paramètres suivants :

  • ContainerClass : la valeur de la classe de la fenêtre modale ;
  • ModalCloseButton : la valeur de la classe du bouton de fermeture de la fenêtre modale ;
  • ModalTitle : la valeur de la classe du titre de la fenêtre modale ;
  • FormFieldset : la valeur de la classe des éléments fieldset à l’intérieur de la fenêtre modale ;
  • FormFieldsetLegend : la valeur de la classe des éléments legend à l’intérieur de la fenêtre modale ;
  • FormRadio : la valeur de la classe des input[type="radio"] à l’intérieur de la fenêtre modale.

Utilisation

Stockage des paramètres

Au premier chargement de page, ce sont les paramètres par défaut qui s’appliquent, et les classes CSS correspondantes sont injectées dans l’attribut class de la balise body.

Quand l’utilisateur choisit des paramètres personnalisés parmi ceux proposés par AccessConfig, ceux-ci sont stockés dans un cookie. Au rechargement de la page, les paramètres sont lus et les styles adaptés sont appliqués automatiquement, sans nouvelle action de l’utilisateur.

Traitement des images

AccessConfig permet notamment de remplacer les images contenant du texte par leur alternative textuelle.

Pour cela, il est nécessaire que les images que l’on souhaite pouvoir remplacer par leur alternative textuelle soient identifiées dans la page par une classe CSS.

Le nom de cette classe est paramétré dans l’objet config du script accessconfig.js :

ImageReplacementCSS: {
	//Css class to use on each image to replace
	replacementCss: 'a42-ac-replace-img',
	//Css class to style the replacement text
	replacementStyle: 'a42-ac-replace-style'
},
  • La valeur replacementCss est le suffixe de la classe CSS utilisée pour identifier les images à remplacer par leur alternative textuelle.
  • La valeur replacementStyle est le suffixe de la classe CSS utilisée pour styler les éléments span insérés dans le DOM en remplacement des images concernées, lorsqu’AccessConfig est actif.

Par défaut, ces span sont stylés avec inline-block, une bordure et du padding.

Vous pouvez utiliser la classe obtenue pour appliquer vos propres styles de personnalisation (par exemple .a42-ac-replace-style si vous conservez le préfixe a42-ac).

Langue de l’interface

Le script s’appuie sur la déclaration de langue de la page pour afficher les étiquettes des contrôles, etc.

Vous pouvez ajouter ou modifier les étiquettes de langue avec la propriété lang de chaque contrôle :

HighContrastCheckbox: {
	id: 'high-c',
	value: 'high-c',
	classSetting: 'config-btn',
	//caution : don’t change
	groupName: 'contrast',
	//label
	lang: {
		en: 'Enforced',
		fr: 'Renforcé'
}

Activation ou désactivation des options d’AccessConfig

Pour activer ou désactiver les options proposées par AccessConfig, par exemple le remplacement des images, il suffit de le spécifier dans le code HTML que vous insérez pour appeler AccessConfig.

Par défaut, toutes les options sont activées. Pour désactiver une option, vous devez passer sa valeur à false.

Par exemple, si vous souhaitez que votre installation d’AccessConfig ne propose que la gestion des contrastes, vous devez alors désactiver toutes les autres options :

<div id="accessconfig" data-accessconfig-buttonname="Paramètres d’accessibilité" data-accessconfig-params='{ "Prefix" : "a42-ac", "Font" : false, "LineSpacing": false, "Justification": false, "ImageReplacement": false}' ></div>
  • "Contrast": false pour désactiver la gestion des contrastes ;
  • "Font": false pour désactiver la possibilité d’adapter la police de caractères ;
  • "LineSpacing": false pour désactiver la possibilité d’adapter l’interlignage ;
  • "Justification": false pour désactiver la possibilité d’adapter la justification ;
  • "ImageReplacement": false pour désactiver la possibilité de remplacer les images par leur alternative textuelle.

Note à propos de l’option permettant de renforcer les contrastes

Lorsqu’elle est activée, l’option « Contrastes – Renforcer » d’AccessConfig applique la classe .a42-ac-high-contrast sur la balise body.

Cela permet de surcharger, en CSS, certaines couleurs afin d’atteindre des rapports de contrastes conformes au critère 3.3 du RGAA 3 (AA) voire au critère 3.4 (AAA).

La surcharge peut être très légère, et ne concerner que les codes couleurs dont le rapport de contraste est insuffisant de base.

De notre côté, sur cette page de démonstration, nous avons sciemment mis en place une version très différente de notre charte graphique initiale : en effet, la charte graphique d’Access42 étant très contrastée, la plupart de nos couples de couleurs présentent un rapport de contraste AA ou AAA sans que nous ayons besoin de passer par une surcouche CSS particulière.

Pour la démonstration d’AccessConfig, nous avons donc mis en place un thème très différent ; mais vous êtes bien entendu libres de mettre en place quelque chose de plus léger, et mieux adapté à la charte graphique de votre projet.

Vous pouvez ainsi surcharger ou supprimer les styles appliqués par la CSS d’AccessConfig lorsque la classe .a42-ac-high-contrast est appliquée sur la page.

Note à propos de l’option annulant la justification des textes

Lorsque l’utilisateur choisit d’annuler la justification des textes grâce à l’option « Justification — Supprimer » d’AccessConfig, la classe CSS .a42-ac-cancel-justification est appliquée sur la balise body.

Cette classe force l’application de la propriété CSS text-align: left !important à tous les éléments du DOM grâce au sélecteur universel *.

.a42-ac-cancel-justification,
.a42-ac-cancel-justification *{
	text-align: left !important;
}

Cela a pour conséquence d’aligner à gauche non seulement les textes justifiés, mais aussi les textes centrés et les textes alignés à droite.

Or, le critère 10.9 du RGAA 3 (de niveau AAA) demande uniquement l’absence de textes justifiés.

En effet, la justification des textes sur le web modifie l’espacement entre les mots de manière imprévisible (lézardes), ce qui constitue un obstacle à la compréhension pour certaines personnes ayant des difficultés de lecture (personnes DYS par exemple).

Techniquement, il n’existe à l’heure actuelle que deux méthodes pour annuler la justification des textes, mais elles ne sont pas entièrement satisfaisantes :

  • cibler un à un les blocs de textes justifiés, ce qui est difficilement automatisable ;
  • la propriété CSS text-justify qui permet de ne cibler que les textes justifiés, mais dont le suppport par les différents navigateurs (en anglais) est pour le moment insuffisant.

C’est pourquoi nous avons ajouté une option dans AccessConfig permettant d’annuler la justification.

Si le fait d’aligner à gauche tous les textes de la page est gênant, notamment pour des raisons de charte graphique ou d’image de marque (nous pensons à des éléments centrés dans l’en-tête principal d’un site, par exemple), alors il est tout à fait possible de surcharger ces styles avec un sélecteur CSS encore plus fort, directement dans la feuille de styles du projet concerné, élément par élément.

Exemple :

.a42-ac-cancel-justification .center{
	text-align: center !important;
}

Besoins utilisateurs

Contrastes

De nombreuses personnes n’ont qu’une vision partielle ou dégradée des couleurs. Cela peut concerner une seule couleur, plusieurs couleurs ou des combinaisons de couleurs particulières.

Le déficit de perception des couleurs est très répandu et ses conséquences peuvent être désastreuses pour la perception et la compréhension des contenus et des fonctionnalités.

Pour une personne qui a des difficultés à percevoir les contrastes, certains textes peuvent être impossibles à lire si la couleur d’écriture n’est pas suffisamment contrastée par rapport à la couleur du fond.

Source : Guide du Concepteur RGAA 3 - Contrastes.

Interlignage

L’identification des lignes d’un texte peut être entravée lorsque l’intervalle entre les lignes et les paragraphes est trop petit. Les lignes peuvent être confondues, et l’utilisateur peut sauter d’une ligne à l’autre en cours de lecture sans le vouloir.

Un interlignage plus élevé facilite donc la lecture des contenus du site pour les personnes dyspraxiques par exemple.

Plus d’informations : Fiche sur la dyspraxie - Dysmoi.

Remplacement des images par leur alternative textuelle

Pour certaines personnes déficientes visuelles, il peut être difficile de discerner l’information véhiculée par certaines images.

En effet, les personnes malvoyantes peuvent tout à fait agrandir les images, mais ces dernières risquent de devenir illisibles en raison de la pixellisation du texte.

Cette option d’AccessConfig permet donc de remplacer les images par leur alternative textuelle. Les personnes qui ne comprennent pas ou ne voient pas bien lesdites images auront ainsi accès à l’information.

L'outil ajoute une bordure autour des textes de remplacement. Ce point est important et permet à l'utilisateur de repérer avec certitude les images remplacées.

Police

Pour les personnes dyslexiques notamment, certains types de polices peuvent poser d’importantes difficultés de lecture. Par exemple, les polices à empattement.

Bien que cela ne relève pas de l’obligation légale d’accessibilité, il peut être très utile de permettre à l’utilisateur de personnaliser le type de police de caractères utilisée : par exemple, avec ou sans empattement, ou encore une police adaptée à certaines formes de dyslexie (Lexia, Andika, OpenDyslexic…)

Source : Guide des troubles DYS – RGAA 3.

Plus d’informations : Dyslexie, des solutions numériques pour rendre le web plus lisible ! - Conférence de Nathalie Pican et Séverine Malin.

Justification

La justification de textes crée des espaces variables entre les mots. Ceci complique et ralentit le décodage par les personnes qui repèrent difficilement les mots ou les caractères (personnes dyslexiques notamment).

Plus d’informations : Dyslexie, des solutions numériques pour rendre le web plus lisible ! - Conférence de Nathalie Pican et Séverine Malin.

Critères d’accessibilité

RGAA 3

Images textes

Contrastes

Présentation (justification et interlignage)

WCAG 2.0

Images textes

Contrastes

Présentation (justification et interlignage)

Contenus de test

Test interlignage

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur lacinia leo, in ultrices justo rhoncus ac. Vestibulum interdum lacus nibh, auctor condimentum ante ullamcorper malesuada. Cras sollicitudin varius mi consequat lacinia. Proin id vehicula purus. Sed aliquam leo in eros tincidunt tempor. Mauris sed eros id nunc condimentum pretium. Nunc pellentesque purus tellus, mattis viverra sapien accumsan et. Phasellus vitae nibh ac velit pellentesque scelerisque. Fusce cursus velit in interdum pulvinar. Nulla ut ligula ac felis volutpat egestas. Proin luctus urna sit amet sapien dapibus ultricies. Nullam eleifend tortor sed egestas dictum. Nulla mattis purus id ligula aliquam, sit amet dictum orci malesuada.

Test justification

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur lacinia leo, in ultrices justo rhoncus ac. Vestibulum interdum lacus nibh, auctor condimentum ante ullamcorper malesuada. Cras sollicitudin varius mi consequat lacinia. Proin id vehicula purus. Sed aliquam leo in eros tincidunt tempor. Mauris sed eros id nunc condimentum pretium. Nunc pellentesque purus tellus, mattis viverra sapien accumsan et. Phasellus vitae nibh ac velit pellentesque scelerisque. Fusce cursus velit in interdum pulvinar. Nulla ut ligula ac felis volutpat egestas. Proin luctus urna sit amet sapien dapibus ultricies. Nullam eleifend tortor sed egestas dictum. Nulla mattis purus id ligula aliquam, sit amet dictum orci malesuada.

Test de remplacement d’images par leur alternative textuelle

Ci-dessous, successivement : une image de décoration (sans la classe CSS de remplacement) et deux images porteuses d’information (une image-lien et du texte en image associée à une légende).

Activez l’option « Images : remplacer par du texte » d’AccessConfig pour remplacer les images ayant la classe .a42-ac-replace-img par leur alternative textuelle (alt).

Image décorative

Un sextant est un instrument de navigation à réflexion servant à mesurer la distance angulaire entre deux points aussi bien verticalement qu’horizontalement. Il est utilisé pour faire le point hors de vue de terre en relevant la hauteur angulaire d’un astre au-dessus de l’horizon (voir l’article : navigation astronomique).

Lien-image

Vous pouvez télécharger le lecteur d’écran en cliquant sur le lien suivant : NVDA

Image associée à une légende

CRDP, Convention on the rights of persons width disabilities
CRDP, Convention on the rights of persons width disabilities.On retrouve aux quatre coins de l’image les symboles des types de handicaps, et au centre le nom de la convention, entouré de douze étoiles symbolisant le drapeau européen.

Roadmap

AccessConfig est un projet open source qui va être amené à évoluer.

Évolutions déjà prévues :

  • implémentation du mode non modal : pouvoir afficher AccessConfig directement dans la page, sous forme de toggle, sans fenêtre modale ;
  • paramétrage individuel des couleurs (color picker).

Crédits

AccessConfig est publié sous licence MIT. Cette licence est très souple et donne le droit à toute personne d’utiliser, copier, modifier, fusionner, publier, distribuer, vendre et changer la licence de cet outil. La seule obligation est d’indiquer Access42 comme auteur dans les notices de copyright et de licence.

Si vous appréciez notre travail, n’hésitez pas à afficher toute mention d’Access42 qui vous semblerait opportune (dans les crédits ou mentions légales de votre site, par exemple). Ça nous fera chaud au cœur !

Découvrez nos autres outils