Guida per il ridimensionamento del testo su dispositivi mobili

Le applicazioni mobili devono essere conformi a WCAG 1.4.4 Ridimensionare il testo e adattare il contenuto per garantire che non vi sia alcuna perdita di informazioni o funzionalità per gli utenti che necessitano di dimensioni di carattere più grandi. Questa guida illustra i metodi consigliati per supportare il ridimensionamento del testo sulle piattaforme iOS e Android.

Funzionalità Specifiche Della Piattaforma

iOS - Dynamic Type

Dynamic Type è una funzionalità di accessibilità di iOS che consente di adattare le dimensioni dei caratteri all'intero dispositivo in base alle preferenze dell'utente. Può trovare questa opzione nelle Impostazioni di accessibilità del dispositivo. Può approfondire qui la documentazione Apple su Text Display.

Android - Ridimensionamento del Testo e della Visualizzazione

Per i dispositivi Android 13 e versioni successive, è possibile modificare le dimensioni preferite del testo e del contenuto nelle impostazioni di accessibilità. Gli utenti possono regolare in modo indipendente sia la dimensione del carattere che quella dello schermo. Per ulteriori informazioni su come modificare queste impostazioni, consulta la guida di supporto di Google per le impostazioni di testo e visualizzazione.

Preparazione delle viste

Assicurati che il contenuto possa scorrere

iOS: Quando il testo viene ridimensionato a caratteri più grandi, è possibile che contenuti sostanziali vengano spostati fuori dallo schermo. Implementa un UIScrollView o ScrollView su qualsiasi schermata con contenuto.

Android: Usa un elemento ScrollView come contenitore per gli elementi di layout (vincolo, lineare, relativo). Le ScrollView non scorreranno finché l'altezza dello schermo (o la larghezza, per lo scorrimento orizzontale) non è completamente riempita.

Eccezioni:

• Android: RecyclerViews non è necessario che sia incorporato all'interno di un ScrollView. Consenti agli elementi di espandersi verticalmente o orizzontalmente.
• Android: Gli elementi di navigazione (barre inferiori, schede, barre degli strumenti) devono essere allo stesso livello del contenitore ScrollView, non al suo interno.

Assicurarsi che i contenuti possano espandersi

iOS: Utilizzare contentHuggingPriority, contentCompressionResistancePriority, greaterThanOrEqualTo e lessThanOrEqualTo per consentire l'espansione delle viste. Eviti di impostare altezza e larghezza fisse per le view che contengono contenuti.

Android: La maggior parte dei problemi di ridimensionamento del testo può essere risolta evitando di limitare l'altezza o la larghezza di una view. Consenti TextView di espandersi con i vincoli impostati. Utilizzi wrap_content per l'altezza e match_parent o 0dp per la larghezza.

Considerazioni specifiche sul layout

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

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

Android LinearLayout: Può adattarsi alle variazioni delle dimensioni del contenuto se utilizzato in un ScrollView e non viene impostata l'altezza match_parent. Utilizzare 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 overflow. Per UIButton, impostare numberOfLines su 0 sul suo titleLabel.

Android: utilizzare SP (pixel indipendenti dalla scala) per tutto il testo, non DP (pixel indipendenti dalla densità). È possibile utilizzare il linter di accessibilità di Android Studio per individuare i problemi di utilizzo di SP.

Implementazione

Implementazione su iOS

SwiftUI Views (iOS 14+)

Utilizzo di font predefiniti:

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

Utilizzo Dei 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 di Dynamic Type:

// 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 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 Testo Tramite Codice:

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

Testing e Buone Pratiche

Linee guida generali

Eseguire test con diverse dimensioni di carattere per garantire che il contenuto venga visualizzato come previsto. Mantenga i titoli brevi e descrittivi per favorire l'accessibilità. Assicuri che l'usabilità non sia influenzata da vincoli impropri. Verificare che tutti i controlli di testo supportino il ridimensionamento senza spostare il contenuto fuori dallo schermo

Considerazioni specifiche della piattaforma

iOS:

• Seguire le linee guida tipografiche di Apple e la documentazione relativa a Dynamic Type.
• Utilizzare gli appropriati TextStyles (.body, .title1, .caption1, ecc.).
• Per SwiftUI, molte considerazioni sono fornite di default ma è opportuno esaminarle.

Android:

• Utilizzare titoli brevi per le toolbar; evitare il widget Toolbar per titoli dinamici.
• Fornire un'iconografia distintiva con descrizioni dei contenuti descrittive per la navigazione inferiore.
• Utilizzare viste scrollabili per le schede, ViewPager e i componenti TabList.

Non limitare l'altezza dei controlli.

Punti chiave

1. Implementare sempre contenitori scorrevoli per i contenuti che potrebbero superare lo spazio disponibile.
2. Utilizzare unità di misura appropriate alla piattaforma (SP per Android, TextStyles per iOS).
3. Esegua test approfonditi su diverse dimensioni di carattere e impostazioni di accessibilità.
4. Consentire l'espansione delle viste anziché limitarle a dimensioni fisse.
5. Segua le linee guida della piattaforma per un'esperienza utente ottimale.