Accessibilità in Jetpack Compose

L'accessibilità è fondamentale per creare app inclusive che tutti possano utilizzare. Compose fornisce le basi per creare UI accessibili che rendano le tue app utilizzabili da chiunque, ovunque.

Concetti principali

  • Semantica: il sistema di rappresentazione del significato degli elementi dell'interfaccia utente per i servizi di accessibilità. Sono incluse proprietà come descrizioni, stati e azioni che un utente può eseguire.

  • Attraversamento: l'ordine in cui i servizi di accessibilità come TalkBack si spostano tra gli elementi sullo schermo. Puoi personalizzare questo ordine per migliorare l'esperienza utente.

  • Azioni di accessibilità: azioni specifiche che un utente può eseguire su un elemento dell'interfaccia utente, come clic, scorrimento e chiusura. L'app li comunica ai servizi di accessibilità.

Inizia

La base del modello e degli strumenti di accessibilità di Compose è la semantica. Per ulteriori informazioni, consulta la guida sulla semantica in Compose.

Durante lo sviluppo dell'app, tieni presente fin dall'inizio questi passaggi chiave per migliorare l'accessibilità dell'app Compose:

  • Considera le dimensioni minime dei touch target. Assicurati che gli elementi cliccabili e interattivi abbiano almeno 48 dp. È conforme alle linee guida per l'accessibilità di Material Design.
  • Aggiunta di etichette dei clic: descrivi il comportamento dei clic con il modificatore clickable o il modificatore semantics se non hai accesso diretto a clickable.
  • Descrizione degli elementi visivi:usa il parametro contentDescription per descrivere in modo testuale le icone e le immagini. Imposta contentDescription su null per gli elementi decorativi.
  • Definisci intestazioni: utilizza la proprietà di modifica semantics per contrassegnare gli elementi come intestazioni e semplificare la navigazione.
  • Ordine di attraversamento del controllo: utilizza isTraversalGroup per contrassegnare i gruppi di elementi che devono essere letti insieme. Utilizza traversalIndex per personalizzare ulteriormente l'ordine degli elementi all'interno di questi gruppi.

Per saperne di più, consulta la guida dedicata ai passaggi chiave per migliorare l'accessibilità di Compose.

Strumenti

  • TalkBack: lo screen reader di Google per Android. Attivalo per testare come funziona la semantica della tua app per gli utenti che fanno affidamento su tecnologie per la disabilità.
  • Controllo layout: visualizza ed esegui il debug dell'albero della semantica dell'app.
  • API di test di Compose: scrivi test che interagiscono con gli elementi semantici per dichiarare l'accessibilità delle tue UI di Compose.

Codelab

Per scoprire di più sul supporto dell'accessibilità nel codice di Compose, segui il codelab sull'accessibilità in Jetpack Compose.

Risorse aggiuntive