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:

<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:

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

Elementi del banner che puoi personalizzare

Web accessibility è composta da due** 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.

Aggiornato il: 20/10/2026