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à per i vostri visitatori, un motore di correzioni WCAG automatiche applicate a ogni caricamento di pagina, e un generatore multilingue di dichiarazione di accessibilità legale.

Installazione

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 su tre hook (displayHeader, actionFrontControllerSetMedia, displayBeforeBodyClosingTag) e crea un’unica tabella di statistiche. Subito dopo l’installazione, il widget è attivo sul front office con le impostazioni predefinite e tutte le correzioni automatiche sono abilitate, ad eccezione della correzione del contrasto.

Configurazione

Widget di accessibilità

• Attivare il widget — mostra il pulsante flottante su tutte le pagine del front office.
• 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. Le preferenze già salvate dal visitatore continuano ad applicarsi.

Correzioni automatiche

Ogni correzione è attivabile individualmente. Vengono eseguite nel browser del visitatore al caricamento della pagina: i file del vostro tema non vengono mai modificati e la disinstallazione ripristina lo stato originale in modo identico.

• Testi alternativi mancanti — vedere le euristiche dettagliate più avanti.
• Campi modulo senza etichetta — aggiunge un aria-label derivato 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 derivato dal dominio di origine.
• Landmark ARIA — aggiunge i ruoli banner e contentinfo e un aria-label di navigazione quando mancano.
• Link di salto — inietta un link «Vai al contenuto principale» rivelato al primo 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, il browser invia contatori anonimi per tipo di correzione dopo l’applicazione delle correzioni (via sendBeacon). 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 che offre:

• Dimensione del testo — 5 livelli da 100% a 135%.
• Alto contrasto — modalità intelligente che schiarisce gli sfondi a tinta unita preservando le immagini (vedere sotto).
• Carattere leggibile — passa a uno stack Verdana/Arial.
• Aumentare la spaziatura — interlinea 1.8, spaziatura di lettere e parole aumentata (criterio WCAG 1.4.12).
• Evidenziare i link — sfondo giallo e sottolineatura sistematica.
• Cursore grande — cursore ingrandito ad alto contrasto.
• Guida alla lettura — barra orizzontale che segue il mouse.
• Fermare le animazioni — neutralizza animazioni e transizioni CSS (criterio WCAG 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 del primo rendering nelle pagine successive — nessuno sfarfallio visivo, nessun dato inviato ai vostri server.

L’alto contrasto intelligente

A differenza dei widget classici che forzano uno sfondo bianco su tutti gli elementi (facendo sparire slider e banner), questa modalità analizza il DOM all’attivazione:

• gli sfondi a tinta unita opachi vengono schiariti;
• gli elementi con immagine di sfondo sono preservati: i loro testi ricevono una targa bianca semiopaca che garantisce la leggibilità sopra il visual;
• i testi diventano neri, i link blu scuro sottolineato, i controlli interattivi ricevono un bordo nero di 2px.

La disattivazione rimuove tutti gli stili applicati e ripristina il tema in modo identico.

Le correzioni automatiche in dettaglio

Testi alternativi (WCAG 1.1.1)

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

1. se l’immagine è dentro un link che già contiene 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 (trattini sostituiti, sequenze di cifre rimosse) quando il risultato è significativo.

Moduli (WCAG 1.3.1, 4.1.2)

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

Link e iframe (WCAG 3.2.5, 4.1.2)

I link target=_blank ricevono rel=noopener e un aria-label completato con la dicitura «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 iniettato all’inizio della pagina, e contorno di focus imposto su tutti gli elementi interattivi via :focus-visible.

Correzione automatica del contrasto (WCAG 1.4.3)

Il motore percorre i testi visibili, calcola la luminanza relativa del testo e del suo sfondo effettivo, poi scurisce o schiarisce progressivamente i colori il cui rapporto è inferiore a 4,5. L’analisi è limitata a 1500 elementi e viene eseguita via requestIdleCallback nei tempi morti del browser.

Dichiarazione di accessibilità EAA

La pubblicazione di una dichiarazione di accessibilità è un obbligo formale della direttiva. Dalla configurazione del modulo, cliccate su Generare la pagina di dichiarazione: una pagina CMS viene creata in ogni lingua attiva del vostro negozio (modelli FR, EN, ES, DE, IT 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 che punta al vostro modulo di contatto;
• la procedura di reclamo presso l’autorità nazionale competente.

Il link alla dichiarazione appare automaticamente in fondo al pannello del widget. Dopo un aggiornamento del modulo o un cambio di nome del negozio, cliccate su Aggiornare la pagina di dichiarazione per aggiornare la pagina esistente 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 di contrasto. In caso di controllo o segnalazione, questi contatori documentano le misure tecniche messe in atto. Il pulsante Azzerare 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 h1-h6 nei vostri contenuti CMS e schede prodotto;
• qualità redazionale dei testi alternativi delle vostre immagini chiave;
• sottotitolazione dei vostri video;
• chiarezza delle etichette dei vostri pulsanti e link.

Risoluzione dei problemi

• Il pulsante non appare — verificate che il widget sia attivato, che l’hook displayBeforeBodyClosingTag non sia disattivato dal vostro tema, e svuotate la cache di PrestaShop (Parametri avanzati > Prestazioni).
• 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.
• L’alto contrasto lascia una zona incoerente — alcuni elementi iniettati dinamicamente dopo il caricamento (widget di terze parti) sfuggono al passaggio di analisi. Disattivate e riattivate la modalità, o segnalate il caso al supporto con l’URL interessato.
• Nessuna statistica in arrivo — verificate che la raccolta sia attivata e che nessun blocco lato server filtri le richieste verso il controller track del modulo.

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 se non desiderate mantenerla.