Personnalisation CSS accessible

Didomi n’est pas expert en accessibilité et ne peut pas fournir de conseils spécifiques en matière d’accessibilité. Les informations non exhaustives de cette page sont fournies à titre informatif uniquement et ont pour but de vous aider à identifier les problèmes courants et à démarrer. Pour une évaluation fiable et une remédiation des problèmes d’accessibilité, veuillez consulter un partenaire qualifié en accessibilité.

🎨 1. Contraste des couleurs

❌ Exemple de contraste insuffisant

/* Faible contraste entre le texte et l'arrière-plan */
.notice-text {
  color: #999;           /* Gris clair */
  background-color: #fff; /* Blanc */
}

Pourquoi c’est un problème : le ratio de contraste est trop faible pour le texte normal (inférieur à 4,5:1), ce qui le rend difficile à lire pour de nombreux utilisateurs.

✅ Alternative accessible

/* Association à fort contraste */
.notice-text {
  color: #1a1a1a;           /* Presque noir */
  background-color: #ffffff; /* Blanc */
}

Astuce : utilisez un vérificateur de contraste pour tester avant d’appliquer.

---

⌨️ 2. Styles de focus

❌ Mauvais : indicateur de focus supprimé

button:focus {
  outline: none;
}

Pourquoi c’est un problème : cela supprime l’indication visuelle pour les utilisateurs qui naviguent au clavier.

✅ Bien : indicateur de focus personnalisé

button:focus {
  outline: 2px solid #0077cc;
  outline-offset: 2px;
  border-radius: 4px;
}

Optionnel : utilisez les couleurs de la marque, mais assurez-vous que l’anneau de focus soit toujours visible.

---

🧭 3. Style des boutons

❌ Élément non sémantique

<div class="btn">Accept</div>

.btn {
  background-color: #0077cc;
  color: white;
  padding: 10px;
  cursor: pointer;
}

Pourquoi c’est un problème : <div> n’est pas un bouton sémantique — les lecteurs d’écran et les utilisateurs au clavier ne peuvent pas l’activer par défaut.

✅ Alternative accessible

<button class="btn">Accept</button>

Ou si un élément personnalisé est requis :

<div class="btn" role="button" tabindex="0" aria-label="Accept">
  Accepter
</div>

.btn:focus {
  outline: 2px dashed #0077cc;
}

---

🧪 4. Évitez le contenu visible uniquement au survol

❌ Info-bulle uniquement au survol

.tooltip-text {
  display: none;
}

.tooltip:hover .tooltip-text {
  display: block;
}

Pourquoi c’est un problème : les utilisateurs d’écrans tactiles ou au clavier ne peuvent pas survoler.

✅ Info-bulle accessible (visible aussi au focus)

.tooltip-text {
  display: none;
}

.tooltip:hover .tooltip-text,
.tooltip:focus-within .tooltip-text {
  display: block;
}

---

📱 5. Texte responsive

❌ Taille de texte fixe

.notice-text {
  font-size: 12px;
}

✅ Texte évolutif

.notice-text {
  font-size: 1rem; /* S’adapte aux préférences de l’utilisateur */
}