Testo Ritagliato

Cosa Cerchiamo

Il contenuto visibile degli elementi di testo statico non dovrebbe essere ritagliato, sia con la dimensione di testo predefinita che con dimensioni maggiori di Dynamic Type.

Esempio Fallimentare ❌

Esempio Superato ✅

A Colpo d'Occhio

• Questa regola ha un impatto serio sugli utenti
• Questa regola richiede iOS 17.0 o successivi e si applica agli elementi di testo statico che sono visibili e regolabili dagli sviluppatori
• Il testo statico non deve ritagliare il suo contenuto visibile nel suo stato attuale o quando viene ridimensionato
• Correggi consentendo al testo di avvolgere o crescere:
  • Imposta numberOfLines = 0 (UIKit), oppure
  • Rimuovere .clipped() / .lineLimit() (SwiftUI)

Impatto sugli Utenti

Gli utenti con disabilità visive, disabilità cognitive o che si affidano a dimensioni di testo maggiori tramite Dynamic Type potrebbero non essere in grado di accedere alle informazioni ritagliate. WCAG 1.4.4 (Ridimensiona Testo) richiede che il contenuto del testo rimanga visibile e utilizzabile quando l'utente ingrandisce il testo. Questa regola aiuta a cogliere il contenuto che è già stato ritagliato, così come il contenuto che verrebbe ritagliato se l'utente aumenta l'impostazione della dimensione del testo.

Conferma il Problema del Testo Ritagliato

1. Trova Accessibilità in iOS Impostazioni
2. Seleziona Schermo e Dimensione Testo
3. Attiva per selezionare la dimensione del testo più alta in accessibilità nel pannello Testo Più Grande
4. Osserva il cambiamento sullo schermo:
   • Inaccessibile: Il contenuto è ritagliato da questa vista
   • Accessibile: Il contenuto si avvolge, cresce verticalmente o può essere visualizzato scorrendo

Correggi Problemi

• Assicurati che i contenitori di testo regolabili dagli sviluppatori abbiano larghezza e altezza sufficienti per visualizzare l'intero contenuto, inclusi alla dimensione massima di Dynamic Type che intendi supportare
• Usa vincoli di Auto Layout che permettano al testo di avvolgersi o crescere verticalmente
• Imposta la proprietà numberOfLines sul testo a numberOfLines = 0
• Per il contenuto scorrevole, verifica che la vista di scorrimento stessa sia correttamente dimensionata in modo che il testo più lungo possa essere scorrevole e non venga troncato

UIKit

Per risolvere questo problema in UIKit, di solito sono necessari sia una correzione del testo che una correzione del layout insieme. Impostare numberOfLines su 0 consente all'etichetta di avvolgere, ma una costrizione di altezza fissa sull'etichetta o sul suo contenitore continuerà a tagliare il testo. Utilizzare anche costrizioni di altezza greaterThanOrEqualToConstant, in modo che il contenitore possa effettivamente crescere.

• Imposta numberOfLines = 0 su UILabel per consentire l'avvolgimento su più linee (correzione del testo)

  label.numberOfLines = 0

• Sostituisci i vincoli di altezza fissa di Auto Layout con >= affinché il contenitore possa crescere per adattarsi al testo a capo

  label.heightAnchor.constraint(greaterThanOrEqualToConstant: minHeight).isActive = true

SwiftUI

Il sistema di layout di SwiftUI dimensiona automaticamente gli elementi per adattarsi al loro contenuto. Evitare di utilizzare una frame fissa o la proprietà clipped(). Le proprietà .fixedSize e minHeight sono necessarie solo in casi limite in cui un elemento genitore impone ancora i propri vincoli di dimensione sul testo.

• Utilizzo della proprietà .clipped() e/o cornici a dimensione fissa sono le cause principali delle violazioni di testo tagliato; rimuovere questi vincoli è solitamente tutto ciò che serve

  // before
  Text("Long content that needs to wrap")
      .truncationMode(.tail)
      .clipped()
      .frame(width: 50, height: 20)
  // after
  Text("Long content that needs to wrap")

• Rimuovere .lineLimit(1) o impostare su nil, come soluzione di supporto per consentire al testo di avvolgersi

  Text("Your text here")
      .lineLimit(nil)

• Se una vista genitore limita la dimensione del testo, usa .fixedSize(horizontal: false, vertical: true) per farle espandere verticalmente

  Text("Long content that needs to wrap")
      .fixedSize(horizontal: false, vertical: true)

