Daniele Tabellini del Dipartimento per la trasformazione digitale
Fabrizio Caccavello di AGID - Agenzia per l'Italia Digitale

Caselle di testo, spunte, pulsanti, menù a tendina: a prima vista un form, una scheda da compilare online, è quanto di più elementare il web possa offrire. Eppure nel contesto della trasformazione digitale, in particolare nella progettazione e nello sviluppo di servizi pubblici digitali, i componenti dell’interfaccia digitale che permettono di costruire moduli per lo scambio di informazioni tra utente e Pubblica Amministrazione svolgono una funzione fondamentale: abilitano esperienze di cittadinanza, ovvero consentono alle persone di esercitare i propri diritti e adempiere ai propri doveri completamente online, senza alcuna preclusione.

L’accessibilità è prima di tutto una questione di attenzione: al significato delle scelte, ai dettagli tecnologici, ma anche e soprattutto agli altri, alle persone e ai loro bisogni. In quest’ottica, un progetto digitale accessibile è un progetto digitale di qualità, un progetto “fatto bene”. Ed è per questo che, negli ultimi mesi, per tornare ai form ad esempio, nell’aggiornamento del design system del Paese sono state fatte scelte tecniche che favoriscono l’utilizzo di codice markup HTML semantico standard, anziché sovrascrivere i componenti con oggetti più “eleganti”, al solo scopo decorativo. Questo per garantire che le interfacce, che sono tra le più importanti per l’interazione con i servizi digitali, siano il più possibile compatibili con qualunque ambiente, e con il maggior numero di casi d’uso.

Ma si tratta solo di un dettaglio dell’approccio e di quanto realizzato nei mesi scorsi: come, e soprattutto perché, siamo arrivati fino a qui? E che direzione abbiamo intrapreso? Quello che segue è il racconto di una parte dell’avventura, iniziata a dicembre 2021, dal Dipartimento per la trasformazione digitale e AgID per aggiornare il design system del Paese. Un’iniziativa che mira a ottimizzare le risorse digitali messe a disposizione dei cittadini da parte della Pubblica Amministrazione, rendendole semplici, accessibili e inclusive.

Indice dei contenuti

• Progettare interfacce è un atto di responsabilità
• Dieci punti per fare meglio
• Il futuro appartiene alle persone
• Il futuro è una questione culturale

Progettare interfacce è un atto di responsabilità

Progettare e sviluppare interfacce digitali significa decidere continuamente chi includere, o escludere, dall’esperienza d’uso e fruizione, a seconda delle proprie caratteristiche, conoscenze, capacità o condizioni di disabilità, temporanee o meno. Nel caso di servizi pubblici digitali, è una scelta che porta con sé una grande responsabilità: tutte le cittadine e i cittadini devono poter avere un’esperienza d’uso piena e soddisfacente, potendone usufruire in modo semplice e chiaro, senza discriminazione e senza lasciare indietro nessuno. Non solo perché lo dicono le norme sull’accessibilità, le linee guida o perché ci sono tecniche e tecnologie che lo permettono.

L’aggiornamento del design system del Paese, uno strumento open, aperto, sia come codice sorgente sia come progetto, ha così l’obiettivo di aiutare la Pubblica Amministrazione italiana a soddisfare i requisiti normativi, ma soprattutto a progettare e sviluppare interfacce ed esperienze d’uso dei servizi pubblici digitali coerenti e inclusive, su una pluralità di dispositivi. In una parola a realizzare progetti di qualità.

Ma cosa si intende quando parliamo di qualità?

“La Qualità… sappiamo cos’è, eppure non lo sappiamo. Questo è contraddittorio. Alcune cose sono meglio di altre cioè hanno più Qualità. Ma quando provi a dire in cosa consiste la Qualità astraendo dalle cose che la posseggono, paff, le parole ti sfuggono di mano. Ma se nessuno sa cos’è, ai fini pratici non esiste per niente. Invece esiste eccome. Su cos’altro sono basati i voti, se no? Perché mai la gente pagherebbe una fortuna per certe cose, e ne getterebbe altre nella spazzatura? Ovviamente alcune cose sono meglio di altre… Ma in cosa consiste il “meglio”?

— Lo zen e l’arte della manutenzione della motocicletta, Robert M. Pirsig

