Trois marques distinctes d’un même groupe industriel, chacune avec son propre site vitrine B2B, partagent depuis peu une base de composants commune plutôt que trois thèmes développés indépendamment. La question posée au départ du projet : comment garantir que l’accessibilité reste acquise sur les trois sites, alors que chaque marque impose sa propre charte graphique, avec des couleurs et des polices différentes ?
La réponse retenue distingue deux catégories de tokens de conception, avec des règles de gouvernance différentes selon leur nature : les tokens qui touchent directement au comportement d’accessibilité, communs et non négociables, et les tokens purement esthétiques, propres à chaque marque mais vérifiés indépendamment.
Ce qui reste commun aux trois marques
Trois catégories de tokens sont figées au niveau du design system central, dans un fichier theme.json de base étendu par chaque marque :
- L’épaisseur et le style du contour de focus visible, jamais inférieur à 2 pixels ni retiré par une propriété
outline: nonesans remplacement ; - La taille minimale des zones tactiles pour tout élément interactif, fixée à 24 pixels par 24 pixels au minimum, conformément au critère 2.5.8 du projet de norme WCAG 2.2, déjà au stade de recommandation candidate ;
- L’espacement minimal entre deux cibles tactiles adjacentes, pour éviter les activations accidentelles sur mobile.
{
"settings": {
"custom": {
"focus": {
"epaisseur": "2px",
"style": "solid"
},
"cible": {
"tailleMin": "24px",
"espacement": "8px"
}
}
}
}Ces valeurs ne sont jamais modifiables par une marque individuelle : le fichier de configuration de chaque site étend le socle commun sans jamais le redéfinir sur ces points précis, une contrainte imposée par convention d’équipe et vérifiée en revue de code.
Ce que chaque marque personnalise, sous contrôle
Les couleurs, elles, restent propres à chaque marque : bleu industriel pour la première, vert pour la deuxième, orange pour la troisième. Chaque palette est déclarée dans son propre fichier theme.json de marque, mais elle doit obligatoirement passer un contrôle de contraste avant d’être validée dans la bibliothèque de composants partagée.
{
"settings": {
"color": {
"palette": [
{ "slug": "primaire", "color": "#0b4f8a", "name": "Bleu primaire" },
{ "slug": "texte", "color": "#1a1a1a", "name": "Texte" }
]
}
}
}Ce contrôle prend la forme d’une matrice de vérification : chaque couleur de fond potentielle est croisée avec chaque couleur de texte potentielle, et le ratio de contraste de chaque combinaison est calculé avant validation. Une marque ne peut publier une nouvelle couleur dans la bibliothèque partagée tant qu’une combinaison insuffisante subsiste dans cette matrice.
Un composant testé une fois, trois fois profitable
Le bénéfice principal de cette architecture partagée se mesure sur la maintenance : un composant d’accordéon, testé une seule fois au clavier et au lecteur d’écran dans la bibliothèque centrale, profite immédiatement aux trois sites qui l’utilisent, sans nouveau test par marque. Seule la déclinaison visuelle change, jamais le comportement testé.
Bibliotheque-composants/
├── accordeon/ (comportement testé une fois)
├── champ-formulaire/ (comportement testé une fois)
├── menu-navigation/ (comportement testé une fois)
Marque-A/ (couleurs, typographie)
Marque-B/ (couleurs, typographie)
Marque-C/ (couleurs, typographie)Avant cette organisation, chaque site disposait de son propre accordéon, développé indépendamment par des équipes différentes, avec des niveaux de qualité d’accessibilité disparates d’un site à l’autre.
Le point de friction : qui arbitre en cas de désaccord
Cette organisation suppose qu’une équipe transverse tranche les demandes de dérogation, par exemple lorsqu’une marque souhaite un contour de focus plus discret pour des raisons esthétiques. La règle adoptée au sein du groupe reste ferme sur ce point précis : aucune dérogation n’est accordée sur les tokens liés au comportement d’accessibilité, seule la personnalisation des tokens purement visuels reste négociable.
Un design system multi-marques ne protège l’accessibilité que si les tokens qui la portent restent hors de portée des demandes de personnalisation esthétique, aussi légitimes soient-elles par ailleurs.
Pour aller plus loin
Structurer un design system entre plusieurs marques d’un même groupe autour de cette distinction — tokens de comportement communs, tokens esthétiques personnalisables sous contrôle — permet de maintenir un niveau d’accessibilité homogène sans sacrifier l’identité visuelle propre à chaque marque. La contrainte principale reste organisationnelle plus que technique : définir clairement qui a le dernier mot sur les tokens non négociables.
