Login

Try consentmanager
Book a call

Lavorare con l'accessibilità / WCAG

Per impostazione predefinita, il layer di consenso è predisposto per essere accessibile agli screen reader e a strumenti simili, ma in alcuni casi potrebbero essere necessarie modifiche alle impostazioni di design.

Abilita il supporto WCAG per i banner sui cookie

Per abilitare il supporto alle WCAG (Linee guida per l'accessibilità dei contenuti web 2.2), accedi al tuo account, vai su Menu > Design e modifica il design corrispondente. Espandi le impostazioni su "Mostra impostazioni avanzate" e abilita le WCAG:

Modifiche WCAG all'output del livello di consenso

Se l'impostazione WCAG è abilitata per un design, al livello di consenso verranno applicate le seguenti modifiche:

  • Il livello di consenso sarà racchiuso in un elemento shadowRoot
  • I titoli nel livello di consenso useranno gli elementi <h1> e <h2> invece di <div>
  • I testi dei pulsanti di attivazione/disattivazione useranno l'elemento <label> invece di <div>
  • Il menu nel livello delle impostazioni personalizzate utilizzerà l'elemento <nav> invece di <div>
  • Gli elementi di verifica dell'età saranno contrassegnati da un'etichetta
  • Le tabelle saranno corredate di didascalie
  • Gli elementi riceveranno attributi aria-label, aria-checked, aria-modal, role e simili
  • È disponibile l'opzione Gatekeeper (vedi sotto)

Opzione Gatekeeper

Quando WCAG è abilitato, è possibile abilitare anche l'opzione Gatekeeper. Ciò impedisce al layer di consenso di perdere il focus: se l'utente preme il tasto TAB (o un elemento di navigazione simile sulla tastiera), il focus rimarrà sempre all'interno del layer di consenso e non salterà ad altre posizioni all'interno del sito web.

Considerazioni sul design

Si prega di notare che le modifiche tecniche potrebbero richiedere ulteriori modifiche al design stesso per garantire la piena conformità alle WCAG. Alcuni esempi includono:

  • Utilizza una dimensione dei caratteri adeguata (ad es. em o pt invece di px)
  • Utilizza un carattere sans serif comunemente disponibile (ad es. Times New Roman, Verdana, Arial, …)
  • Utilizza un rapporto tra colori e contrasto che sia facilmente distinguibile (ad es. rapporto di contrasto 3:1 tra testo e sfondo)
  • Utilizza una spaziatura del testo che faciliti la lettura dei contenuti (ad es. interlinea di 1,5 em)

Oltre alle modifiche puramente grafiche, alcuni requisiti WCAG potrebbero richiedere l'utilizzo di determinate impostazioni nel design. Ad esempio, per soddisfare i requisiti WCAG potrebbe essere necessario abilitare i menu nel design del tuo layer di consenso.

Ulteriori approfondimenti

We do our best to keep this purely informative documentation up to date. However, if you notice that any of these guides need a little touch-up, let us know!