L’accessibilità è un tema di cultura del fare, e fare bene. Non è solo considerare l’accessibilità tra le priorità progettuali, ma “fare”, perché è solo così che si scoprono le necessità reali e i compromessi necessari della qualità manifesta di cui parla Robert Pirsig. È il cambio culturale che stiamo cercando di affermare: non ratificare a valle uno stato di conformità, ma fare accessibile. Semplificare, togliere un passaggio, partire da soluzioni già validate (by default) che possano essere curate nel corso di un progetto (by design), per poi scoprire, paradossalmente, che si tratta di opzioni economiche ed efficaci.

Dieci punti per fare meglio

Per definire cosa sia la qualità, che cosa voglia dire “fatto bene” nel contesto di oltre 22.000 enti pubblici, in particolar modo sul tema accessibilità, il Dipartimento per la trasformazione digitale e AgID, supportati dai progetti Designers Italia e Developers Italia, oltre che da un fornitore tecnico ad hoc, hanno definito una serie di principi, un’agenda in 10 punti, per collegare l’ideale con il pratico. Principi all’interno dei quali il design system del Paese si colloca in maniera importante e trasversale.

1. Fatto bene guarda oltre l’oggi

Se noi prendessimo un sito internet accessibile nel ‘95/’96 (ovvero rispetto ai pochi standard disponibili all’epoca), probabilmente ancora oggi sarebbe accessibile. Ecco perché bisogna fare bene, e fare accessibile, perché significa progettare servizi pubblici digitali pronti per il futuro.

Progettando il sito innovazione.gov.it, ad esempio, abbiamo provato a prevenire criticità futuribili di accessibilità, fin dai requisiti del progetto. Un’attenzione che ci ha permesso di approfondire l’esperienza d’uso della redazione che ne avrebbe curato i contenuti, e scegliere quindi di predisporre automatismi, come quello a supporto dell’inserimento corretto dei collegamenti esterni (poche righe di codice), che contribuissero ad aumentare accessibilità e qualità generale del progetto nel tempo.

2. Fatto bene è by design e by default

Il tema accessibilità non può rispondere solo a meri, anche se necessari, adempimenti burocratici. Dall’inizio e per tutte le fasi del progetto se ne deve tener conto, by design: dalla raccolta requisiti al progetto di contenuti e dell’esperienza utente, dalla prototipazione e sviluppo software fino all’uso, alla validazione e alla manutenzione, e per tutti i profili coinvolti.

E ogni fase del progetto deve avere i suoi automatismi predefiniti, by default: è importante l’uso di kit, componenti, template, framework, documentazione, come le risorse messe già a disposizione grazie al design system del Paese, che permetta di risparmiare tempo e soldi pubblici, partendo con delle componenti già accessibili.

L’accessibilità costa? Aspettare segnalazioni e sanzioni per correggere progetti in corsa, oppure ampiamente conclusi, è sicuramente più oneroso per una Pubblica Amministrazione, mentre fare le cose bene è un investimento che si ripaga da solo nel breve e medio periodo. “Fare accessibile” deve essere il mantra della PA e dei suoi fornitori, sulla falsariga del principio che si applica alla sicurezza e alla privacy, altri due temi della progettazione dei servizi digitali da affrontare by design e by default.

3. Fatto bene è open e partecipazione

Mettere attenzione nel progettare per il pubblico significa prima di tutto aprirsi: ricerca e ascolto dei bisogni dell’utente, ma anche sviluppo open source e licenze aperte, open data, open design, apertura alla partecipazione e ai feedback.

Soldi pubblici, codice e progetto pubblico.

Non solo codice pubblico, come chiede ad esempio la campagna omonima della FSFE (Free Software Foundation Europe), e come portato avanti da anni nella Pubblica Amministrazione con il Catalogo e le linee guida sul riuso e sulle licenze dal progetto Developers Italia; non solo codice pubblico, dicevamo, ma anche iniziare a porsi il problema di come nel mondo del design, del progetto, si debba fare open design e partecipazione con modalità più strutturali.

Il concetto e le strategie dell’accessibilità nascono nell’organizzazione internazionale W3C (World Wide Web Consortium), che stabilisce le regole tecniche con cui si fanno i prodotti accessibili. Il processo di lavoro del W3C è un ottimo esempio di open by default, un processo che prevede il coinvolgimento di gruppi di lavoro eterogenei e contributori esterni, e che è reso possibile solo grazie alla partecipazione e al miglioramento continuo. Non c’è un punto di arrivo ultimo, se non ideale, ma un processo in divenire, iterazione dopo iterazione, aprendo a cercare feedback e contributi, verso il meglio.

