Gimme5: quando l’accessibilità diventa un valore di brand

Un sito che diventa accessibile senza perdere la propria riconoscibilità

Gimme5 è il servizio digitale di AcomeA SGR che permette di risparmiare e investire attraverso la propria app.

La sfida era chiara: adeguare il sito principale agli standard europei di accessibilità in vista dell’entrata in vigore dell’European Accessibility Act. Per Gimme5 non si trattava solo di rispettare un obbligo normativo, ma di aprire i propri servizi a chiunque, senza barriere. Il timore? Che l’intervento potesse compromettere un’identità visiva fondata su una palette cromatica distintiva e componenti grafici consolidati.

Il nostro compito è stato trasformare quel timore in un’opportunità: dimostrare che accessibilità e identità possono rafforzarsi a vicenda, senza compromessi estetici.

L’accessibilità si vede anche nei dati

I dati di Google Analytics raccolti nei tredici mesi successivi al lancio confermano che accessibilità e qualità dell’esperienza sono andate di pari passo. Il tasso di coinvolgimento delle sessioni (la quota di visite che si traduce in un’interazione reale con i contenuti, e non in un abbandono immediato) è cresciuto in modo trasversale su tutti i principali browser e mercati, superando il 98% in media. Nello stesso periodo sono aumentati i nuovi visitatori, è cresciuto in modo significativo l’utilizzo della ricerca interna e sono stati introdotti nuovi contenuti video, mentre i download di documenti sono rimasti stabili. Un segnale coerente: un sito pensato per essere accessibile a chiunque finisce per essere, semplicemente, un sito migliore per tutti.

Analisi e audit

Il primo passo: Analisi e audit

Il progetto è iniziato con una fase di test manuali approfonditi, realizzati attraverso la navigazione da tastiera, l’utilizzo dello screen reader e le funzioni di ingrandimento, per valutare in modo diretto l’esperienza delle persone che utilizzano tecnologie assistive. Questi test hanno permesso di individuare criticità concrete di navigazione e comprensione dei contenuti, difficilmente rilevabili dai soli strumenti automatici. In parallelo sono state effettuate anche verifiche automatiche e semi-automatiche, utili per completare la fotografia tecnica dello stato del sito.

Abbiamo prodotto due documenti paralleli: un report narrativo, pensato per stakeholder non tecnici, e un documento tecnico con tutte le non conformità, spiegazioni e best practice.

In parallelo, abbiamo analizzato il design system e i moduli presenti sul sito, catalogando colori, tipografia e componenti. Questo ci ha permesso di evidenziare come molte criticità nascessero direttamente da pattern ricorrenti di design: contrasti insufficienti, titolazioni non semantiche, link identificati solo dal colore, form senza etichette, assenza di meccanismi per disattivare animazioni, slider non accessibili. Una mappatura che ha fornito al cliente una visione chiara non solo del sito, ma dell’intero ecosistema visivo di Gimme5.

Accessibilità by design

L’ottimizzazione by design

Sappiamo che quasi il 70% dei problemi di accessibilità nasce dal design. Per questo, il nostro lavoro è partito da lì.

Abbiamo ottimizzato la palette colori mantenendo il tono del brand riconoscibile, ridefinito le gerarchie tipografiche per garantire contrasti adeguati e una lettura più chiara, in linea con i requisiti della norma tecnica UNI CEI EN 301549 più recente e con i criteri di successo delle WCAG.

Sono stati progettati nuovi stati di focus, reso accessibile il menu di navigazione, introdotto un meccanismo per disattivare le animazioni, rivisti form e ricerca per una fruizione immediata e comprensibile. Ogni intervento ha rafforzato l’usabilità complessiva, trasformando la scoperta dei contenuti in un percorso più intuitivo e accessibile.

FAQ e discoverability

Uno degli interventi più significativi ha riguardato la sezione di supporto. Qui l’attenzione non si è concentrata in prima battuta sulla user interface, ma sul percorso utente: come arrivare in modo rapido alle informazioni necessarie? Abbiamo rivisto l’architettura della sezione, aggiunto scorciatoie come “salta alle domande frequenti” e reso il contenuto delle FAQ immediatamente accessibile anche a chi utilizza screen reader. Un esempio concreto di come accessibilità e user experience possano camminare insieme.

Fondi e grafici: la trasparenza delle informazioni

La sezione dedicata ai fondi di investimento ha rappresentato una sfida ulteriore. I grafici interattivi, cuore informativo del sito, vengono generati in tempo reale partendo da dati in formato JSON forniti da Gimme5 e utilizzano Chart.js. Un sistema efficace ma con un limite: i grafici non sono compatibili con i requisiti di accessibilità, in particolare con la navigazione da tastiera e la lettura tramite screen reader.

Per rispondere a questo vincolo tecnologico senza stravolgere l’infrastruttura esistente, abbiamo progettato un’alternativa parallela: i dati in formato JSON vengono trasformati in tabelle accessibili, con colonne data/valore, arricchite da una descrizione sintetica dell’andamento del fondo se necessario. Così ogni utente può leggere e comprendere le informazioni in autonomia, con pari opportunità di scelta e decisione.

Sviluppo accessibile

Handoff e sviluppo con Flying

Terminata la fase di progettazione, abbiamo predisposto un handoff dettagliato per il team di sviluppo, con l’obiettivo di integrare l’accessibilità direttamente nelle logiche del sito, senza dover ricorrere a continue correzioni manuali in fase di gestione dei contenuti.

Abbiamo definito relazioni semantiche automatiche tra titoli e sezioni, predisposto meccanismi per rendere le CTA sempre contestuali (“leggi di più” diventa automaticamente “leggi di più sul fondo X”), creato campi dedicati agli screen reader per aggiungere informazioni accessorie solo quando necessarie.

Lo sviluppo è stato realizzato sfruttando Flying, il blank theme WordPress di PaperPlane, che permette di incorporare queste ottimizzazioni by default, garantendo performance ottimali, SEO e componenti accessibili, conformi alle richieste della UNI CEI EN 301549 più recente e delle WCAG. Il confronto costante tra designer e sviluppatori ha permesso di trasformare le indicazioni progettuali in un ecosistema coerente, scalabile e accessibile.

Quality Assurance: la cura dei dettagli

Durante la fase di debug e Quality Assurance, abbiamo investito diverse ore per affinare gli elementi più rilevanti per chi utilizza tecnologie assistive.

Abbiamo rivisto le label, aggiunto etichette accessibili e chiarito il significato di interazioni e componenti, così che la navigazione tramite screen reader fosse fluida e comprensibile. Questa rifinitura ha permesso di alzare ulteriormente il livello di accessibilità, dimostrando come l’attenzione ai dettagli faccia la differenza nell’esperienza finale.

Oltre la conformità

Il valore strategico e di team

Il nuovo sito di Gimme5 dimostra che l’accessibilità  non è un vincolo per l’aspetto estetico di un brand, ma può rappresentare un vantaggio strategico e competitivo.  Le ottimizzazioni effettuate sul design system sono “invisibili agli occhi” di chi non ha esigenze specifiche, ma fondamentali per chi altrimenti non avrebbe potuto fruire dei contenuti.

Il progetto ha permesso a Gimme5 di offrire un’esperienza più accessibile e inclusiva,  ampliando il target e la portata informativa del sito.

Un lavoro così profondo non sarebbe stato possibile senza la disponibilità e la fiducia del team di Gimme5. Un grazie speciale ad Andres Felipe Pardo, Strategic Designer, e a Fabio Arlati, Lead Developer, che hanno accompagnato ogni fase del percorso con entusiasmo e spirito di collaborazione.