# 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](https://webaim.org/resources/contrastchecker/) 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 */
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.didomi.io/fr/plateforme-de-gestion-du-consentement-cmp/bannieres-de-consentement/personnalisation-css-accessible.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.