• Facoltativamente, imposta minHeight sulla cornice in modo che possa crescere con il contenuto

  Text("Content").frame(minHeight: minHeight)

• Usa ViewThatFits (iOS 16+) per layout adattivi che cambiano disposizione a dimensioni maggiori, per prevenire il clipping prima che si verifichi

  ViewThatFits {
      HStack { Text("Label"); Text("Value") }   // compact — fits on one row
      VStack { Text("Label"); Text("Value") }   // falls back to stacked if needed
  }

Per prevenire questo problema in React Native, assicurati che le viste abbiano altezze flessibili. Puoi usare uno dei seguenti approcci.

Non impostare affatto un'altezza - il contenitore si dimensionerà in base al suo contenuto.

• Usa la

  <View style={{ padding: 8 }}>
    <Text>{text}</Text>
  </View>

• Usa la proprietà minHeight invece di height - ciò imposta un limite inferiore per i contenuti brevi, ma il contenitore è libero di crescere in altezza quando il testo necessita di più spazio.

  <View style={{ minHeight: 30, padding: 8 }}>
    <Text>{text}</Text>
  </View>

• Usa il padding invece di un'altezza fissa - la dimensione intrinseca del testo e la quantità di padding determineranno l'altezza del contenitore.

  <View style={{ flexGrow: 1, flexShrink: 0, padding: 8 }}>
    <Text>{text}</Text>
  </View>

• Imposta

  <View style={{ padding: 16 }}>
    <Text>{text}</Text>
  </View>

• Imposta numberOfLines={0} in modo che il testo possa avvolgersi su qualsiasi numero di linee e abbinano a un lineHeight esplicito per controllare lo spazio verticale.

  <View style={{ padding: 8 }}>
    <Text numberOfLines={0} style={{ lineHeight: 30 }}>{text}</Text>
  </View>

Per risolvere questo problema in Flutter tipicamente è necessario sia un aggiustamento del testo che del layout insieme.

Risolvere questo problema in Flutter richiede tipicamente sia una correzione del testo che una correzione del layout insieme. I widget Text si avvolgono per impostazione predefinita, ma un genitore a altezza fissa o un figlio Row non flessibile possono ancora tagliare il testo avvolto. Consenti ai contenitori di dimensionarsi in base al loro contenuto e rispetta lo scalatore del testo di sistema in modo che il Tipo Dinamico possa scalare il font.

• Consenti a Text di avvolgersi su più linee lasciando maxLines non impostato e mantenendo softWrap: true, che è il valore predefinito

  Text(
    longString,
    softWrap: true,
  )

• Avvolgi

  Container(
    padding: const EdgeInsets.all(8),
    child: Text(longString),
  )

• Avvolgi Text in Expanded o Flexible quando si trova all'interno di un Row, così può avvolgersi su più linee mentre il font si scala

  Row(
    children: [
      const Icon(Icons.info),
      Expanded(child: Text(longString)),
    ],
  )

• Posso ignorare questa regola?

  SingleChildScrollView(       
    child: Padding(
      padding: const EdgeInsets.all(16),
      child: Text(longString),
    ),
  )

Il testo tagliato ha un

Il testo tagliato ha una sugli utenti e raccomandiamo di risolvere questo problema nella quasi totalità dei casi. Il testo che viene tagliato è semplicemente illeggibile e non esiste una soluzione equivalente per un utente che fa affidamento su dimensioni di Tipo Dinamico elevate. per gli utenti, e raccomandiamo di rimediare a questo problema nella quasi totalità dei casi. Il testo tagliato è semplicemente illeggibile e non esiste un'alternativa per un utente che si affida a dimensioni di Tipo Dinamico grandi.

In rari casi, potresti considerare di ignorare il risultato se l'elemento tagliato è decorativo o ridondante - per esempio, un'etichetta breve che è completamente trasmessa da un altro elemento vicino o dall'etichetta di accessibilità di un'immagine. Scopri di più su ..

Risorse

Pagine dei Corsi di Deque University

• 1.4.4a Ridimensionare (200%) (Vedi Mobile Nativo iOS)

Nota: L'accesso completo alle risorse di Deque University richiede un abbonamento.

Altre Risorse

• Documentazione di Comprensione WCAG 2.1
  • Si riferisce a Comprendere SC 1.4.4 - Ridimensionare Testo