Accessibilità in Android: approfondimenti per sviluppatori e guida all'implementazione

Nel mondo ci sono circa 285 milioni di persone con disabilità visive. Pertanto, quando si progetta una nuova applicazione o si considera un rinnovamento del design, è sicuramente una buona idea adattare la propria app alle esigenze di questo ampio gruppo di utenti. La personalizzazione delle applicazioni per le persone ipovedenti migliora l'esperienza di tutti i tuoi utenti. Quali sono gli altri motivi per considerare di migliorare l'accessibilità della tua app e come farlo? Si prega di trovare tutte le risposte qui sotto!

In che modo le persone ipovedenti utilizzano le app?

Uno screen reader è uno strumento per eseguire applicazioni (o semplicemente sfogliare lo schermo dello smartphone) per non vedenti e ipovedenti. Lo screen reader più popolare per Android è TalkBack . Con questo strumento, l'utente esegue l'input tramite gesti come scorrere o trascinare.

Di solito, l'output è un feedback vocale. In TalkBack , abbiamo due modalità di input gestuale:

• Esplorazione al tocco , in cui trascini il dito sullo schermo.
• Navigazione lineare , in cui scorri verso sinistra e verso destra con il dito fino a trovare l'elemento di interesse.

Una volta arrivato all'oggetto che ti interessa, puoi toccarlo due volte per attivarlo. Vuoi saperne di più su come eseguire TalkBack? Si prega di leggere il seguente articolo.

Principi dell'app accessibile

Per consentire alle persone con disabilità visive di utilizzare la nostra applicazione, dobbiamo prima comprendere i principi che dobbiamo seguire durante la progettazione. Pertanto, prima di passare alla sezione relativa all'implementazione, discutiamo i presupposti più importanti.

Impaginazione e tipografia

La parte visiva dell'app è fondamentale. I pulsanti correttamente implementati e la gestione del testo sono uno dei fattori più importanti che rendono accessibile l'applicazione.

Toccare i bersagli

I touch target sono parti dello schermo che rispondono all'interazione dell'utente. La raccomandazione principale è creare target touch con una risoluzione di almeno 48 dp x 48 dp. Leggerete di più su questo nel prossimo capitolo.

Colore e contrasto

Il World Wide Web ha creato linee guida sull'accessibilità del contrasto cromatico per aiutare e assistere gli utenti con carenze di colore. Secondo la documentazione, gli aspetti critici relativi all'accessibilità del contrasto cromatico sono:

• Rapporto : il testo e gli elementi interattivi devono avere un rapporto di contrasto del colore di almeno 4,5:1.
• Il colore come indicatore : il colore non dovrebbe essere l'unico indicatore per gli elementi interattivi. Sarebbe meglio se anche tu sottolineassi i link al passaggio del mouse o contrassegnassi i campi obbligatori con un asterisco.
• Daltonismo: il daltonismo rosso/verde è il più comune. Quindi, dovresti evitare il verde sul rosso o il rosso sul verde. Per lo stesso motivo, evita di utilizzare il rosso e il verde per gli indicatori "cattivo" e "buono".

Tipografia

Gli utenti possono aumentare la dimensione del carattere per migliorare la leggibilità . Nei dispositivi Android, è un'opzione di sistema utilizzata di frequente, quindi assicurati che ci sia spazio sufficiente per caratteri grandi e stranieri.

Testo di accessibilità

