Accessibilità nelle applicazioni mobili: guida completa con esempi

[La teoria dell'accessibilità è bellissima, ma ciò di cui gli sviluppatori e i designer hanno veramente bisogno sono degli esempi. Vedere come funziona il codice, come si comporta l'interfaccia e dove le aziende commettono errori (e fanno le cose bene) è il modo migliore per imparare.

In questa guida pratica, lasceremo il campo delle idee e approfondiremo esempi reali di implementazione dell'accessibilità nelle applicazioni mobili (iOS e Android), analizzando i modelli di interfaccia utente e mostrando come renderli inclusivi.

Esempio 1: il pulsante "Ghost" (pulsanti icona)

Hai presente quell'icona della lente d'ingrandimento nell'angolo dello schermo per cercare qualcosa? O l'icona a forma di ingranaggio per le impostazioni? Per un utente vedente è sufficiente l'icona. Un utente non vedente che utilizza uno screen reader (VoiceOver/TalkBack), se il pulsante non ha un'etichetta (etichetta), sentirà semplicemente: "Pulsante".

"Pulsante" non dice nulla. Pulsante cosa? Per eliminare l'account? Per comprare?

Nel modo sbagliato (Inaccessibile)

<!-- Android Layout -->
<ImageButton
    android:id="@+id/btn_settings"
    android:src="@drawable/ic_gear"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Lo screen reader leggerà il nome della classe o semplicemente il "pulsante senza etichetta".

La strada giusta (accessibile)

<!-- Android Layout -->
<ImageButton
    android:id="@+id/btn_settings"
    android:src="@drawable/ic_gear"
    android:contentDescription="@string/settings_button_description"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Su iOS (SwiftUI):

// Acessível
Button(action: openSettings) {
    Image(systemName: "gear")
}
.accessibilityLabel("Configurações")

Risultato: l'utente sentirà "Impostazioni, pulsante". Semplice ma essenziale.

Esempio 2: feedback sugli errori nei moduli

Compila un modulo, fai clic su "Invia" e non succede nulla. Il campo della password è diventato rosso, ma non l'hai visto perché sei daltonico (Protanopia).

Regola d'oro: non usare mai solo il colore per trasmettere informazioni.

Nel modo giusto

Oltre a rendere rosso il bordo, aggiungi un'icona di avviso e un messaggio di testo esplicativo sotto il campo.

❌ Pessimo: bordo rosso.
✅ Buono: Bordo rosso + Icona ⚠️ + Testo "La password deve essere lunga 8 caratteri".

Inoltre, per gli screen reader, lo stato attivo deve essere spostato sul campo dell'errore oppure l'errore deve essere annunciato.

// Android: Anunciar erro para TalkBack
passwordInputLayout.error = "Senha muito curta"
passwordInputLayout.announceForAccessibility("Erro: Senha muito curta")

Esempio 3: toccare i target

Hai mai provato a fare clic su quella piccola "x" per chiudere un annuncio e alla fine hai finito per fare clic sull'annuncio? Questo è frustrante per tutti, ma impossibile per chi ha tremori alle mani (Parkinson, per esempio).

Le linee guida WCAG e Apple/Google consigliano un'area di tocco minima di 44x44 dp (iOS) o 48x48 dp (Android).

Suggerimento per l'implementazione: non è necessario ingrandire visivamente l'icona. Puoi solo aumentare l'imbottitura invisibile attorno ad esso.

/* CSS (React Native / Web App) */
.close-button {
  width: 20px;   /* Ícone visual pequeno */
  height: 20px;
  padding: 12px; /* Área de toque grande */
  box-sizing: content-box; /* Garante que o padding some ao tamanho */
}

Esempio 4: immagini decorative e informazioni

Non tutte le immagini necessitano di una descrizione. Se descrivi tutto, inquinerai l'esperienza di ascolto dell'utente.

Immagine informativa: una foto di un prodotto che stai vendendo.
- Azione: alt="Tênis de corrida azul com solado branco".
Immagine decorativa: un'icona a forma di freccia accanto al testo "Leggi di più" o un'onda grafica nella parte inferiore dell'intestazione.
- Azione: Nascondi dallo screen reader.

Nel Fluttuare:

// Imagem Decorativa (Invisível para Semântica)
ExcludeSemantics(
  child: Image.asset('background_wave.png'),
)

// Imagem Informativa
Semantics(
  label: 'Logo da Empresa',
  image: true,
  child: Image.asset('logo.png'),
)

Esempio 5: stato di caricamento

L'utente fa clic su "Paga". Lo schermo si blocca. Appare uno spinner che gira. Per chiunque lo veda, è chiaro: "Si sta caricando". Per chi non lo vede, il silenzio è angosciante. "Si è bloccato? L'app è stata chiusa? La mia connessione Internet non ha funzionato?"

Fornire sempre un feedback acustico per gli stati di carica.

Android: usa ProgressBar con android:stateDescription="Carregando pagamento...".
iOS: utilizzare UIAccessibility.post(notification: .announcement, argument: "Processando pagamento, aguarde.").

Conclusione

L’accessibilità non significa memorizzare regole astratte. Si tratta di capire come il codice si traduce in esperienza per esseri umani diversi.

Applicando questi standard (etichette dei pulsanti, colori ridondanti, aree touch generose, semantica corretta e feedback di stato), risolvi il 90% delle barriere che impediscono alle persone di utilizzare la tua app.

Il codice migliore non è il più complesso. È quello che funziona per il maggior numero di persone.