Guida alla Scala del Testo su Dispositivi Mobili

Le applicazioni mobili devono conformarsi alla norma WCAG 1.4.4 Ridimensionamento del Testo e scalare il contenuto per garantire che non vi siano perdite di informazioni o funzionalità per gli utenti che richiedono dimensioni dei caratteri più grandi. Questa guida copre i modi consigliati per supportare la scala del testo sia su piattaforme iOS che Android.

Caratteristiche Specifiche per la Piattaforma

iOS - Tipo Dinamico

Il Tipo Dinamico è una funzione di accessibilità su iOS che consente di scalare le dimensioni dei caratteri a livello di dispositivo in base alle preferenze dell'utente. Trova questa opzione sotto Impostazioni Accessibilità sul dispositivo. Leggi di più da Apple su Visualizzazione del Testo qui.

Android - Scala del Testo e del Display

Per i dispositivi Android dalla versione 13 in poi, è possibile cambiare le dimensioni preferite del testo e del contenuto nelle impostazioni di accessibilità. Gli utenti possono regolare sia le dimensioni dei caratteri che quelle del display indipendentemente. Leggi di più su come modificare queste impostazioni in la guida di supporto di Google per le impostazioni di testo e display.

Preparazione delle Viste

Assicurarsi che il Contenuto Possa Scorrere

iOS: Quando il testo viene scalato a dimensioni di carattere maggiori, un contenuto sostanziale potrebbe essere spostato fuori dallo schermo. Implementa un UIScrollView o ScrollView su qualsiasi schermo che contenga contenuti.

Android: Usa un elemento ScrollView come contenitore per elementi di layout (constraint, lineare, relativo). Gli ScrollViews non scorreranno fino a quando l'altezza (o la larghezza, per lo scorrimento orizzontale) dello schermo non sarà riempita.

Eccezioni:

• Android: RecyclerViews non devono essere inseriti all'interno di un ScrollView. Consenti agli elementi di espandersi verticalmente o orizzontalmente.
• Android: Gli elementi di navigazione (barre inferiori, tab, toolbar) dovrebbero essere allo stesso livello del contenitore ScrollView, non al suo interno.

Assicurarsi che il Contenuto Possa Espandersi

iOS: Utilizza contentHuggingPriority, contentCompressionResistancePriority, greaterThanOrEqualTo e lessThanOrEqualTo per permettere alle viste di espandersi. Limita l'impostazione di altezza e larghezza costante per le viste contenenti contenuti.

Android: La maggior parte dei problemi di ridimensionamento del testo può essere risolta non limitando l'altezza o la larghezza di una vista. Permetti a TextView di espandersi con i vincoli impostati. Usa wrap_content per l'altezza e match_parent o 0dp per la larghezza.

Considerazioni Specifiche per il Layout

Android ConstraintLayout: Imposta la larghezza della vista su match_parent e l'altezza su wrap_content, o utilizza la larghezza 0dp per riempire lo spazio tra i vincoli. Assicurati sempre che i componenti possano espandersi verticalmente.

Android RelativeLayout: Definisci linee guida di inizio e fine per gli elementi fratelli per garantire che i componenti rimangano sullo schermo.

Android LinearLayout: Può adattarsi a dimensioni di contenuto variabili se all'interno di un ScrollView e non imposti l'altezza match_parent. Usa android:minHeight per requisiti di altezza specifici.

Imposta il Numero di Linee

iOS: Imposta la proprietà numberOfLines su 0 per qualsiasi testo con potenziale di traboccamento. Per UIButton, imposta numberOfLines su 0 sul suo titleLabel.

Android: Usa SP (pixel indipendenti dalla scala) per tutto il testo, non DP (pixel indipendenti dalla densità). Puoi utilizzare il linter di accessibilità di Android Studio per rilevare problemi di utilizzo di SP.

Implementazione

Implementazione iOS

Viste SwiftUI (iOS 14+)

Utilizzo di Font Predefiniti:

.font(.system(.largeTitle, design: .rounded))

Utilizzo di Font Personalizzati:

.font(.custom("FontName", size: 16, relativeTo: .body))

Viste UIKit

Utilizzo di Font Predefiniti:

label.font = UIFont.preferredFont(forTextStyle: .body)
label.adjustsFontForContentSizeCategory = true

Utilizzo di Font Personalizzati con UIFontMetrics:

guard let font = UIFont(name: "CustomFont", size: UIFont.labelFontSize) else { return }
label.font = UIFontMetrics(forTextStyle: .caption1).scaledFont(for: font)
label.adjustsFontForContentSizeCategory = true

Gestione Manuale del Tipo Dinamico:

// Via Notification Observer
NotificationCenter.default.addObserver(self,
                                       selector: #selector(changeTextSize),
                                       name: UIContentSizeCategory.didChangeNotification,
                                       object: nil)

// Via TraitCollection Override
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    // Handle font size changes based on preferredContentSizeCategory
}

Implementazione per Android

Configurazione di base:

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="16sp" />

Esempio di ConstraintLayout:

<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button Text"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

Modifica del testo tramite codice:

SpannableStringBuilder str = new SpannableStringBuilder(tv.getText());
str.setSpan(new AbsoluteSizeSpan(70, true), 15, 18, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
tv.setText(str);

Test e migliori pratiche

Linee guida generali

• Esegui test con diverse dimensioni di carattere per assicurarti che il contenuto venga visualizzato come previsto.
• Mantieni i titoli brevi e descrittivi per una migliore accessibilità.
• Assicurati che l'usabilità non venga compromessa da vincoli impropri.
• Verifica che tutti i controlli di testo supportino la scalabilità senza spingere fuori schermo il contenuto.

Considerazioni specifiche per piattaforma

iOS:

• Segui le linee guida tipografiche di Apple e la documentazione sul supporto al tipo dinamico.
• Usa i TextStyles appropriati (.body, .title1, .caption1, ecc.).
• Per SwiftUI, molte considerazioni sono fornite di default ma devono essere esaminate.

Android:

• Usa titoli brevi per le toolbar; evita il widget Toolbar per i titoli dinamici.
• Fornisci un'iconografia distinta con descrizioni di contenuto descrittive per la navigazione inferiore.
• Utilizza viste scorrevoli per componenti come tab, ViewPager e TabList.
• Non limitare l'altezza dei controlli.

Aspetti principali

1. Implementa sempre contenitori scorrevoli per il contenuto che potrebbe eccedere.
2. Usa unità di scala appropriate per la piattaforma (SP per Android, TextStyles per iOS).
3. Testa in modo approfondito con dimensioni di carattere diverse e impostazioni di accessibilità.
4. Permetti alle viste di espandersi piuttosto che costringerle a dimensioni fisse.
5. Segui le linee guida della piattaforma per un'esperienza utente ottimale.