Accessibilità EAA: Widget e Correzioni WCAG (dfaccessibility)

DF Accessibility mette il vostro negozio PrestaShop in conformità con la legge europea sull’accessibilità (EAA, Direttiva (UE) 2019/882) combinando tre elementi: un widget di accessibilità di cui scegliete le opzioni, un motore di correzioni WCAG automatiche applicate su ogni pagina e un generatore di dichiarazione di accessibilità legale in 8 lingue.

Installazione e aggiornamento

1. Nel back office di PrestaShop, aprite Moduli > Gestore dei moduli.
2. Cliccate su Carica un modulo e trascinate il file dfaccessibility.zip.
3. Cliccate su Configura al termine dell’installazione.

Il modulo si registra sugli hook displayHeader, actionFrontControllerSetMedia, displayBeforeBodyClosingTag e displayFooter (quest’ultimo serve da ripiego per i temi che non chiamano il precedente) e crea una tabella di statistiche. Subito dopo l’installazione il widget è attivo con tutte le opzioni, e tutte le correzioni automatiche sono abilitate tranne la correzione del contrasto.

Per aggiornare, caricate semplicemente il nuovo ZIP sopra il modulo installato, senza disinstallarlo: gli script di aggiornamento aggiungono le nuove impostazioni e mantengono la vostra configurazione.

Configurazione

Widget di accessibilità

