Dal divertimento all’inclusione: com’è stato reso accessibile il gioco del solitario sviluppato dal mio collega Andrea Biviano!

Nelle ultime settimane ho collaborato con il collega Andrea Biviano , Senior Frontend Developer specializzato in tecnologie React e Next che ha realizzato un gioco del solitario interamente sviluppato per il Web utilizzando appunto Next.js.

Il gioco è fruibile al seguente link: https://www.napoleon-solitaire.com

Insieme abbiamo lavorato a un audit di accessibilità fatto “a quattro mani”, con l’obiettivo di identificare e risolvere le criticità che potevano ostacolare persone che utilizzano tecnologie assistive.

Abbiamo testato il gioco sia con strumenti automatici che con prove manuali, provandolo direttamente con screen reader, tastiera e settaggi di accessibilità disponibili su dispositivi mobili (caratteri ingranditi, contrasti invertiti, ecc.).

Accessibilità come scelta etica e di crescita

Ci tengo a sottolineare che un gioco online come questo non rientra tra i soggetti obbligati ad essere accessibili secondo la normativa.
La scelta di lavorare sull’accessibilità del gioco è stata quindi etica e professionale, per garantire un’esperienza inclusiva e, allo stesso tempo, acquisire competenze tecniche preziose in questo campo.

Che criticità abbiamo individuato?

Durante l’audit sono emerse alcune aree che potevano creare impedimenti e frustrazione agli utenti:

Navigazione da tastiera: alcune parti del gioco, come ad esempio i mazzi delle carte (in modo particolari quelle nascoste) non erano ottimizzate per la navigazione da tastiera e richiedevano che per forza venisse usato il mouse per giocare.
Supporto agli screen reader: abbiamo constatato che in alcune parti del gioco mancavano etichette e ruoli semantici necessari per una lettura corretta da parte delle tecnologie di Reader.
Scelte tipografiche: il font utilizzato, Overlock, non rispettava i requisiti WCAG in termini di spaziature, infatti non tutti i font sono accessibili, e se non rispettano le linee guida WCAG è necessario sostituirlo con uno certificato accessibile oppure apportare delle modifiche in termini di spaziatura che lo rendono tale.

Gli interventi per risolvere o migliorare l’accessibilità.

I principali interventi riguardano quindi le seguenti macro aree:

Navigazione da tastiera: oggi infatti è possibile muoversi e giocare senza toccare il mouse. (In riferimento alle WCAG 2.1.1 Keyboard).
Attributi ARIA: sono stati introdotti aria-label, aria-role e altre proprietà per supportare i lettori di schermo (In riferimento alle WCAG 4.1.2 Name, Role, Value).
Contrasto e dimensioni testo: test su mobile con caratteri ingranditi e modalità ad alto contrasto (WCAG 1.4.4 Resize text, 1.4.3 Contrast).
Font e spaziature: per rispettare i requisiti minimi (WCAG 1.4.12 Text Spacing), Andrea ha scelto di apportare le modifiche al font Overlock applicando via CSS i valori richiesti:
- Letter spacing: 0.12em
- Word spacing: 0.16em
- Line height: 1.5
- Spaziatura dopo i paragrafi: 2em
Questo ha consentito di mantenere il font originario dell’app senza snaturare la UI ma di renderlo fruibile da tutti gli utenti.
Feedback agli utenti → è stata introdotta una modale di avviso che informa l’utente quando tenta di compiere una mossa non consentita.

Un’esperienza migliorata per tutti gli utenti!

Un aspetto interessante è che molte delle migliorie pensate per l’accessibilità hanno avuto un impatto positivo anche sull’usabilità generale del gioco.

Per citarne una che secondo me ha dato tanto valore aggiunto in termine di accessibilità ad esempio è la modale di avviso citata sopra non aiuta solo chi utilizza tecnologie assistive, ma rende il gioco più chiaro e immediato per chiunque, riducendo i dubbi e rendendo l’esperienza più fluida.

Questo ci ha permesso di soddisfare WCAG quali: 3.3.1, 3.3.3, 4.1.3.

Un risultato che vale doppio

Il lavoro fatto non solo ha reso il gioco più inclusivo e accessibile, ma ha anche permesso di approfondire conoscenze e capacità che saranno utili in altri progetti.

L’esperienza dimostra come l’accessibilità non sia un vincolo, ma piuttosto un valore aggiunto che migliora la qualità di un prodotto digitale e l’esperienza per tutti gli utenti.