> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.pandectes.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Personnaliser le style avec CSS pour l'accessibilité web

Notre application vous permet de personnaliser entièrement l'apparence de l'accessibilité web grâce à du **CSS personnalisé**. Dans les paramètres d'accessibilité web, vous trouverez un **éditeur CSS** sous l'onglet Style où vous pouvez ajouter vos propres styles. Ces styles sont appliqués directement aux composants d'accessibilité web chargés sur votre site ou votre application.

Cet article explique comment l'accessibilité web est structurée et comment cibler chaque élément avec des sélecteurs CSS.

### Aperçu de l'architecture de la bannière

L'ensemble du système de consentement est chargé sous forme de **Web Component** avec la balise racine suivante :

```html
<pandectes-a11y></pandectes-a11y>
```

Tous les éléments d'accessibilité web se trouvent dans ce composant. Lorsque vous écrivez du CSS, vous pouvez, si vous le souhaitez, limiter vos règles à pandectes-a11y pour éviter d'affecter d'autres parties de votre site.

Exemple :

```html
* {
  font-family: Arial, sans-serif;
}
```

### Éléments de la bannière que vous pouvez styliser
L'accessibilité web comprend deux**&#160;éléments principaux**, chacun pouvant être stylisé indépendamment.

###### 1. Dialog

Il s'agit de la boîte de dialogue où toutes les fonctionnalités de votre widget sont disponibles.

**Sélecteur**

```
.a11y-option-tile {

}
```

**Exemple de personnalisation**

```
[data-role="notice"] {
  background-color: #ffffff;
  color: #333333;
  padding: 16px;
  border-top: 1px solid #e0e0e0;
}
```

###### 2.  Widget : icône du bouton

Il s'agit du bouton flottant ou intégré qui permet aux utilisateurs de rouvrir la boîte de dialogue d'accessibilité.

**Sélecteur**

```
button.widget {

}
```

**Exemple de personnalisation**

```
button.widget {
  background-color: #000000;
  color: #ffffff;
  border-radius: 50%;
  width: 48px;
  height: 48px;
}
```

### Conclusion

Grâce aux sélecteurs ci-dessus, vous pouvez contrôler entièrement l'apparence de chaque partie de l'accessibilité web pour l'adapter à votre marque et à votre système de design.