Rendi più accessibili le app

Cerca di rendere la tua app per Android utilizzabile da tutti, incluse le persone con esigenze di accessibilità.

I dispositivi Android vengono utilizzati da persone con disabilità visive, daltonismo, disabilità uditive, disabilità motorie, disabilità intellettive e molte altre disabilità. Quando sviluppi app tenendo conto dell'accessibilità, migliori l'esperienza utente per le persone con esigenze di accessibilità.

Questa pagina presenta le linee guida per l'implementazione degli elementi chiave dell'accessibilità, in modo che tutti possano utilizzare la tua app più facilmente. Per indicazioni più approfondite su come rendere la tua app più accessibile, consulta Principi per migliorare l'accessibilità delle app.

Aumenta la visibilità del testo

Per ogni insieme di testo all'interno dell'app, consigliamo che il contrasto di colore, ovvero la differenza di luminosità percepita tra il colore del testo e il colore dello sfondo dietro il testo, sia superiore a una soglia specifica. La soglia esatta dipende dalle dimensioni del carattere del testo e dal fatto che il testo sia visualizzato in grassetto:

  • Se il testo è inferiore a 18 sp o se è in grassetto e inferiore a 14 sp, utilizza colori di primo piano e di sfondo che generano un rapporto di contrasto dei colori di almeno 4, 5:1.
  • Per tutti gli altri testi, imposta il rapporto di contrasto del colore su almeno 3:1.

L'immagine seguente mostra due esempi di contrasto di colore tra testo e sfondo:

Due esempi della parola "Testo" su sfondi colorati. L'esempio a sinistra ha un contrasto di colore basso tra il testo e lo sfondo, mentre l'esempio a destra ha un contrasto di colore sufficiente.
Figura 1. Contrasto di colore inferiore a quello consigliato (a sinistra) e sufficiente (a destra).

Per controllare il contrasto di colore tra testo e sfondo nella tua app, utilizza uno strumento di controllo del contrasto di colore online o l'app Accessibility Scanner.

Utilizza controlli grandi e semplici

La UI della tua app è più facile da usare se i relativi controlli sono più facili da vedere e toccare. Per le interfacce touch, consigliamo che ogni elemento UI interattivo abbia un'area attivabile o una dimensione del touch target di almeno 48 x 48 dp. Più grande è, meglio è.

In Jetpack Compose, molti componenti Material integrati come Button, IconButton e ListItem applicano già queste dimensioni minime. Tuttavia, quando crei elementi interattivi personalizzati, devi impostare le dimensioni manualmente.

Nello snippet seguente, un piccolo elemento UI viene reso accessibile assegnandogli un touch target più grande:

@Composable
private fun LargeBox() {
    var clicked by remember { mutableStateOf(false) }
    Box(
        Modifier
            .size(100.dp)
            .background(if (clicked) Color.DarkGray else Color.LightGray)
    ) {
        Box(
            Modifier
                .align(Alignment.Center)
                .clickable { clicked = !clicked }
                .background(Color.Black)
                .sizeIn(minWidth = 48.dp, minHeight = 48.dp)
        )
    }
}

Per saperne di più sulle dimensioni dei touch target, consulta Dimensioni minime dei touch target.

Descrivi ogni elemento UI

Per ogni elemento UI della tua app, includi una descrizione che ne spieghi lo scopo. Nella maggior parte dei casi, includi questa descrizione nell'attributo contentDescription dell'elemento, come mostrato nel seguente snippet di codice:

@Composable
private fun ShareButton(onClick: () -> Unit) {
    IconButton(onClick = onClick) {
        Icon(
            imageVector = Icons.Filled.Share,
            contentDescription = stringResource(R.string.label_share)
        )
    }
}

Tieni presente che non è necessario fornire un contentDescription per i componibili Text. I servizi di accessibilità di Android (come TalkBack) annunciano automaticamente il testo.

Quando aggiungi descrizioni agli elementi UI della tua app, tieni presente le seguenti best practice:

  • Utilizza le descrizioni per comunicare lo scopo e il risultato dell'interazione, non i dettagli visivi. Utilizza la proprietà di semantica Role (ad esempio Role.Button o Role.Switch) per esporre il tipo di un elemento UI. In questo modo, gli screen reader possono descrivere l'elemento correttamente.

  • Evita le ridondanze nelle descrizioni. Ad esempio, se la selezione di un pulsante comporta un'azione di "invio" nell'app, imposta la descrizione del pulsante su "Submit", non su "Submit button".

  • Ogni descrizione deve essere univoca. In questo modo, quando gli utenti di screen reader incontrano una descrizione di un elemento ripetuto, riconoscono correttamente che lo stato attivo è su un elemento che lo aveva già in precedenza. In particolare, ogni elemento di un elenco come LazyColumn deve avere una descrizione diversa, che rifletta i contenuti univoci di un determinato elemento, ad esempio il nome di una città in un elenco di località.

  • Utilizza l'API hideFromAccessibility per contrassegnare gli elementi puramente decorativi in modo che i servizi di accessibilità possano ignorarli. Se un elemento UI ha un parametro contentDescription, ma è puramente decorativo (ad esempio un Icon che fa parte di un altro elemento UI), passa null per evitare etichette ridondanti. Per casi d'uso più complessi, consulta Unione e cancellazione.

  • Testa il codice per assicurarti che la descrizione dei contenuti venga fornita come previsto. Android Lint, i test di Compose e gli strumenti di test manuali e automatici possono segnalare problemi comuni ed evidenziare problemi nell'implementazione.

Risorse aggiuntive

Per scoprire di più su come rendere la tua app più accessibile, consulta le seguenti risorse aggiuntive:

Codelab

Video

Visualizza contenuti