Menu della documentazione
Accessibilità (WCAG)
Accessibilità del banner CookieHug: semantica di dialogo, uso con tastiera, gestione del focus, screen reader e movimento ridotto.
Accessibilità del banner (WCAG)
Il banner di consenso è spesso il primo elemento interattivo che un visitatore incontra, compresi coloro che usano tastiera o screen reader. Il banner di CookieHug è progettato per soddisfare i criteri WCAG 2.1 AA ed è pienamente utilizzabile senza mouse, senza alcuna configurazione aggiuntiva da parte tua.
Semantica per le tecnologie assistive
- Il banner è una finestra di dialogo (
role="dialog") con titolo e descrizione collegati (aria-labelledby/aria-describedby): gli screen reader lo annunciano correttamente all'apertura. - Nella posizione centrata (con sfondo oscurato) il banner è marcato come modale (
aria-modal="true"). - Gli interruttori di categoria sono veri elementi
checkboxcon etichetta: gli screen reader annunciano nome e stato della categoria. - Le sezioni espandibili (categorie, dettagli dei cookie) portano
aria-expandedearia-controls, così lo stato compresso viene sempre annunciato. - Gli elementi decorativi (icona cookie, frecce) sono nascosti agli screen reader (
aria-hidden). - L'avviso di Global Privacy Control ha il ruolo
status: il messaggio viene annunciato senza rubare il focus.
Uso con tastiera e focus
| Tasto | Azione |
|---|---|
| Tab / Maiusc+Tab | Scorre tutti i controlli del banner (pulsanti, interruttori, sezioni espandibili); in modalità modale il focus circola dentro la finestra di dialogo (trappola del focus) |
| Invio / Spazio | Attiva i pulsanti, cambia gli interruttori di categoria, espande sezioni e dettagli dei cookie |
| Esc | Chiude un banner non modale (la decisione si può prendere in seguito tramite l'icona flottante) |
Il focus è gestito automaticamente: quando il visitatore apre il banner entra nella finestra di dialogo e alla chiusura torna al punto di partenza. Quando un banner non modale compare automaticamente, il focus non viene sottratto alla pagina. Ogni elemento ha un indicatore di focus visibile (:focus-visible). Anche l'icona flottante di riapertura è un pulsante raggiungibile da tastiera.
Movimento ridotto
Quando il sistema del visitatore segnala la preferenza prefers-reduced-motion, animazioni e transizioni del banner vengono disattivate.
Cosa resta dalla tua parte
- Contrasto dei colori — i colori del banner li configuri tu; mantieni un contrasto testo/sfondo di almeno 4,5:1 (WCAG 1.4.3). I modelli di stile inclusi rispettano questa soglia.
- Linguaggio semplice — se sostituisci i testi del banner, mantienili semplici e privi di gergo.
- Lingua del banner coerente con quella della pagina — l'SDK la sceglie automaticamente dall'attributo
langdella pagina, ma i testi sostituiti devono essere scritti nella lingua giusta.