• Attivare il widget: mostra il pulsante flottante sul front office. Disattivare il widget interrompe anche l’applicazione delle preferenze già salvate dai visitatori.
• Posizione del pulsante: in basso a destra o in basso a sinistra.
• Colore di accento: usato per il pulsante, le opzioni attive del pannello e il contorno di focus imposto. Scegliete un colore con contrasto sufficiente sul bianco (il blu predefinito #2563EB rispetta il rapporto AA).
• Nascondere il pulsante su mobile: nasconde il pulsante flottante sotto i 768px.
• Nascondere il pulsante nel carrello e nel checkout: rimuove il pulsante dalle pagine del carrello e dell’ordine, compresi i moduli di checkout in una pagina che mantengono il nome di pagina order.
• Opzioni mostrate nel widget: una casella per opzione (dimensione del testo, alto contrasto, carattere leggibile, spaziatura, evidenziazione dei link, cursore grande, guida alla lettura, arresto delle animazioni, nascondimento delle immagini). Se nessuna opzione è selezionata, il pulsante flottante viene nascosto.

Correzioni automatiche

Ogni correzione è attivabile singolarmente. Vengono eseguite nel browser del visitatore al caricamento della pagina e sui contenuti aggiunti in seguito: i file del tema non vengono mai modificati.

• Testi alternativi mancanti: vedere i dettagli più avanti.
• Campi dei moduli senza etichetta: aggiunge un aria-label ricavato dal placeholder o dal nome del campo.
• Link che aprono una nuova finestra: aggiunge rel=noopener e un avviso udibile per gli screen reader.
• Iframe senza titolo: aggiunge un attributo title ricavato dal dominio di origine.
• Landmark ARIA: aggiunge i ruoli banner e contentinfo e un aria-label di navigazione quando mancano.
• Link di salto: inserisce un link «Vai al contenuto principale» che appare alla prima pressione di Tab.
• Contorno di focus visibile: impone un contorno al focus da tastiera (criterio WCAG 2.4.7).
• Correzione automatica del contrasto: disattivata per impostazione predefinita, vedere la sezione dedicata.

Statistiche

Quando la raccolta è attivata, ogni browser somma le correzioni applicate e le invia al massimo una volta al minuto, alla chiusura o all’uscita dalla pagina. I contatori sono aggregati per giorno e per negozio: nessun cookie, nessun identificatore, nessun dato personale.

Il widget lato visitatore

Il pulsante flottante apre un pannello con le opzioni che avete selezionato:

• Dimensione del testo: 5 livelli dal 100 al 150 %.
• Alto contrasto: modalità intelligente descritta più avanti.
• Carattere leggibile: passa a Verdana, Tahoma, Arial.
• Aumentare la spaziatura: lettere 0,12 em, parole 0,16 em, interlinea 1,6 e 2 em tra i paragrafi, i valori di prova del criterio WCAG 1.4.12.
• Evidenziare i link: sfondo giallo e sottolineatura sistematica.
• Cursore grande: freccia ingrandita e mano ingrandita su link e pulsanti.
• Guida alla lettura: barra orizzontale che segue il mouse.
• Fermare le animazioni: neutralizza animazioni e transizioni CSS, mette in pausa i video in riproduzione automatica e i caroselli Bootstrap, Swiper, Slick e Owl (criteri WCAG 2.2.2 e 2.3.3).
• Nascondere le immagini: nasconde immagini, video e immagini di sfondo.
• Ripristinare tutte le impostazioni: ritorno allo stato originale.

Il pannello è completamente utilizzabile da tastiera: trappola di focus, chiusura con Esc, stati aria-pressed su ogni opzione. Le preferenze sono memorizzate unicamente nel localStorage del browser e riapplicate prima della prima visualizzazione delle pagine successive, senza sfarfallio né dati inviati ai vostri server.

I font di icone (Material Icons del tema Classic, Font Awesome) sono esclusi dal carattere leggibile e dalla spaziatura, così le icone non si trasformano mai in testo.

Dimensione del testo

Il modulo ingrandisce la dimensione radice della pagina a partire dal valore definito dal tema, il che fa crescere tutti i testi in rem ed em, compresi i temi con radice al 62,5 %. I testi dimensionati in pixel, che non seguono la radice, vengono ingranditi uno per uno. Ogni testo viene ingrandito una sola volta, qualunque sia la sua unità.

L’alto contrasto intelligente

I widget classici forzano uno sfondo bianco e un’opacità piena su tutti gli elementi, facendo sparire le immagini degli slider e ricomparire slide nascoste, menu chiusi e sfondi delle modali. Qui il modulo analizza tutta la pagina, a blocchi per non bloccarla:

• gli sfondi a tinta unita e le sfumature diventano bianchi;
• gli elementi con immagine di sfondo, e le didascalie sovrapposte a un’immagine di slider, vengono conservati: i loro testi ricevono una targa bianca semiopaca;
• i testi diventano neri, i link blu scuro sottolineati (gialli al passaggio del mouse), pulsanti e campi ricevono sfondo bianco e bordo nero di 2px;
• nulla di ciò che il tema nasconde ricompare.

I colori forzati si applicano solo al termine dell’analisi, per evitare testo nero su fondo scuro durante il caricamento. La disattivazione ripristina gli stili originali, compresi gli stili inline di un page builder.

Su mobile

Sotto i 768px il pulsante passa a 44px (la dimensione del bersaglio tattile del criterio WCAG 2.5.5) e si posiziona a 14px dai bordi. Il pannello occupa la larghezza dello schermo, fino a 320px.

Le correzioni automatiche in dettaglio

Testi alternativi (WCAG 1.1.1)

Per ogni immagine senza attributo alt, il modulo applica nell’ordine:

1. immagine nascosta alle tecnologie assistive, pixel di tracciamento o immagine dentro un link che contiene già testo: alt vuoto (immagine decorativa);
2. altrimenti, la didascalia figcaption o l’attributo title;
3. altrimenti, il titolo del prodotto della miniatura circostante;
4. come ultima risorsa, il nome del file ripulito, se significativo.

Se nessuna di queste fonti è affidabile, l’immagine non viene modificata, invece di nasconderla per errore agli screen reader con un alt vuoto.

Moduli (WCAG 1.3.1, 4.1.2)

I campi senza label associato, senza aria-label né title ricevono un aria-label ricavato dal placeholder o, in mancanza, dal nome del campo.

Link e iframe (WCAG 3.2.5, 4.1.2)

I link target=_blank ricevono rel=noopener e un aria-label completato con «si apre in una nuova finestra». Gli iframe senza titolo ricevono un title che menziona il dominio incorporato.

Struttura e navigazione (WCAG 1.3.1, 2.4.1, 2.4.7)

Ruoli ARIA aggiunti quando il tema non li dichiara, link di salto inserito in cima alla pagina, contorno di focus imposto tramite :focus-visible. Nel tema Classic, dove il tag <main> racchiude anche intestazione e piè di pagina, il link di salto punta alla colonna dei contenuti #content-wrapper. Se il vostro tema include già un link di salto, il modulo non ne aggiunge un altro.

Correzione automatica del contrasto (WCAG 1.4.3)

Il motore calcola la luminanza relativa di ogni testo e del suo sfondo reale, poi scurisce o schiarisce progressivamente i colori sotto il rapporto richiesto: 4,5, o 3 per il testo grande (24px, o 18,66px in grassetto). Viene eseguito nei tempi morti del browser.

I testi sopra un’immagine, una sfumatura, uno sfondo semitrasparente o dentro uno slider vengono ignorati: il loro sfondo reale non si può calcolare e la correzione rischierebbe di renderli meno leggibili. Anche i testi disattivati vengono ignorati.

Contenuti caricati dopo la pagina

Le correzioni si applicano anche ai contenuti inseriti dopo il caricamento: elenchi dei filtri a faccette, anteprima rapida, modale di aggiunta al carrello, scorrimento infinito. Alto contrasto e dimensione del testo vengono applicati allo stesso modo.

Dichiarazione di accessibilità EAA

La pubblicazione di una dichiarazione di accessibilità è un obbligo formale della direttiva. Dalla configurazione del modulo, cliccate su Genera la pagina della dichiarazione: viene creata una pagina CMS in ogni lingua del negozio (modelli FR, EN, ES, DE, IT, NL, PL e PT inclusi, inglese come ripiego per le altre lingue), con:

• lo stato di conformità rispetto alla Direttiva (UE) 2019/882 e alla norma EN 301 549;
• l’elenco delle funzionalità di accessibilità disponibili;
• il canale di segnalazione verso il vostro modulo di contatto, nella lingua della pagina;
• la procedura di reclamo presso l’autorità nazionale competente.

Il link alla dichiarazione appare automaticamente in fondo al pannello del widget, solo se la pagina esiste ed è attiva. Dopo un aggiornamento del modulo o un cambio di nome del negozio, cliccate su Aggiorna la pagina della dichiarazione: una conferma vi avvisa che le modifiche manuali verranno sostituite, poi la pagina viene aggiornata senza cambiarne l’URL.

Statistiche e prova di diligenza

La tabella della pagina di configurazione mostra, sugli ultimi 30 giorni e per tipo, il numero di correzioni applicate: testi alternativi, etichette dei moduli, link esterni, titoli degli iframe, landmark ARIA, link di salto e correzioni del contrasto. In caso di controllo o segnalazione, questi contatori documentano le misure tecniche adottate. Il pulsante Azzera le statistiche svuota i contatori del negozio corrente.

In multinegozio, le statistiche e la dichiarazione sono gestite per contesto di negozio.

Buone pratiche e limiti

Il modulo corregge i difetti tecnici più frequenti, ma alcuni criteri WCAG restano di natura editoriale e rimangono di vostra competenza:

• gerarchia logica dei titoli da h1 a h6 nei contenuti CMS e nelle schede prodotto;
• qualità redazionale dei testi alternativi delle immagini chiave;
• sottotitoli dei video;
• chiarezza delle etichette di pulsanti e link.

Risoluzione dei problemi

• Il pulsante non appare: verificate che il widget sia attivato, che almeno un’opzione sia selezionata e di non essere su una pagina dove è nascosto (mobile, carrello, checkout), poi svuotate la cache di PrestaShop (Parametri avanzati > Prestazioni).
• Un’opzione è scomparsa per un visitatore: è stata deselezionata nella configurazione, il che rimuove anche la preferenza salvata.
• Le preferenze non persistono: il visitatore naviga probabilmente in modalità privata o il suo browser blocca il localStorage; il widget resta utilizzabile, si perde solo la persistenza.
• Una zona resta scura in alto contrasto: un elemento cambia sfondo in seguito tramite uno script (ad esempio un’intestazione fissa che si scurisce allo scorrimento). Disattivate e riattivate la modalità, o segnalate il caso al supporto con l’URL interessato.
• L’installazione o l’aggiornamento non riesce: caricate l’ultima versione dello ZIP sopra il modulo, senza disinstallare. Le versioni precedenti alla 1.2.1 potevano fallire con «Undefined array key DFACCESS_WIDGET_OPTIONS».
• Nessuna statistica in arrivo: verificate che la raccolta sia attivata e che nessun firewall filtri le richieste verso il controller track del modulo. I contatori arrivano a blocchi, con un possibile ritardo di qualche minuto.

Disinstallazione

La disinstallazione rimuove la tabella delle statistiche e le chiavi di configurazione. La pagina CMS della dichiarazione di accessibilità viene volutamente conservata (resta un obbligo legale): eliminatela manualmente da Aspetto > Pagine se non desiderate mantenerla.