> ## 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).

# Stile personalizzato con CSS per Web Accessibility

La nostra app ti permette di personalizzare completamente l'aspetto di web accessibility usando **CSS personalizzato**. Nelle impostazioni di web accessibility troverai un **editor CSS** nella scheda Style, dove puoi aggiungere i tuoi stili. Questi stili vengono applicati direttamente ai componenti di web accessibility caricati sul tuo sito web o sulla tua app.

Questo articolo spiega come è strutturata web accessibility e come individuare ogni elemento con i selettori CSS.

### Panoramica dell'architettura del banner

L'intero sistema di consenso viene caricato come **Web Component** con il seguente tag radice:

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

Tutti gli elementi di web accessibility si trovano all'interno di questo componente. Quando scrivi il CSS, puoi facoltativamente limitare le regole a pandectes-a11y per evitare di influenzare altre parti del tuo sito.

Esempio:

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

### Elementi del banner che puoi personalizzare
Web accessibility è composta da due**&#160;elementi principali**, ognuno dei quali può essere personalizzato in modo indipendente.

###### 1. Dialog

Questa è la finestra di dialogo in cui sono disponibili tutte le funzionalità del tuo widget.

**Selettore**

```
.a11y-option-tile {

}
```

**Esempio di personalizzazione**

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

###### 2.  Widget – Button Icon

Questo è il pulsante fluttuante o integrato che permette agli utenti di riaprire la finestra di accessibilità.

**Selettore**

```
button.widget {

}
```

**Esempio di personalizzazione**

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

### Conclusione

Usando i selettori qui sopra, puoi controllare completamente l'aspetto di ogni parte di web accessibility per adattarla al tuo marchio e al tuo design system.