Pourquoi travailler la lisibilité du consentement ?
Une interface de consentement est souvent la première interaction proposée lors de l’arrivée sur un site. Elle doit expliquer le rôle des services tiers et présenter les choix possibles sans imposer un effort de lecture inutile. Sa place est particulière : elle interrompt momentanément la navigation, mais elle doit rester compréhensible et utilisable par le plus grand nombre.
J’ai donc ajouté trois thèmes à tarteaucitron.io Pro qui abordent cette question sous des angles différents. A11y Comfort privilégie l’espace, A11y Compact réduit la densité apparente du panneau et A11y Contrast utilise des couleurs fortement différenciées. Aucun de ces thèmes ne change la logique du consentement : ils interviennent sur sa présentation.
Le nom de cette famille ne constitue pas une certification. Il décrit une intention de conception. L’accessibilité réelle dépend du code, des contenus, des réglages et surtout de l’intégration finale sur le site. C’est une distinction importante, notamment pour les organismes qui doivent respecter le RGAA.
A11y Comfort : une lecture plus aérée
A11y Comfort donne davantage de place aux textes, aux actions et aux différentes zones de l’interface. Les espaces blancs ne sont pas simplement décoratifs : ils servent à séparer les informations et à rendre plus lisible la hiérarchie entre le message principal, les boutons et les paramètres détaillés.
Sur un bandeau de consentement, une accumulation de petits éléments peut rendre la lecture fatigante. Avec cette présentation, les zones sont plus distinctes. Les personnes qui préfèrent une interface moins dense peuvent ainsi identifier plus facilement où commence une explication et où se trouve une action.
Cette approche a néanmoins un coût en surface occupée. Sur un écran étroit, l’espace disponible est limité. Le comportement responsive reste donc essentiel : il faut conserver des boutons utilisables et éviter que les textes soient comprimés ou débordent de leur conteneur.
A11y Compact : moins de place, sans supprimer l’information
A11y Compact part d’une contrainte différente. Certains sites souhaitent un bandeau qui prenne moins de place, en particulier sur ordinateur. L’objectif n’est pas de masquer des explications, mais de travailler les marges, les alignements et la structure pour obtenir une présentation plus resserrée.
La compacité peut être utile lorsque les textes sont relativement courts et que la hiérarchie visuelle reste claire. Elle devient problématique si les cibles cliquables sont trop petites ou si les lignes de texte sont trop serrées. Il faut donc distinguer une mise en page compacte d’une interface réduite au minimum à tout prix.
Dans le panneau de gestion, la difficulté augmente : plusieurs services peuvent apparaître, chacun avec une description et des actions distinctes. La présentation doit rester compréhensible même lorsque la liste est longue ou que certains textes sont traduits dans une langue plus verbeuse.
A11y Contrast : des différences visuelles plus franches
A11y Contrast utilise principalement le noir, le blanc et le jaune. L’idée est de marquer plus nettement les zones de contenu et les commandes. Une couleur vive peut aider à repérer un élément, mais elle ne doit jamais être le seul moyen de comprendre son rôle.
Le contraste des textes et des composants est un sujet mesurable. Il ne suffit pourtant pas de regarder une capture et de juger qu’une interface « semble contrastée ». Les couleurs effectives, les tailles de police, les états de survol et de focus ainsi que les éléments désactivés doivent être examinés dans le navigateur.
Le thème illustre donc une direction graphique, pas un résultat d’audit. Une surcharge CSS ajoutée par le site peut modifier une couleur, un fond ou une bordure et remettre en cause une combinaison qui fonctionnait initialement.
Les boutons accepter et refuser doivent rester équilibrés
La question de la lisibilité ne concerne pas seulement les paragraphes. Les actions « Tout accepter » et « Tout refuser » doivent être faciles à identifier et comparables en visibilité. Un thème ne doit pas rendre le refus discret ou le placer dans une zone secondaire sous prétexte de soigner son esthétique.
Dans ces trois présentations, la personnalisation vise à préserver des boutons cohérents. L’état sélectionné d’un service doit également rester identifiable, sans dépendre uniquement d’une différence de couleur difficile à percevoir pour certaines personnes.
Il faut aussi penser à la navigation au clavier. Un indicateur de focus visible aide à suivre le parcours, tandis que l’ordre de tabulation et les intitulés des commandes dépendent du fonctionnement de l’interface et pas uniquement de son apparence.
Le RGAA et les WCAG ne se résument pas à une palette
Une interface accessible doit être testée dans son contexte. Les contrastes sont une partie du travail, mais il faut aussi vérifier la structure des titres, les noms accessibles, la restitution par les lecteurs d’écran, les messages d’état et le comportement lorsque le zoom augmente.
L’intégration peut également introduire des problèmes : un CSS global trop agressif, un bouton recouvert par un élément fixe ou une police personnalisée qui modifie les dimensions. Les thèmes Pro ne peuvent pas anticiper toutes les particularités des sites sur lesquels ils seront utilisés.
Je préfère donc présenter A11y Comfort, Compact et Contrast comme trois options de lecture plutôt que comme trois solutions de conformité prêtes à l’emploi. Le contrôle final reste nécessaire, même si le point de départ graphique est travaillé.
Comparer les trois thèmes sur une vraie interface
Les captures permettent de comprendre les différences générales, mais elles ne montrent ni la navigation au clavier ni le comportement du panneau de gestion. Pour comparer les thèmes, le plus utile reste de les appliquer sur une interface qui fonctionne réellement.
La galerie interactive des 52 thèmes permet de passer d’A11y Comfort à Compact ou Contrast, puis de revenir au thème Default. Il est possible d’ouvrir le panneau et de voir comment les différents composants réagissent.
Ces trois thèmes font partie de la collection réservée à tarteaucitron.io Pro. La bibliothèque open source conserve ses possibilités habituelles de personnalisation CSS ; les thèmes constituent une option supplémentaire pour ceux qui utilisent le service Pro.
