--- title: "Accessibilità delle app mobili: guida pratica | GoodBarber" description: "Non puoi dimostrare che un’app è accessibile basandoti su un’anteprima o su un punteggio di contrasto. Puoi però eliminare un numero sorprendente di barriere pr" canonical_url: "https://it.goodbarber.com/blog/accessibilita-delle-app-mobili-come-rendere-la-tua-app-piu-accessibile-a1095/" lang: it date: 2026-08-20 last_updated: 2026-08-20 --- # Accessibilità delle app mobili: guida pratica | GoodBarber [Indietro](/blog/make-it-r10/) # Accessibilità delle app mobili: come rendere la tua app più accessibile Scritto da [Marc Leonardi](https://it.goodbarber.com/blog/author/marc-leonardi/) il Giovedì 20 Agosto 2026 ## L’accessibilità delle app mobili aiuta le persone con disabilità visive, uditive, motorie o cognitive a percepire i contenuti, comprendere l’interfaccia e completare le attività principali. Abbiamo deliberatamente peggiorato una copia di Lotus Yoga, una delle nostre app dimostrative, per poi ricostruirla in GoodBarber e verificare ciò che l’anteprima può — e non può — dimostrare. ## L’accessibilità mobile parte da un sistema ![](https://cmsphoto.ww-cdn.com/superstatic/81312/art/grande/97759884-68053382.jpg?v=1787262311.6780276) Non puoi dimostrare che un’app è accessibile basandoti su un’anteprima o su un punteggio di contrasto. Puoi però eliminare un numero sorprendente di barriere prima che inizino i test formali. L’accessibilità mobile va ben oltre il contrasto dei colori. Tipografia, spaziatura, navigazione, aree touch, etichette, movimento, media e comportamento con le tecnologie assistive influenzano la possibilità di completare un’attività. Le WCAG sono state scritte per i contenuti web. Le linee guida [WCAG2Mobile del W3C](https://www.w3.org/TR/wcag2mobile-22/) spiegano come applicare i criteri di livello A e AA delle WCAG 2.2 alle app mobili native, web e ibride. Il documento è informativo, non una norma mobile separata, e da solo non basta a stabilire che un’app sia accessibile. Questa checklist distingue ciò che si può configurare centralmente da ciò che deve ancora essere verificato nel prodotto pubblicato: | Area di accessibilità | Primo controllo | Cosa configurare o testare | | ----------------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------ | | Contrasto dei colori | Testi, sfondi, controlli e stati | Impostare i colori globali e verificare ogni combinazione di contrasto | | Tipografia e spaziatura | Valori predefiniti leggibili, ritorni a capo e ingrandimento | Configurare la gerarchia tipografica e i margini globali | | Navigazione | Destinazioni ed etichette chiare | Configurare struttura, etichette e navigazione dell’app | | Aree touch | Controlli facili da utilizzare | Verificare l’app generata sui dispositivi | | Screen reader | Nomi, ruoli, stati e ordine del focus | Testare le app iOS e Android generate | | Movimento | Effetti utili e facoltativi | Configurare animazioni e feedback aptico, poi testare le preferenze di sistema | | Media | Sottotitoli, trascrizioni e alternative testuali | Aggiungere le alternative durante creazione e revisione dei contenuti | | Interazione PWA | Tastiera, zoom, focus e layout responsive | Testare la PWA pubblicata nei browser | ## Lotus Yoga: curata a prima vista, fragile nell’uso ![](https://cmsphoto.ww-cdn.com/superstatic/81312/art/grande/97759884-68053383.jpg?v=1787262313.6220376) In questa prima schermata nulla sembrava evidentemente rotto. Proprio qui stava il valore dell’esercizio: i problemi di accessibilità non sono sempre vistosi; spesso si nascondono dietro scelte grafiche raffinate. Abbiamo usato testo chiaro su sfondo chiaro, ridotto il corpo a 10 px, eliminato i margini globali e mantenuto etichette di navigazione generiche come “Videos” e “Podcasts”. In una presentazione il risultato continuava a sembrare rilassante. Su un telefono, la gerarchia crollava: il testo secondario sbiadiva, le card arrivavano troppo vicino ai bordi e la navigazione inferiore diventava molto più difficile da scorrere. La lezione non è “non usare mai colori pastello” o “rendi tutto grande”. Le scelte di brand hanno bisogno di un sistema leggibile su cui poggiare. ## Passaggio 1: correggere il contrasto come sistema ![](https://cmsphoto.ww-cdn.com/superstatic/81312/art/grande/97759884-68053384.jpg?v=1787262315.474047) Abbiamo iniziato in **La mia app > Stile dell'app > Colori** assegnando i colori in base al loro ruolo. Lo sfondo caldo è rimasto. È cambiata la distanza tra ogni primo piano e il relativo sfondo: | Elemento | Primo piano | Sfondo | Rapporto | | ----------------------------- | ----------- | ------------ | -------- | | Testo principale | `#17332F` | Bianco caldo | 13,3:1 | | Testo secondario | `#4E6A65` | Bianco caldo | 5,8:1 | | Testo del pulsante principale | `#FFFFFF` | `#1F6D63` | 6,1:1 | | Titolo dell’header | `#17332F` | Verde chiaro | 11,6:1 | Le [WCAG 2.2 fissano un rapporto minimo di contrasto](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) di 4,5:1 per il testo normale e 3:1 per il testo grande al livello AA. Abbiamo lasciato intenzionalmente più margine al testo essenziale: una combinazione che supera il test sulla carta può comunque apparire debole con un font sottile, una dimensione ridotta o uno schermo luminoso all’aperto. GoodBarber consente di partire da un tema integrato, generare una palette o crearne una da zero. Il vantaggio non è il numero di campioni, ma il loro riutilizzo. Testo dell’header e del corpo, separatori, pulsanti e stati di navigazione possono ricevere ruoli coerenti in tutte le sezioni. La [documentazione Stile dell’app](https://it.goodbarber.com/help/shop/definire-l-identita-visiva-dell-app-r87/stile-dell-app-impostazioni-di-design-essenziali-a317/) spiega come si propagano queste scelte globali. Una palette leggibile è un ottimo punto di partenza, non un certificato di accessibilità. Controlla ogni reale combinazione tra primo piano e sfondo, compresi stati selezionati, sovrapposizioni, immagini e personalizzazioni a livello di sezione. ## Passaggio 2: impostare tipografia e spaziatura leggibili ![](https://cmsphoto.ww-cdn.com/superstatic/81312/art/grande/97759884-68053385.jpg?v=1787262317.3780568) Il contrasto ha reso visibili le parole. Dimensione e spaziatura le hanno rese comode da leggere. Abbiamo selezionato il tema di font Formateca, che abbina Work Sans per i titoli a Manrope per il corpo. Poi abbiamo usato il cursore tipografico globale per ricostruire la gerarchia: il corpo è passato da 10 px a 16 px, il titolo principale ha raggiunto 30 px e il contenuto principale ha ritrovato margini di 16 px. La scala tipografica globale di GoodBarber regola proporzionalmente otto livelli di testo. Questo aiuta a mantenere una gerarchia coerente tra le schermate, ma non garantisce un risultato accessibile. Verifica dimensioni, ritorni a capo e interlinea nell’app generata. Le WCAG non prescrivono una dimensione minima universale per il corpo del testo. I 16 px sono il valore scelto per questa interfaccia, non una soglia di conformità. Un testo più grande richiede anche più spazio; altrimenti le card si affollano e le etichette vanno a capo in modo scomodo. Infine, prova l’app con la dimensione di testo preferita dall’utente. [Apple raccomanda di supportare l’ingrandimento del testo e Dynamic Type](https://developer.apple.com/design/human-interface-guidelines/accessibility), mentre i contenuti web devono restare utilizzabili quando il testo viene ridimensionato. Un’anteprima equilibrata nell’editor è solo il primo stato da controllare. ## Passaggio 3: fare in modo che le etichette di navigazione descrivano la destinazione ![](https://cmsphoto.ww-cdn.com/superstatic/81312/art/grande/97759884-68053386.jpg?v=1787262319.3340669) In questo confronto prima e dopo, la TabBar originale mostrava “Videos”, “Podcasts” e “Navigation”. Queste etichette descrivevano formati o meccanismi dell’interfaccia, non ciò che una persona della community di yoga poteva fare dopo. Le abbiamo rinominate **Classes**, **Audio** e **More**. La struttura non è cambiata, ma la scelta è diventata più semplice: seguire una lezione, scegliere una sessione audio o aprire le altre sezioni. Le [linee guida di accessibilità Android](https://developer.android.com/guide/topics/ui/accessibility/views/principles-views) raccomandano etichette utili e descrittive per gli elementi interattivi, perché servizi come TalkBack possono annunciarne i nomi di accessibilità. Modificare il titolo visibile migliora la navigazione visiva; resta comunque necessario verificare ciò che il componente generato espone realmente a VoiceOver e TalkBack. Mantieni le etichette brevi, univoche e orientate all’attività. Abbina le icone al testo quando lo spazio lo consente. Un test semplice: se le icone sparissero, le parole indicherebbero ancora dove porta ogni tocco? ## Passaggio 4: rendere utilizzabili controlli e contenuti L’accessibilità fallisce quando il contenuto è visibile ma un controllo è difficile da toccare, oppure quando un media essenziale esclude un canale sensoriale. Inizia dalle aree touch. [Android raccomanda un’area focalizzabile di almeno 48 × 48 dp](https://developer.android.com/guide/topics/ui/accessibility/views/apps-views) per gli elementi interattivi. Nella PWA, il criterio [Dimensione del target (minima)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html) delle WCAG 2.2 stabilisce un minimo di 24 × 24 pixel CSS al livello AA, con le eccezioni previste. L’icona visibile può essere più piccola della sua area operabile, ma i target vicini devono restare distinti. Esamina poi come viene comunicato il significato. Errori, avanzamento e disponibilità richiedono segnali percepibili dagli utenti. Le immagini informative hanno bisogno di alternative testuali utili, i video significativi di sottotitoli e i contenuti solo audio di una trascrizione o equivalente. Sono decisioni editoriali che un design coerente non può automatizzare al posto tuo. GoodBarber centralizza gerarchia, colori e forma dei pulsanti tramite Stile dell’app. Usa questi controlli per ridurre le incoerenze, quindi verifica dimensione dei target, focus, etichette e stati nelle versioni iOS, Android e PWA generate. ## Passaggio 5: usare movimento e feedback aptico con intenzione Lotus Yoga utilizzava sia il feedback aptico sia un’animazione di apertura. In **La mia app > Stile dell'app**, abbiamo disattivato l’effetto decorativo di apertura mantenendo il feedback aptico nelle app native. GoodBarber offre anche effetti di scorrimento nella stessa area; le [opzioni di design aggiuntive dello Stile dell’app](https://it.goodbarber.com/help/shop/definire-l-identita-visiva-dell-app-r87/stile-dell-app-opzioni-di-design-aggiuntive-a511/) spiegano dove si trovano questi controlli. Questa scelta non è una prescrizione universale di accessibilità. Il movimento può spiegare un cambiamento di stato e il feedback aptico può confermare un’azione senza aggiungere confusione visiva. La domanda è se l’effetto trasmetta informazioni utili. In caso contrario, un’impostazione più calma è più facile da giustificare. Non dare per scontato che modificare l’impostazione nell’editor dimostri il supporto alla riduzione del movimento. Controlla l’app pubblicata con le preferenze di movimento del dispositivo attive e conferma che le attività complete abbiano ancora senso senza l’effetto. ## Passaggio 6: testare percorsi completi nelle app native e nella PWA ![](https://cmsphoto.ww-cdn.com/superstatic/81312/art/grande/97759884-68053389.jpg?v=1787262321.2900767) Questa versione finale è più facile da leggere e navigare senza perdere il carattere tranquillo del brand. Soprattutto, i miglioramenti sono sistemici: una sola palette, scala tipografica e struttura di spaziatura può migliorare molte schermate contemporaneamente. L’anteprima mostra colore, gerarchia, spaziatura, etichette e stati visibili. Non può stabilire se ogni annuncio dello screen reader sia utile, se il focus si muova in modo logico o se un percorso completo resti utilizzabile con un metodo di input alternativo. Prima della pubblicazione: - Percorri i flussi iOS principali con VoiceOver e quelli Android con TalkBack senza guardare lo schermo. - Aumenta la dimensione del testo di sistema e controlla tagli, sovrapposizioni, controlli nascosti e contenuti persi. - Controlla che pulsanti, link, moduli e menu abbiano nomi, ruoli, stati e un ordine di focus chiari. - Testa la PWA con navigazione da tastiera, zoom del browser e diverse dimensioni della finestra. Gli strumenti automatici rilevano problemi utili. Non capiscono se un’etichetta abbia senso, se un’istruzione sia cognitivamente chiara o se completare un’attività sia frustrante. I test manuali — idealmente con persone con disabilità — restano essenziali. ## Come GoodBarber aiuta a creare una base più accessibile Il vantaggio di un design system è il suo effetto moltiplicatore. GoodBarber costruisce le schermate da fondazioni condivise e componenti riutilizzabili. Colore, tipografia, spaziatura, forme e navigazione sono regole riutilizzate in tutta l’app, non decorazioni isolate. Puoi [esplorare il Design System di GoodBarber](https://it.goodbarber.com/uxdesign/) per vedere come questi livelli lavorano insieme. Questo effetto moltiplicatore crea anche una chiara divisione delle responsabilità: | GoodBarber aiuta a centralizzare | Devi ancora verificare | | ---------------------------------------------- | --------------------------------------------------------------- | | Ruoli colore globali | Combinazioni di contrasto reali e segnali non basati sul colore | | Gerarchia tipografica a otto livelli | Ingrandimento del testo, ritorni a capo e tagli | | Margini, spaziatura e stili dei pulsanti | Usabilità delle aree touch su dispositivi reali | | Struttura di navigazione ed etichette visibili | Nomi di accessibilità, ruoli, stati e ordine del focus | | Animazioni e feedback aptico nativo | Comportamento con le preferenze di accessibilità del sistema | | Output iOS, Android e PWA | Percorsi completi, contenuti e integrazioni di terze parti | Il Design System di GoodBarber elimina una parte del lavoro ripetitivo legato all’accessibilità applicando regole condivise di tipografia, colore, spaziatura e componenti in tutta l’app. Devi comunque validare l’interfaccia e i contenuti risultanti su ogni piattaforma. ## FAQ **Le WCAG si applicano alle app mobili native?** Le WCAG sono state scritte per i contenuti web, ma principi e criteri di successo sono ampiamente usati nel lavoro sull’accessibilità mobile. La bozza WCAG2Mobile del W3C spiega come applicare i criteri di livello A e AA delle WCAG 2.2 alle app mobili native, web e ibride. Le linee guida sono informative: non costituiscono una norma mobile separata né una garanzia di conformità legale. **Un app builder può rendere automaticamente accessibile un’app?** No. Componenti riutilizzabili, valori predefiniti leggibili e regole di design globali possono creare una base più solida, ma l’accessibilità dipende anche da configurazione, contenuti, funzioni di terze parti e percorsi completi. L’app generata deve comunque essere testata. **Cosa devo testare per primo in un’app mobile esistente?** Inizia dai percorsi che gli utenti non possono evitare: apertura dell’app, navigazione, accesso, ricerca dei contenuti e completamento dell’azione principale. Provali con uno screen reader, testo ingrandito e movimento ridotto, poi controlla aree touch, errori nei moduli e alternative ai media. **Qual è il contrasto minimo del testo per un’app mobile?** Il livello AA delle WCAG 2.2 stabilisce un rapporto minimo di contrasto di 4,5:1 per il testo normale e 3:1 per il testo grande. Queste soglie sono comunemente usate anche per valutare le interfacce mobili tramite le linee guida WCAG2Mobile. Considerale un punto di partenza, non un obiettivo di design. **Dove posso modificare queste impostazioni in GoodBarber?** Apri **La mia app > Stile dell'app** per gestire colori globali, font, margini, pulsanti, animazioni e feedback aptico. Le etichette e i layout di navigazione si configurano nella struttura dell’app. Controlla il risultato nell’anteprima mentre lavori, poi testa le versioni iOS, Android e PWA generate prima della pubblicazione. Un’app accessibile non è uno stile visivo particolare. È una serie di decisioni che permette a più persone di percepire i contenuti, comprendere l’interfaccia e completare l’attività. [Crea la tua app con GoodBarber](https://it.goodbarber.com/create), costruisci questa base una volta sola e migliorala con dati raccolti da utenti reali. ![Marc Leonardi](https://blog.goodbarber.com/_public/profile/d4/d4a7d2d89eb08037d76fc10910f1f708ee738ec4-default.jpg) Informazioni sull'autore[Marc Leonardi](https://it.goodbarber.com/blog/author/marc-leonardi/)Backend & DevOps Engineer Sono un Backend & DevOps Engineer in GoodBarber, dove lavoro sui sistemi e sull’infrastruttura che supportano la nostra piattaforma no-code per la creazione di applicazioni. Sviluppo e gestisco servizi backend, API e infrastrutture, con particolare attenzione ad affidabilità, scalabilità e automazione. Scrivo di backend engineering, DevOps, infrastruttura e delle sfide tecniche legate alla gestione di una piattaforma su larga scala. [Scopri di più](https://it.goodbarber.com/blog/author/marc-leonardi/) [![LinkedIn](https://portal.ww-cdn.com/portal_static/svg/base2021/linkedin.3ed8162e2a2b.svg)](https://www.linkedin.com/in/marc-leonardi-7bbab321b/)