Garante Infanzia Lazio - sito istituzionale accessibile
Sito istituzionale accessibile per il Garante infanzia della Regione Lazio: WordPress custom, zero plugin, conforme WCAG 2.1 AA e AgID, GDPR by design e Lighthouse 100.
Un sito istituzionale accessibile per il Garante dell'infanzia e dell'adolescenza della Regione Lazio, organismo che fa capo al Consiglio regionale. Il progetto sostituisce il sito attualmente in produzione con un tema WordPress custom, senza un solo plugin installato, conforme per legge all'accessibilità e al GDPR.
Il pubblico è doppio e distante: da un lato adulti, professionisti e istituzioni che cercano protocolli, corsi e canali di segnalazione; dall'altro bambini e adolescenti, per cui esistono due sezioni dedicate scritte con un tono completamente diverso. Ho seguito analisi, design system, sviluppo full-stack, accessibilità e deploy.
| Aspetto | Dettaglio |
|---|---|
| Ruolo | Analisi, design system, sviluppo full-stack, accessibilità, deploy |
| Committente | Garante dell'infanzia e dell'adolescenza - Consiglio regionale del Lazio |
| Stack | WordPress, tema custom, Carbon Fields via Composer, Tailwind CSS v4, JavaScript vanilla |
| Infrastruttura | DDEV in locale, DigitalOcean, Caddy con PHP-FPM e MySQL, GitHub Actions |
| Conformità | Accessibilità L. 4/2004, EN 301 549, linee guida AgID, GDPR |
| Plugin installati | Zero |
Il progetto: un sito istituzionale per due pubblici distinti
Trattandosi di una pubblica amministrazione, il sito non doveva soltanto essere gradevole: doveva essere accessibile per legge (L. 4/2004, norma EN 301 549, linee guida AgID), conforme al GDPR e sostenibile nel tempo da una redazione non tecnica. Il rifacimento non porta solo un redesign completo, ma anche contenuti pensati per due pubblici distinti, canali di segnalazione più chiari e una base tecnica senza plugin da mantenere.
Genitori, insegnanti, educatori e professionisti trovano un linguaggio istituzionale ma diretto: quando segnalare, cosa succede dopo, quali situazioni rientrano nelle competenze del Garante e quali no. Il percorso conduce con chiarezza al modulo di segnalazione, unico canale formale per prendere in carico un caso.
La complessità principale: nessun file di design, solo un PDF e un Illustrator
Il punto di partenza non era un Figma con componenti, token, varianti e misure ispezionabili. Era una cartella con un PDF di 10 pagine (mockup affiancati da note funzionali a margine) e un file .ai con 20 artboard a 1920px, più una cartella Links con circa 55 foto stock e 36 varianti di logo. Tradotto: nessun valore di spaziatura, nessun token colore, nessuna scala tipografica dichiarata, nessuno stato hover o focus, nessun comportamento responsive.
Come ho colmato il divario tra un artefatto pensato per la stampa e un sistema di componenti reale:
Estrazione degli artboard con Ghostscript
Il file .ai è internamente un PDF 1.6: l'ho renderizzato artboard per artboard con Ghostscript, ottenendo 20 PNG puliti a 1920px da usare come riferimento pixel.
Ricostruzione della palette dai vettoriali
Colori campionati dai sorgenti vettoriali e non a occhio dal PDF compresso, poi normalizzati in token riutilizzabili.
Deduzione delle regole dalle note a margine
Le note descrivevano il comportamento a parole (lo slider ruota su quattro immagini con pausa, la voce attiva va in semibold, il menu apre una tendina): ogni frase è diventata un requisito implementativo verificabile.
Responsive progettato da zero
Il mockup esisteva solo a 1920px: breakpoint, riflusso delle griglie, comportamento di caroselli e menu sono stati progettati ex novo mantenendo la gerarchia visiva dell'originale.
Recupero e ricostruzione degli asset
Logo del Garante derivato dal vettoriale ufficiale con un intervento sul viewBox per ricavarne icona e lockup verticale; logo del Consiglio regionale estratto ad alta risoluzione e rifilato dai margini trasparenti che ne rompevano l'allineamento; foto identificate tra le 55 stock disponibili tramite montaggi comparativi; QR code della segnalazione generato ex novo.
Il risultato è stato validato confrontando fianco a fianco artboard e pagina reale, con una seconda passata pixel-perfect su allineamenti dei loghi, pesi tipografici delle intestazioni, geometria del menu a tendina e impaginazione del dettaglio notizia.
Architettura: WordPress pulito, zero plugin
La scelta di fondo è stata ridurre la superficie di manutenzione al minimo: nessun plugin installato, tutto ciò che serve vive dentro il tema. Per un sito istituzionale accessibile e a lunga vita, meno dipendenze significano meno debito tecnico e meno rischi di sicurezza.
- Tema custom con struttura ad atomi, pattern e template
- Carbon Fields via Composer, non come plugin: campi versionati che si spostano con il tema
- Campi fissi e non flexible content: la redazione compila, ma non ricompone il layout approvato
- Gutenberg disattivato sui template con campi dedicati, per evitare doppia sorgente di verità
- Custom post type nativi per corsi e protocolli, con i loro campi
- Seeder idempotente all'attivazione: il sito si ricostruisce da zero con un wp theme activate
- Ricerca nativa estesa ai meta di Carbon Fields, senza plugin
- SEO senza plugin: meta con fallback, Open Graph, JSON-LD, sitemap nativa, noindex sulla ricerca
Campi fissi, non flexible content: una scelta deliberata
A differenza di un section builder aperto, qui la redazione compila testi e media in campi definiti per ciascun template, ma non può ricomporre il layout. Il design resta quello approvato e il costo di manutenzione non esplode con il numero di combinazioni possibili. Gutenberg resta disponibile solo sul template predefinito, per le pagine rapide come privacy, cookie e note legali.
Componenti realizzati
| Livello | Componenti |
|---|---|
| Atomi | bottone (pill, 5 varianti cromatiche), titolo-sezione, card-notizia, card-contatto, step |
| Pattern | site-header (barra istituzionale, testata, nav sticky con dropdown), site-footer, hero-slider, carosello-notizie, breadcrumb |
| Template | 11 template di pagina più dettaglio notizia, dettaglio corso, ricerca e 404 |
| Dati | 2 custom post type, 64 campi Carbon Fields, opzioni tema (social, modulo di segnalazione, relazioni annuali) |
Alcuni componenti risolvono requisiti tutt'altro che banali:
Hero slider accessibile
Rotazione automatica, pausa comandabile, indicatori come pulsanti reali, aria-roledescription carousel e stop automatico se l'utente ha prefers-reduced-motion.
Carosello notizie senza controlli inerti
Su desktop mostra sempre tre schede per fascia e scorre di una alla volta, con le frecce che compaiono solo quando c'è davvero altro da scorrere: niente controlli inerti, che sarebbero una trappola per chi naviga da tastiera o screen reader.
Pagina 404 animata ma conforme
I quattro petali del logo fluttuano dispersi attorno al numero e si ricompongono al passaggio del mouse o al focus da tastiera: un momento di identità che resta conforme, perché l'animazione si disattiva con prefers-reduced-motion.
Modulo di segnalazione a tre passi
Percorso Compila, Firma, Invia con i tre canali istituzionali (PEC, e-mail, posta), costruito a partire dal comportamento del sito attualmente in produzione.
Accessibilità (WCAG 2.1 AA) e conformità AgID
L'accessibilità è stata trattata come vincolo progettuale, non come checklist finale. Per un sito istituzionale accessibile la conformità non è un'aggiunta a fine progetto, ma un criterio che guida ogni scelta di colore, interazione e struttura.
Contrasto: token scuriti per superare la soglia AA
I colori del brand non passavano tutti l'AA su bianco (il lavanda #876CFD si ferma a 3,75 a 1). Ho introdotto varianti scurite -700 nei token, riservando le tinte originali a titoli di grandi dimensioni ed elementi decorativi, dove la soglia è 3 a 1. Stesso ragionamento per il campo di ricerca, riportato a fondo bianco con testo navy.
Navigazione da tastiera
Skip link, focus visibile uniforme con outline dedicato, menu a tendina che si chiude con Escape, alla perdita del focus e al clic esterno.
Movimento
Rispetto globale di prefers-reduced-motion e slider con controllo di pausa esplicito (WCAG 2.2.2).
Dimensione dei target
Indicatori dello slider ridisegnati come pulsanti da 24px con pallino interno, per rispettare la dimensione minima dei bersagli.
Struttura semantica
Heading gerarchici, breadcrumb su ogni pagina interna, landmark semantici, immagini decorative marcate aria-hidden, testi alternativi reali sulle foto di contenuto.
Dichiarazione di accessibilità
Predisposta come pagina dedicata, in attesa dell'URL generato dal form AgID.
Verifica su ambiente reale (Lighthouse, desktop)
| Categoria | Punteggio |
|---|---|
| Accessibility | 100 |
| Best Practices | 100 |
| SEO | 69 - unico rilievo: il noindex impostato volutamente sullo staging |
Accessibility e Best Practices a 100 su ambiente reale: la conformità AgID non è una dichiarazione sulla carta, ma un risultato misurato.
GDPR e performance: nessuna risorsa da domini terzi
Le due cose si tengono insieme: il sito non carica una sola risorsa da domini terzi. Font Montserrat self-hosted in WOFF2 subsettato al latino (26 KB per taglio) con preload, niente Google Fonts e niente CDN. La mappa della sede è un'immagine statica che rimanda a Google Maps solo al clic dell'utente, senza iframe che profilino chi visita. Nessun cookie di terze parti e nessun tracker, quindi nessun cookie banner necessario.
| Metrica | Valore |
|---|---|
| LCP | 248 ms |
| CLS | 0,00 |
| CSS servito | 25 KB (build Tailwind v4 statica) |
| JS servito | 3,9 KB, vanilla, senza jQuery né dipendenze |
Delivery e pipeline
Ambiente locale
DDEV in locale con build Tailwind v4 via CLI e output dist versionato, così il deploy non richiede Node sul server.
Repository privato
Tema alla radice del repository: la storia è stata riscritta con git subtree split per togliere di mezzo il core di WordPress e la configurazione locale.
Pipeline su GitHub Actions
A ogni push su master installa le dipendenze Composer, sincronizza il tema sul droplet DigitalOcean, sistema i permessi e svuota la cache. Chiave SSH dedicata e revocabile, distinta da quella personale.
Staging pubblico
Su Caddy con PHP-FPM e MySQL, certificato TLS valido, protetto da noindex, usato per le revisioni con committente e cliente finale.
I numeri del progetto
| Voce | Valore |
|---|---|
| PHP del tema | Circa 2.700 righe |
| CSS sorgente | 159 righe (il resto lo genera Tailwind dai token) |
| JavaScript | 103 righe, vanilla |
| Template di pagina | 11 |
| Campi Carbon Fields | 64 |
| Plugin installati | 0 |
Cosa mi porto dietro
Il vincolo più interessante non è stato tecnico ma di traduzione: trasformare un artefatto pensato per la stampa (artboard statici a larghezza fissa, con le regole scritte a margine in italiano discorsivo) in un sistema di componenti che deve reggere contenuti veri, redattori non tecnici, screen reader e un obbligo normativo. La parte difficile non è stata replicare il pixel: è stata decidere quali pixel fossero una regola e quali un'inerzia del mockup.
Un sito istituzionale accessibile, senza plugin e senza risorse di terze parti, dimostra che conformità normativa e qualità tecnica possono convivere: performance elevate, GDPR by design e manutenzione sostenibile per una redazione non tecnica.
Ti serve un sito istituzionale accessibile e conforme?
Se gestisci una pubblica amministrazione o un ente e hai bisogno di un sito conforme all'accessibilità AgID, al GDPR e sostenibile nel tempo senza dipendere da decine di plugin, posso affiancarti con lo stesso approccio raccontato in questo caso studio: analisi, design system, sviluppo custom e accessibilità trattata come vincolo di progetto.