Problemi di accessibilità
La soluzione automatica però ha dei problemi di accessibilità. I principali sono 3:
- Posizione sbagliata nel DOM. Senza modifiche, il banner viene posizionato alla fine del DOM. Questo vuol dire che se navighi con tastiera o con Screen Reader, sarà più difficile chiudere il banner o accettare i cookie;
- Posizione sbagliata dei bottoni. Senza modifiche, l’ordine che compare è: Vedi i cookie, Rifiuta, Accetta. C’è un link aggiuntivo per vedere i cookie nel testo;
- Stile e testi. Si possono sicuramente migliorare per migliorare l’accessibilità e l’esperienza di lettura in generale.
Soluzioni proposte
Ecco alcune proposte per migliorare l’accessibilità del Cookie Banner:
1. Usa il codice custom Iubenda
- Tra le impostazioni di Iubenda è disponibile l’opzione per mettere il banner all’inizio del body (prependOnBody).
- C’è una soluzione migliore: usa il codice da mettere nel. In questo modo hai maggiore controllo sul banner.
2. Cambia l’ordine dei bottoni
Per modificare l’ordine di lettura con tastiera e SR potremmo usare le proprietà tabindex. Questo però non è ottimale. Attraverso il codice HTML puoi modificare l’ordine e far corrispondere l’ordine di lettura con il DOM.
3. Migliora stile e testi
Sovrascrivi lo stile CSS per migliorare l’accessibilità del banner e modifica i testi per migliorare la leggibilità. Per lo stile nell’esempio mi sono ispirato al banner GOV.UK, facile da individuare per chi usa lo zoom.
4. Sito multilingua: come fare?
- Nessun problema. Mirco Babini ha scritto un codice utile per mostrare i contenuti tradotti in base al parametro lang del sito;
- Se non vuoi caricare jQuery, puoi integrare il codice precedente con una soluzione Vanilla JavaScript.