Il testo di accessibilità è sia testo visibile (ad es. etichette degli elementi dell'interfaccia utente, testo su pulsanti, collegamenti e moduli) sia descrizioni invisibili (descrizioni di contenuto, che possono fornire maggiori informazioni sul componente descritto).

Quali sono i casi d'uso più comuni del testo di accessibilità ?

Tipi e stati di controllo

Le utilità per la lettura dello schermo, come TalkBack, possono annunciare automaticamente il tipo o lo stato di un controllo pronunciando il nome del controllo o emettendo un suono.

Indicazione degli elementi mediante l'azione

I verbi di azione indicano cosa fa un elemento o un collegamento quando lo tocchi e descrivono cosa fa una vista.

Elementi con cambiamenti di stato

Nel caso di icone che alternano valori o stati, l'utilità per la lettura dello schermo descrive un'icona in base a come viene presentata all'utente. Per ulteriori esempi, leggere le linee guida per la progettazione dei materiali.

Riepilogo

Questo capitolo ti ha insegnato come adattare il design alle persone ipovedenti e non vedenti. Finora abbiamo trattato il layout, la tipografia e l'accessibilità del testo . Passiamo ora ai principi della loro attuazione.

Implementazione dell'accessibilità

Nella sezione seguente, mi concentrerò sugli aspetti chiave dell'implementazione dell'accessibilità alla tua app. Cominciamo!

Layout: tocca il target

Come ho accennato nella parte teorica, ogni elemento cliccabile dovrebbe avere almeno 48dp/48dp.

Ci sono diverse opzioni per farlo. Potresti:

• Determina i valori per gli attributi di larghezza e altezza come consigliato (48 dp/48 dp)
• Aggiungi spaziatura intorno alle icone
• Specificare i valori per gli attributi: MinWidth e/o minHeight
• Registra TouchDelegate.

Guarda un esempio dalla documentazione ufficiale di Google. Mostra l'elemento che ha la dimensione consigliata del touch target :

 <Pulsante Immagine 
   ...
   Android:minWidth="40dp"
   Android:minHeight="32dp"
   android:paddingLeft="4dp"

   android:paddingTop="8dp"
   Android:paddingRight="4dp"
   android:paddingBottom="8dp" />

Testo di accessibilità

Uno dei modi per allegare il testo di accessibilità agli elementi dell'interfaccia utente consiste nell'usare un attributo Android chiamato ContentDescription . Se non lo fornisci per un pulsante immagine, ad esempio, l'esperienza per un utente di TalkBack può essere stridente.

Guarda l'esempio:

 <!-- Il valore per la stringa seguente è "Cerca". -->
<Vista immagine
   ...
   android:contentDescription="@string/search" />

Per elementi decorativi come distanziatori e divisori, imposta il relativo attributo “android:contentDescription” su "null" . Se la tua app supporta solo i dispositivi che eseguono Android 4.1 (livello API 16) o versioni successive, puoi invece impostare gli attributi “android:importantForAccessibility” su "no" .

Assicurati di non includere il tipo di controllo o lo stato di controllo nella descrizione del contenuto. Android ha nativamente parole come pulsanti, selezionato, selezionato, ecc.

Tecniche di etichettatura

Di seguito puoi trovare una serie di buone pratiche per descrivere i componenti dell'interfaccia utente nella tua applicazione.

Componenti che si descrivono a vicenda

Se hai un componente che ti permette di fornire dei dati a (es. EditText), è bene avere un oggetto View che lo descriva (es. TextView). Questo è il motivo per cui è stato creato l'attributo "android:labelFor" . Si prega di dare un'occhiata all'esempio:

 <!-- Il testo dell'etichetta sarebbe "Nome:" -->
<Vista testo 
   ...
   androide:
   android:labelFor="@+id/nameEntry"
   android:text="@stringa/nome" />

<!-- Il testo di accessibilità sarà "Modifica testo per nome" -->
<Modifica testo 
   ...
   androide: />

<!-- Il testo dell'etichetta sarebbe "Cognome:" -->
<Vista testo 
   ...
   androide:
   android:labelFor="@+id/cognomeEntry"
   android:text="@stringa/cognome" />

<!-- Il testo di accessibilità sarà "Modifica testo per cognome" -->
<Modifica testo 
   ...
   androide: />

Raccolta di elementi correlati

Se la tua app ha elementi dell'interfaccia utente naturalmente correlati (come campi con informazioni su un libro), puoi organizzarli in gruppi usando un contenitore attivabile . Per fare ciò, imposta l'attributo “android:focusable” dell'oggetto contenitore su true.

In tal modo, TalkBack può presentare le descrizioni dei contenuti degli elementi interni, una dopo l'altra, in un unico annuncio. Il raggruppamento dei contenuti riduce la quantità di swipe che l'utente deve fare mentre ottimizza l'output vocale. Si prega di guardare l'esempio:

 <Layout lineare 
   ...
   androide:
   android:orientamento="verticale"
   android:focusable="true">

   <Vista testo
	  ...
       androide:
       android:text="@string/title"/>

   <Vista testo
	  ...
       androide:
       android:text="@string/author"/>

   <Vista testo
	  ...
       androide:
       android:text="@string/pages"/>
</Layout lineare>

Naturalmente, se il tuo contenitore ha viste nidificate, puoi anche applicare questa soluzione a loro. Ciò renderà la navigazione dell'applicazione ancora più accessibile.

Azioni di accessibilità

Quando la tua app supporta azioni come un clic, una pressione prolungata o uno scorrimento , devi adattare queste azioni alle persone con problemi di vista. Questo è ciò su cui ci concentreremo in questa parte dell'articolo.

Guarda come puoi implementarlo:

 ViewCompat.addAccessibilityAction(
   // Visualizza per aggiungere un'azione di accessibilità
   itemView,
   // L'etichetta che legge il servizio di accessibilità
   getString(R.stringa.save)
) { _, _ ->
   // Comando di accessibilità
   saveItem()
   VERO
}

Ciò si traduce in TalkBack che annuncia "Tocca due volte per archiviare" .

Con l'azione di accessibilità implementata, gli utenti possono ora accedere all'azione tramite il menu delle azioni. Ti parlerò un po 'più tardi della navigazione in questo menu. Ricorda: è essenziale consentire agli utenti di eseguire tutti i flussi all'interno della tua app in modo efficiente.

Widget

Questa sezione è breve ma molto importante. Quando crei il tuo componente dell'interfaccia utente, usa o estendi i widget forniti dal sistema che sono il più in basso possibile nella gerarchia di classi di Android. I widget forniti dal sistema in fondo alla gerarchia dispongono già della maggior parte delle funzionalità di accessibilità di cui la tua app ha bisogno. I principali includono:

• Azioni di accessibilità
• Caratteristiche
• Informazioni sullo stato.

Grazie a ciò, non avrai bisogno di scrivere da zero il supporto completo per l'accessibilità per un componente e ridurrai il rischio di errore.

Navigazione

TalkBack continua a crescere. Abbiamo usato due menu contestuali (globale e locale) non molto tempo fa per navigare nel nostro sistema smartphone. Ora, questi due menu sono diventati uno.

Il menu contestuale viene utilizzato per due scopi principali:

• Come suggerisce il nome, viene utilizzato per la navigazione. È possibile navigare tra parole, intestazioni, collegamenti, righe, contenuto unico o altri punti a seconda delle preferenze o delle capacità dell'applicazione.
• Il secondo scopo consente all'utente di modificare rapidamente le impostazioni ei controlli di TalkBack.

In questo menu puoi trovare una serie di azioni (menzionate nella sezione " Azione di accessibilità " sopra). Come si accede a questo menu? È molto semplice. Devi solo fare uno swipe verso l'alto e il gesto giusto.

Test di accessibilità

Nei progetti che ho sviluppato finora, ho beneficiato principalmente dei tre seguenti ausili: Accessibility scanner, Espresso e Lint. Naturalmente, hai molti più strumenti a tua disposizione. Consiglio vivamente di controllarli da soli. Puoi trovare tutta la documentazione necessaria qui.

Scanner per l'accessibilità

Questo strumento esegue la scansione dell'interfaccia utente e fornisce consigli per migliorare l'accessibilità delle applicazioni.

Accessibility Scanner consente a chiunque, non solo agli sviluppatori, di identificare rapidamente e facilmente alcuni comuni miglioramenti dell'accessibilità, ad esempio piccoli touch target, errori di contrasto per testo e immagini, descrizioni dei contenuti mancanti per widget senza etichetta, ecc. Se si desidera iniziare a utilizzare Accessibility Scanner o semplicemente cercare istruzioni più dettagliate, leggere la seguente documentazione.

Android Lint

Sono sicuro che la maggior parte di voi conosce questo strumento dal proprio lavoro quotidiano. Vale la pena ricordare che Android Studio fornisce anche avvisi su vari problemi di accessibilità e collegamenti a posizioni nel codice sorgente che contengono questi problemi.

Caffè espresso

Espresso è una libreria di test Android che ti consente di testare rapidamente e facilmente la tua interfaccia utente. Consente l'interazione con i componenti dell'interfaccia utente testati dell'applicazione e garantisce che si verifichino determinati comportamenti o siano soddisfatte le condizioni. Naturalmente, come parte del supporto per l'accessibilità, è possibile abilitare e configurare i test di accessibilità .

Riepilogo

Rendere accessibile la tua app non significa solo aprirla a nuovi utenti. Aiuta a migliorare la nostra vita quotidiana e rende il mondo più inclusivo. Spero che questo articolo ti abbia aiutato a conoscere l'accessibilità. Per ulteriori letture, non dimenticare di controllare la documentazione ufficiale.