La scelta di usare strumenti aperti e collaborativi per l’aggiornamento del design system del Paese va esattamente in questa direzione: repository GitHub per le lavorazioni di sviluppo, e rilasci delle versioni intermedie di lavorazione dei kit di progettazione interfaccia, per cercare commenti, segnalazioni e contributi. Nelle prossime settimane saranno inoltre rilasciati su Designers Italia diversi altri strumenti di questo aggiornamento: documenti di analisi, liste di cose da fare, censimenti e report che vogliamo far diventare patrimonio della community.

4. Fatto bene è a norma

L’Italia è all’avanguardia rispetto alla normativa sull’accessibilità, la Legge n. 4/2004 fu promulgata quando a livello europeo l’accessibilità era un tema ancora poco rilevante, e il recente European Accessibility Act non era nei sogni dei legislatori. Gli aggiornamenti successivi, così come le linee guida sull’accessibilità degli strumenti informatici, messe a disposizione da AgID rispetto alla Direttiva UE 2016/2012, sono i riferimenti normativi da tener presenti quando si parla di accessibilità.

Il livello di conformità richiesto per i siti della Pubblica Amministrazione italiana, dalla norma tecnica europea armonizzata UNI EN 301 549, corrisponde ai livelli “A” e “AA” della W3C Recommendation WCAG 2.1. La specifica WCAG 2.1 è disponibile in lingua italiana.

Ma la normativa sull’accessibilità, con il Decreto Legge 76/2020, è stata estesa anche ai soggetti privati che offrono servizi al pubblico attraverso siti web o applicazioni mobili e che abbiano un fatturato medio superiore a cinquecento milioni di euro negli ultimi tre anni di attività. Si è voluto insomma anticipare alle grandi organizzazioni private il percorso verso l’accessibilità che comunque verrà attivato per tutti i soggetti privati con l’European Accessibility Act a partire dal 2025.

Sono inoltre prossime alla pubblicazione anche le nuove linee guida di design per i siti internet e i servizi digitali della Pubblica Amministrazione, previste ai sensi dell’art. 53 del CAD (Codice Amministrazione Digitale), dove ad esempio i concetti di by default e by design saranno ben evidenti. Contestualmente alla loro uscita verrà rilasciato un corposo “Manuale operativo di design”, tramite Designers Italia, con casi d’uso e indicazioni a supporto.

5. Fatto bene è aiutato dal design system del Paese

Il design system del Paese è un insieme di principi, risorse e «pezzi già pronti», pensato per progettare e sviluppare esperienze utente, di cittadinanza. A parità di qualità, grazie al riuso e alla condivisione di buone pratiche, è possibile anche raggiungere l’obiettivo del minore costo. Da dicembre 2021 stiamo aggiornando questa risorsa dalle fondamenta, in termini tecnologici e di accessibilità, ma anche di visione e gestione. Abbiamo infatti affiancato al cuore delle attività pratiche una serie di attività di più alto livello, come l’inizio di un’articolata ricerca utente su utilizzatori e contributori, e una pianificazione di epiche e obiettivi di medio-lungo periodo.

Il design system del Paese è oggi composto da un kit per progettare interfacce (kit UI), un kit per sviluppare interfacce (il framework Bootstrap Italia in primis) e un insieme di modelli standard per progettare e realizzare siti web e servizi digitali per diverse tipologie di Enti. Queste risorse aggiornate, man mano che le nuove versioni diventeranno stabili nelle prossime settimane, saranno messe a disposizione di tutti tramite il sito web Designers Italia, che ci auspichiamo ospiti presto, come riferimento ufficiale, la documentazione di tutto il design system del Paese: dai principi al design, dallo sviluppo alle indicazioni sull’accessibilità, dai componenti ai pattern validati con gli utenti.

6. Fatto bene è immaginato con il kit UI

Il kit per la progettazione di interfacce del design system del Paese lo abbiamo ricostruito da zero usando le ultime tecnologie disponibili e in coordinamento con il kit di sviluppo, con un occhio attento al tema open design. Fin dai primi rilasci ha indicazioni di accessibilità utili ai designer per comprendere le caratteristiche legate alla specificità della prototipazione, come ad esempio l’uso dei colori. Stiamo anche immaginando di integrare strumenti per favorire l’utilizzo della semantica corretta degli oggetti e per etichettare i mockup.

