40 persone, due ore, decine di dispositivi diversi e un obiettivo comune: testare dal vivo l’accessibilità del design system della Pubblica Amministrazione italiana, oggi usato per costruire le interfacce di oltre 11.000 siti Internet. Agli Accessibility Days 2025 non abbiamo parlato di accessibilità: abbiamo provato a farla.

Cosa significa trovarsi in una stanza con decine di persone che verificano una soluzione digitale pubblica? Persone che nel loro quotidiano utilizzano strumenti in modi diversi, con esigenze diverse, per ottenere un diritto, espletare un dovere, reperire un’informazione nel modo più efficace possibile. Fa capire quanto l’accessibilità delle esperienze digitali non sia solo una questione tecnica.

Il workshop che ho coordinato insieme a Fabrizio Caccavello, esperto per gli Accessibility Days, e Federico Giaimo, referente del progetto Designers Italia per il Dipartimento per la trasformazione digitale e l’Agenzia per l’Italia Digitale, non è stato solo un momento di confronto, ma un laboratorio operativo.

Un gruppo di esperti, sviluppatori, designer e project manager, con disabilità e no e con esperienza di tecnologie assistive, verifiche di accessibilità e test di usabilità, che progettano, implementano e verificano soluzioni in modi diversi, ha usato in anteprima alcune funzionalità del design system .italia. Portando alla luce ulteriori criticità e opportunità. Abbiamo sperimentato sul campo cosa significa “accessibilità by design”, con una comunità di persone che dimostra di partecipare con passione al progetto di pubblica utilità se ne ha la possibilità.

Un laboratorio di accessibilità dal vivo

