Questo articolo è disponibile anche in:

Il banner dei cookie è accessibile? WCAG 2.2 AA e ADA (nuova versione)

Panoramica

Il banner dei cookie di Pandectes è certificato WCAG 2.2 livello AA. Zoonou Limited, una società indipendente di test di accessibilità, lo ha sottoposto ad audit in base a WCAG 2.2, Section 508 ed EN 301 549, pubblicando i risultati in un report di conformità VPAT 2.5.

L'audit copre ogni livello che un visitatore può aprire: la cookie notice, le preferenze e i dettagli dei cookie. Ha incluso test manuali con gli screen reader JAWS, NVDA e VoiceOver, Windows Magnifier, il controllo vocale Dragon, oltre a VoiceOver e TalkBack su dispositivi mobili. Ogni criterio WCAG 2.2 di livello A e AA è stato valutato Supports o Not Applicable.

Puoi leggere la dichiarazione di conformità completa sul nostro sito: Accessibility conformance.

Nuovo banner. Per gli store con il badge New version in Cookie banner. Per il banner Legacy, consulta Come passare al nuovo banner o tornare alla versione precedente.

WCAG, ADA e il tuo store

L'ADA non prevede alcun certificato ufficiale per i siti web. Negli Stati Uniti, WCAG è il parametro di riferimento più usato quando l'ADA viene applicata ai siti web. Nell'Unione Europea, l'European Accessibility Act rimanda a EN 301 549, che include le WCAG. Il banner soddisfa entrambi.

La certificazione riguarda il banner stesso. Il tuo tema, i contenuti dei prodotti e il checkout devono comunque rispettare le linee guida per conto loro. Questo articolo ha scopo informativo e non costituisce consulenza legale.

Se condividi i nostri risultati con un auditor, il link migliore da inviare è la pagina Accessibility conformance.

Rilievi comuni degli audit, spiegati

Gli scanner automatici e alcuni audit segnalano sempre gli stessi tre punti. Ecco come si comporta il banner e cosa puoi modificare.

"Il focus non è intrappolato all'interno del banner"

Per impostazione predefinita il banner è non modale. I visitatori possono continuare a leggere e a navigare nella pagina mentre il banner è aperto, quindi la tastiera si sposta dal banner alla pagina e viceversa. È un comportamento voluto: le WCAG si aspettano che il focus resti all'interno di un dialogo solo quando il dialogo blocca il resto della pagina, e il criterio di successo 2.1.2 (No Keyboard Trap) richiede che un visitatore possa sempre spostare il focus fuori dai contenuti non modali.

Se vuoi che i visitatori facciano una scelta prima di poter usare la pagina, attiva il consenso obbligatorio. Il banner si apre quindi come dialogo modale: la pagina sottostante viene bloccata e Tab e Shift + Tab restano all'interno del banner finché il visitatore non fa una scelta.

Apri Shopify Admin > Apps > Pandectes GDPR Compliance.
Vai su Cookie banner.
Apri la scheda Advanced.
In Enforced consent (modals), attiva Enforced consent (modals).
Facoltativo: attiva Lock background scroll.
Salva.

Maggiori dettagli: Come usare il consenso obbligatorio (modali) nel nuovo banner.

"Il focus non si sposta sulla pagina dopo la chiusura del banner"

Quando il banner si apre, il focus della tastiera si sposta al suo interno, quindi gli utenti da tastiera e da screen reader partono dal messaggio del banner.

Quando il banner si chiude, il focus lo lascia e torna alla pagina:

Se il visitatore ha aperto il banner dal Consent widget o da un link di riapertura, il focus torna a quel widget o link.
Alla prima visita, nessun elemento della pagina aveva il focus prima del banner, quindi la pressione successiva di Tab prosegue dalla posizione del banner nella pagina.

Il focus non resta mai su un elemento nascosto e nessuna parte della pagina viene saltata. Se vuoi che il focus si posizioni su un elemento specifico dopo la chiusura del banner (ad esempio il link Skip to content del tuo tema), si tratta di una modifica da fare nel tuo tema, non nel banner.

"I link non segnalano che si aprono in una nuova scheda o in un altro sito web"

I link nel banner sono quelli che imposti nella scheda Content sotto Links:

Privacy policy e Imprint si aprono per impostazione predefinita nella stessa scheda. Si aprono in una nuova scheda solo se attivi Always open links in a new tab.
Il link Google partners apre sempre la pagina di Google in una nuova scheda.
Nelle preferenze, i link Learn more about provider aprono la pagina del provider in una nuova scheda.

Aprire un link in una nuova scheda senza avviso non è un errore WCAG 2.2 di livello A o AA, ma un avviso è utile. Puoi aggiungerlo in due modi:

Apri Shopify Admin > Apps > Pandectes GDPR Compliance.
Vai su Cookie banner.
Apri la scheda Content e scorri fino a Links.
Disattiva Always open links in a new tab, in modo che le tue pagine si aprano nella stessa scheda, oppure aggiungi l'avviso al testo del link, ad esempio Privacy policy (si apre in una nuova scheda).
Salva, poi ripeti la modifica in All settings > Translations per le altre lingue.

Maggiori dettagli: Come modificare i testi e i link del banner (nuova versione).

Mantieni il banner accessibile dopo averlo personalizzato

La certificazione si applica al banner così come lo forniamo. Alcune modifiche possono ridurre il contrasto o la leggibilità:

Colori: mantieni un contrasto sufficiente tra testo e sfondo e tra pulsanti e relative etichette. Nel dubbio, usa un preset nella scheda Style.
Stile personalizzato (CSS): non nascondere i contorni del focus, non ridurre il testo sotto una dimensione leggibile e non nascondere i pulsanti.
Testi: mantieni chiare le etichette dei pulsanti, come Accept, Decline e Preferences.

Feedback

Se tu o il tuo auditor trovate nel banner qualcosa di difficile da usare, contattaci tramite la chat nell'app. Preferiamo conoscere una barriera piuttosto che vedere un visitatore andarsene a causa sua.