Questa nuova versione, costruita utilizzando Figma e cercando di sfruttare tutte le potenzialità di collaborazione e automazione, ha numeri importanti: si tratta di oltre 600 componenti, comprese le varianti, divisi nelle tre macrocategorie foundations (fondamenta intese per esempio come griglie, tipografia e icone), components (componenti intesi come “pezzi” dell’interfaccia come pulsanti, liste e testata) e forms (tutti i componenti utili allo sviluppo di moduli).

Un occhio di riguardo è stato messo nel sincronizzare tutti i componenti con i kit di sviluppo, per avere prototipi più realistici e per semplificare il passaggio agli sviluppatori. In prospettiva, e in un’ottica open, è previsto che avvengano rilasci interoperabili verso altri strumenti, come Sketch o Adobe XD, con esportazioni sulla repository GitHub dedicata.

Una parte importante delle lavorazioni è stata dedicata all’integrazione di design token: piccoli elementi “di verità” utili a rappresentare decisioni di stile applicabili in modo coerente tra diversi progetti, framework e strumenti — un esempio di design token: color-blue-a06: #0066cc (valore) e color-primary:color-blu-a06 (decisione) — , che nelle prossime versioni di tutte le risorse afferenti al design system del Paese, siano di design o di sviluppo, ci auspichiamo rendano tutto più coerente, più facilmente aggiornabile, migliorabile e scalabile. I design token rispondono inoltre alle esigenze di personalizzazione emerse dalla ricerca.

Si tratta di un lavoro aperto, ed è possibile partecipare alle attività in corso, commentando o provando l’ultima versione rilasciata nella community Figma; vi invitiamo ad approfondire alcune caratteristiche guardando il video del Community lab dedicato; o seguire gli aggiornamenti sui canali e sul piano attività di Designers Italia, dove scoprire in anteprima quando avverranno i primi rilasci di kit e design token su repository GitHub dedicate, in special modo se interessati a provarli su altri strumenti come Sketch o Adobe XD.

7. Fatto bene è realizzato con Bootstrap Italia

Bootstrap Italia è il kit per lo sviluppo di interfacce del design system del Paese. A distanza di anni, da quando fu rilasciata una prima versione, è evidente quanto sia stato importante pensare a un framework unico di sviluppo, basato sulle esigenze della Pubblica Amministrazione. Fu realizzato con quello che allora era il riferimento, il più utilizzato ma anche il più vicino ai requisiti di accessibilità: Bootstrap. E oggi, dopo aver inizialmente tolto la ruggine all’ultima versione basata su Bootstrap 4, anche integrando molti contributi della community, è in dirittura d’arrivo la nuova versione 2.0 portata su Bootstrap 5.

In questa nuova versione, oltre ad ereditare tutte le nuove caratteristiche di Bootstrap 5, Bootstrap Italia è ottimizzato per molti aspetti che riguardano specificatamente la Pubblica Amministrazione e l’accessibilità. Abbiamo validato, o per meglio dire, stiamo validando e continueremo a migliorare ogni componente, cercando anche di fornire documentazione con indicazioni per l’implementazione laddove necessario.

Durante queste lavorazioni sono state fatte scelte di rottura, consapevoli che la semplicità sia un valore, che sia più facile cioè da manutenere e realizzare, come il dettaglio con cui si apre l’articolo sull’usare markup HTML semantico standard per molti componenti dei form o, altro esempio interessante, come scegliere di integrare la soluzione dei colleghi inglesi Accessible autocomplete, un plugin che permette di cercare e scegliere risposte da una lunga lista, progettato e sviluppato per l’accessibilità.

Bootstrap Italia 2.0 è stato progettato per essere scalabile come richiesto dalle risultanze della ricerca: basti citare come esempi l’uso di Javascript puro per tutte le funzionalità, e l’integrazione di Rollup, che permette di integrare nel proprio progetto solo le parti necessarie del framework, con vantaggi di peso e velocità come si può approfondire in questo articolo. Anche in questo caso si tratta di un lavoro aperto, e vi invitiamo a partecipare ai lavori in corso provando o contribuendo all’ultima versione rilasciata di Bootstrap Italia 2.0 su GitHub.

8. Fatto bene segue modelli standard

La progettazione di esperienze digitali semplici ed efficaci richiede tempo, risorse e molta ricerca. I modelli di siti e servizi digitali per gli enti (oggi scuole e Comuni) permettono di rispondere ai bisogni dei cittadini in modo rapido e a minor costo, sfruttando flussi e funzionalità validate dalla ricerca.