Il 16 giugno 2025, nella cornice degli Accessibility Days nella bella sede dell’Istituto dei Ciechi di Milano, abbiamo creato un ambiente di testing particolare: un minisito dedicato (esplorabile come archivio all’indirizzo https://tinyurl.com/accessibilitydays). Non slide o dimostrazioni, ma pagine pronte per essere esplorate.

Un minisito che potrebbe anche rappresentare un precedente interessante: un ramo parallelo del repository GitHub di Bootstrap Italia, oggi la principale risorsa di sviluppo del design system del Paese, che diventa luogo dove predisporre in modo abbastanza facile pagine e sezioni intere di un sito web che usa i componenti e le griglie del design system.

I partecipanti hanno potuto verificare le nuove card di .italia, completamente ridisegnate, insieme alla correzione di un problema importante al menu di navigazione e al nuovo indicatore di focus bicolore per la navigazione da tastiera, che garantisce visibilità sia su sfondi chiari che scuri, disponibile da mesi ma mai ufficialmente presentato. I contenuti del minisito guidavano a cosa verificare in autonomia. È seguita una fase di confronto e di raccolta feedback per mettere a fattor comune le scoperte. Sono emerse criticità e opportunità che nelle verifiche seppur esperte delle novità erano passate inosservate, confermando l’importanza di creare momenti di confronto con la community.

Una delle fasi più significative è stata la validazione della risoluzione di un problema strutturale del componente della barra di navigazione mobile. Non si trattava solo di Bootstrap Italia, ma di un’eredità del framework Bootstrap stesso da cui deriva: il menu di navigazione mostrato su dispositivi piccoli, o a rilevante ingrandimento, quando aperto non era isolato dai contenuti di pagina sottostanti, rendendo quindi molto difficile una navigazione efficace delle voci di navigazione con i lettori di schermo, in particolare su dispositivi mobili.

Il problema, sollevato grazie a una segnalazione di Fabrizio, ci aveva portato a svolgere numerosi test sulle più diffuse combinazioni di sistemi operativi, dispositivi, browser e lettori di schermo ed a scegliere di riscrivere completamente il componente per applicargli un comportamento corretto da modale. Isolandone contesto e contenuti dal resto della pagina. Per un approfondimento dedicato ai risultati puoi esplorare su GitHub il commento con i dettagli delle verifiche.

Era stato un lavoro delicato, perché svolto con la consapevolezza di dover mantenere la compatibilità per quanto possibile con migliaia di siti già online, con il minimo di cambiamenti di rottura possibili.

Una soluzione che sarebbe da astrarre e proporre a Bootstrap stesso, visto che il problema affligge potenzialmente molti siti che usano questi metodi per pannelli laterali. Su questo, un contributo della community open source degli sviluppatori sarebbe auspicabile.

Le card, quei componenti che permettono di raccogliere contenuti affini in piccole schede visive, sono uno dei componenti più utilizzati nei siti della Pubblica Amministrazione come accesso a servizi, dati, bandi e informazioni. In piccoli gruppi in evidenza o lunghe liste e griglie di risultati di ricerca. Il nuovo redesign, presentato in anteprima in plenaria agli Accessibility Days il giorno precedente il workshop (video), è il frutto dell’esperienza acquisita in questi anni nella progettazione dei modelli di sito: Comuni, scuole, ASL, musei civici e dello stesso sito Designers Italia.

Nuova semantica HTML “<article>”, varianti di card dedicate e coerenti per diversi contesti e usi, migliore accessibilità della presentazione dei metadati, nuova struttura del markup quando presentate in viste lista o griglia, sono alcuni dei fattori affrontati e risolti dal nuovo progetto.

Durante il workshop agli Accessibility Days, grazie al confronto con i partecipanti, sono emersi alcuni aspetti che hanno guidato ulteriori raffinamenti del redesign prima del rilascio ufficiale:

• Struttura migliorata: ogni card ha una gerarchia di informazioni più chiara, con ruoli ARIA appropriati e una sequenza di lettura logica.
• Focus ottimizzato: il nuovo indicatore di focus bicolore è stato testato su elementi multi-riga, rivelando necessità di ottimizzazioni specifiche per titoli e collegamenti lunghi.
• Varianti contestuali: dal confronto sono uscite nuove esigenze per le varianti di presentazione promozionale di contenuti (“Banner”) o informazioni numeriche (“Dati”), con la necessità di spostare il rilascio di queste ultime più avanti nel tempo, riconoscendone complessità e importanza.

Il workshop è stato un esercizio di co-design: il lavoro collaborativo ha generato un elenco dettagliato di osservazioni, domande e proposte, raccolte per trasparenza in una “meta-issue” di sintesi dei risultati nel repository del progetto.

Durante la discussione finale, le domande seguono veloci:

• “Troppo spazio (padding) interno nelle nuove card su mobile?”. Una domanda apparentemente banale che ha permesso di riflettere sull’equilibrio tra leggibilità ed efficienza dello spazio su dispositivi piccoli.
• “Le liste nelle card devono essere anche visivamente liste?”, e anche il forse più importante “Le liste di card devono essere anche semanticamente liste?”. Interrogativi interessanti sulla relazione tra semantica del markup HTML e la percezione dell’informazione.
• “C’è un rischio dai link secondari ‘grigi’ che sembrino disattivati?”. L’accessibilità non è solo conformità tecnica, ma anche percezione e confronto, anche su dettagli come questo.

La community come “quality assurance” distribuita: ogni partecipante ha portato configurazioni, dispositivi e modalità d’uso uniche. Ogni osservazione è stata valutata, discussa e, quando necessario, trasformata in segnalazione specifica nei repository del progetto. La discussione ha portato a rimandare il rilascio della variante per la presentazione di dati a futuri approfondimenti, riconoscendone l’importanza dell’accesso universale in un contesto in cui sempre più questo tipo di card “con numeri” sono usate in molte piattaforme pubbliche per veicolare informazioni importanti, anche inerenti la salute e la vita quotidiana. Su questo, un aggiornamento sarà in arrivo presto, seguite i lavori ufficiali.

Dal co-design alla produzione

A poche settimane dal workshop, a luglio, sono stati rilasciati in produzione a disposizione di tutte le PA e loro fornitori Bootstrap Italia v2.16.0 (changelog) con le nuove card e i fix di accessibilità, e UI Kit Italia v3.7.0 (changelog) con i componenti e le varianti aggiornate per la prototipazione lato design.

Oltre ai risultati tecnici, il workshop ha dimostrato l’efficacia dell’approccio metodologico che fa parte del DNA del progetto Design system .italia:

• Open by design. La scelta strategica dell’open source, dell’open design e di licenze aperte.
• Testing collaborativo. Coinvolgere esperti e persone con diverse competenze e tecnologie assistive ogni volta che è possibile.
• Documentazione sistematica. Trasformare i feedback in segnalazioni tracciabili per rendere il processo trasparente.
• Rilascio iterativo. Integrare rapidamente le migliorie, quando possibile, per valorizzare la partecipazione.
• Validazione sul campo. Testare prodotti reali, non solo prototipi di design, sfruttando la velocità di implementazione abilitata dal design system.

Questo approccio è replicabile: il minisito di testing può essere ricreato per qualsiasi componente, la meta-issue standardizza la raccolta feedback, i tempi ridotti (workshop giugno → rilascio luglio) dimostrano che il processo è sostenibile.

L’accessibilità digitale delle risorse di .italia può essere una responsabilità condivisa dalla community. I partecipanti non sono stati solo tester, ma co-progettisti che hanno contribuito al miglioramento di risorse pubbliche oggi utilizzate da migliaia di siti pubblici. Parliamo di oltre 11.000 siti Internet che utilizzano Bootstrap Italia, un numero destinato a crescere molto con l’applicazione dei modelli per Comuni e scuole previsti dal PNRR e i recenti modelli per musei civici e ASL. Ogni miglioramento di accessibilità impatta potenzialmente milioni di cittadini.

Il potere dell’open source: ogni fix sviluppato può risolvere il problema per tutti. Un investimento di alcune settimane di sviluppo evita che migliaia di PA e fornitori debbano risolvere lo stesso problema individualmente. E l’effetto moltiplicatore va oltre: essendo un riferimento tecnico e metodologico, le soluzioni di .italia vengono spesso adottate come riferimento anche dal settore privato, amplificandone l’impatto positivo sulle esperienze di tutto l’ecosistema digitale italiano.

Si costruisce insieme

Il testing con le persone, collaborativo, non dovrebbe essere l’eccezione, ma la regola in ogni progetto digitale, ancor più in quelli pubblici, quindi un invito diretto:

• PA e fornitori, create occasioni nei vostri progetti per testare accessibilità e usabilità con le persone, presto e spesso. È questione di qualità, non solo di conformità.
• Developer e designer, design system .italia è open. Segnalate, proponete, contribuite. Ogni contributo può migliorare l’esperienza di tutta la cittadinanza.
• Community, partecipate ai test, agli eventi, nei forum, nelle discussioni su GitHub. Segnalate problemi e idee.

L’accessibilità è un diritto di tutte le persone, e costruirla insieme e in trasparenza è uno dei modi per rendere possibile che venga curata con qualità e attenzione. Non è solo una questione di norme, necessarie, che, ricordiamo, in Italia ci sono da ben prima che l’European Accessibility Act o la Web Accessibility Directive fossero nella mente del legislatore europeo. Abbiamo festeggiato di recente i vent’anni della Legge Stanca. L’accessibilità digitale, la progettazione universale, il diritto a un’esperienza della Pubblica Amministrazione digitale efficace e facile, è una questione culturale che impatta quale trasformazione digitale vogliamo per il Paese. Una trasformazione di qualità che può esistere solo se viene considerata bene pubblico, anche da curare tutti insieme.

Per approfondire i risultati del workshop e contribuire al co-design e al miglioramento di .italia:

• Scopri le nuove card: Documentazione componente card
• Leggi e discuti i feedback raccolti: Meta-issue del workshop
• Usa il design system, scopri: Come contribuire e Come iniziare