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:
  • Impostare 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 l'opzione per selezionare la dimensione del testo di accessibilità più alta nel pannello Testo Più Grande pannello
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 del testo su 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, occorre solitamente sia una correzione del testo che una correzione del layout insieme. Impostare numberOfLines a 0 consente all'etichetta di avvolgersi, ma un vincolo di altezza fissa sull'etichetta o sul suo contenitore taglierà comunque il testo avvolto. Usa anche i vincoli di altezza greaterThanOrEqualToConstant , in modo che il contenitore possa effettivamente crescere.

• Impostare numberOfLines = 0 su UILabel per consentire il wrapping 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. Evita di utilizzare un frame fisso o la clipped() proprietà. Le .fixedSize proprietà sono necessarie solo in casi particolari in cui un elemento genitore impone ancora le proprie restrizioni di dimensione sul testo. minHeight Usare la

• proprietà e/o frame a dimensione fissa sono le cause principali delle violazioni di testo tagliato - rimuovere questi vincoli è di solito tutto ciò che serve .clipped() Rimuovi

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

• o imposta su nil, come soluzione di supporto per permettere al testo di andare a capo .lineLimit(1) Se una vista genitore sta limitando la dimensione del testo, usa

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

• per permettergli di espandersi verticalmente .fixedSize(horizontal: false, vertical: true) Opzionalmente, imposta

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

• sul frame affinché possa crescere con il contenuto minHeight Utilizza

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

• (iOS 16+) per layout adattivi che modificano l'arrangiamento a dimensioni maggiori, per prevenire il taglio del testo prima che accada ViewThatFits React Native

  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>

• proprietà invece di minHeight - questo imposta un limite per contenuti brevi, ma il contenitore è libero di crescere più in alto quando il testo necessita di più spazio. height Usa un layout flessibile, affinché il contenitore cresca con il suo contenuto e non sia mai schiacciato sotto la sua dimensione naturale.

  <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>

• affinché il testo possa andare a capo su qualsiasi numero di linee e abbinalo a un esplicito numberOfLines={0} per controllare la spaziatura verticale. lineHeight Flutter

  <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.

i widget vanno a capo per impostazione predefinita, ma un genitore a altezza fissa o un figlio non flessibile Text potrebbe ancora tagliare il testo a capo. Permetti ai contenitori di dimensionarsi con il loro contenuto e rispetta lo scaler di testo del sistema affinché il Tipo Dinamico possa scalare il font. Row Permetti a

• di andare a capo su più linee lasciando Text non impostato e mantenendo maxLines , che è l'impostazione predefinita softWrap: trueUsa il padding sui contenitori che avvolgono il testo in modo tale che la scatola cresca con il suo contenuto

  Text(
    longString,
    softWrap: true,
  )

• Avvolgi

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

• in Text o Expanded quando si trova all'interno di un Flexible , in modo che possa andare a capo su più linee mentre il font viene scalato RowRendi lo schermo scorrevole affinché il testo scalato rimanga accessibile quando supera il viewport

  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

impatto grave 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. In rari casi, puoi 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

ignorare le regole ..

Risorse

Pagine dei Corsi di Deque University

• 1.4.4a Ridimensiona (200%) (Vedi Dispositivi Mobili iOS Nativi)

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

Altre Risorse

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