I modelli proposti da Designers Italia, comprendono l’architettura dell’informazione, i template HTML e i temi per CMS (Content Management System), su cui sono stati effettuati in questi mesi importanti lavori, anche per migliorarne l’accessibilità, corredati da una serie di guide pratiche a supporto. I modelli rappresentano precisamente il concetto della creazione di servizi digitali accessibili by default: partire con un intero modello validato e radicato nella ricerca utente.

I modelli per le scuole e i Comuni sono oggetto della misura 1.4.1 del PNRR “Esperienza dei servizi pubblici”. Seguire un modello non significa creare siti uniformi, ma coerenti. Il modello infatti nasce nel rispetto delle esigenze del cittadino e delle necessità di flessibilità degli enti, in questo ordine. Gli enti possono adattare il modello al contesto specifico rispettando comunque i criteri di conformità.

9. Fatto bene a volte… non basta

I «pezzi» del design system del Paese non sono tutto: l’accessibilità è principalmente una questione semantica, di significato degli elementi e dei comportamenti. L’utilizzo di componenti accessibili non rende automaticamente un applicativo accessibile, tuttavia sono un aiuto fondamentale per compiere by default un processo nel modo più ottimale possibile.

Il percorso costruito attraverso il design system è proprio incentrato sul concetto di accessibilità by default. Per ogni attività devono essere utilizzabili elementi, strutture, procedure, che sono già passati attraverso i necessari processi di validazione (documentazione, mockup, framework, template, ecc). Al termine del processo le attività di verifica e di ottimizzazione potranno essere più limitate, per poi liberare risorse per la gestione di casi più complessi o attivare supporti più innovativi.

10. Fatto bene ha bisogno di test e feedback

Nei prossimi anni ci aspettano molte sfide per scalare, dare governance chiara, rendere sostenibile e curare con efficacia il design system del Paese. Per raggiungere questo obiettivo abbiamo bisogno di tutta la community: l’ambiente in cui si muovono e vivono le persone non è quello ideale di utilizzo di un applicativo. Tutti noi utilizziamo applicativi in ambienti i più strani, mentre camminiamo, con il gelato in mano, con tecnologie assistive, magari con tecnologie assistive che oggi neanche immaginiamo.

Durante la partecipazione agli Accessibility Days, ci è stato ricordato il motto dei diritti delle persone con condizioni di disabilità: “Niente su di Noi, senza di Noi”. In autunno, proprio con l’aiuto del team degli Accessibility Days, ci siamo ripromessi di creare occasioni di confronto e test di usabilità, con particolare attenzione all’accessibilità, per raccogliere dati e migliorare piattaforme, siti e servizi pubblici digitali che utilizzano il design system del Paese. Con l’auspicio di riuscirci, e che diventi un’abitudine, per migliorare continuamente, insieme, con partecipazione e responsabilità.

Il futuro appartiene alle persone

Il design system del Paese è un progetto di interesse pubblico, aperto e partecipato. Ci piace pensare che questo progetto appartenga soprattutto a voi che state leggendo, che possiate farlo vostro, ognuno con le proprie competenze e livello di coinvolgimento, nella Pubblica Amministrazione centrale e sul territorio, e nei suoi fornitori. Partecipando alle lavorazioni, segnalando o proponendo miglioramenti, provandone le risorse e partecipando a test e presentazioni, rilasciando soluzioni alternative o analisi e revisioni, allo stesso modo pubbliche e open con le licenze aperte corrette, facendo domande e aiutandoci a diffondere consapevolezza sul progettare e sviluppare interfacce di cittadinanza di qualità, a tutti i livelli.

Il futuro è una questione culturale

C’è ancora una domanda, però, che rimane forse irrisolta: chi sta insegnando a “fare accessibile” alla prossima generazione di designer e sviluppatori? Non vorremmo aprire un piccolo vaso di Pandora, ma nelle Università italiane dedicate all’ITC, alle discipline informatiche, o al design, quanti e quali corsi sono dedicati all’accessibilità? Siamo sicuri che in Italia ci siano molte eccellenze, ma la domanda, e la questione culturale che porta con sé, rimane d’importanza capitale: nei prossimi mesi troviamo un’occasione per parlarne, valorizzare esperienze virtuose e rilanciare?