Rendi più accessibili le app

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

Persone con problemi di vista, daltonismo, problemi di udito, problemi di destrezza, disabilità cognitive e molte altre disabilità utilizzano dispositivi Android. Quando sviluppi app tenendo presente l'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 più facilmente la tua app. Per indicazioni più approfondite su come rendere la tua app più accessibile, consulta Principi per migliorare l'accessibilità delle app.

Aumentare 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 generino un rapporto di contrasto del colore di almeno 4, 5:1.
• Per tutto il resto del testo, imposta il rapporto di contrasto del colore su almeno 3:1.

L'immagine seguente mostra due esempi di contrasto tra il colore del testo e quello dello sfondo:

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

Utilizzare controlli grandi e semplici

L'interfaccia utente della tua app è più facile da usare se i suoi controlli sono più facili da vedere e toccare. Per le interfacce touch, consigliamo che ogni elemento dell'interfaccia utente interattiva abbia un'area focalizzabile o una dimensione del touch target di almeno 48 dp x 48 dp. Più grande è, meglio è.

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

Nel seguente snippet, un piccolo elemento dell'interfaccia utente viene reso accessibile fornendogli 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)
        )
    }
}
AccessibilitySnippets.kt

Per ulteriori informazioni sulle dimensioni dei touch target, consulta Dimensioni minime dei touch target.

Descrivi ogni elemento dell'interfaccia utente

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

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

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

Quando aggiungi descrizioni agli elementi dell'interfaccia utente 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à semantica Role (come Role.Button o Role.Switch) per esporre il tipo di un elemento dell'interfaccia utente. In questo modo, gli screen reader possono annunciare correttamente l'elemento.

• Evita le ridondanze nelle descrizioni. Ad esempio, se la selezione di un pulsante causa l'esecuzione di un'azione "Invia" nella tua app, la descrizione del pulsante deve essere "Submit", non "Submit button".

• Ogni descrizione deve essere unica. In questo modo, quando gli utenti di screen reader incontrano una descrizione ripetuta di un elemento, riconoscono correttamente che lo stato attivo è su un elemento che era già attivo in precedenza. In particolare, ogni elemento all'interno di un elenco come LazyColumn deve avere una descrizione diversa, ognuna delle quali riflette i contenuti unici 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 etichettature ridondanti. Per casi d'uso più elaborati, vedi Unione e cancellazione.

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

Risorse aggiuntive

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

Codelab

• Accessibilità in Jetpack Compose

Video

• Crea UI più accessibili con Jetpack Compose

Visualizza contenuti

• Rendere le app più accessibili (visualizzazioni)