Texte tronqué

Ce que nous recherchons

Le contenu visible des éléments de texte statique ne doit pas être tronqué, que ce soit à la taille de texte par défaut ou à des tailles plus grandes dans le cas du type dynamique.

Exemple de défaillance ❌

Exemple réussi ✅

En bref

• Cette règle a un impact sérieux pour les utilisateurs
• Cette règle nécessite iOS 17.0 ou une version ultérieure et s'applique aux éléments de texte statiques qui sont visibles et ajustables par le développeur
• Le texte statique ne doit pas tronquer son contenu visible dans son état actuel ou lors de son redimensionnement
• Corrigez en permettant au texte de s'enrouler ou de grandir :
  • Définissez numberOfLines = 0 (UIKit), ou
  • Supprimez .clipped() / .lineLimit() (SwiftUI)

Impact sur les utilisateurs

Les utilisateurs malvoyants, ceux avec des handicaps cognitifs, ou qui dépendent de tailles de texte plus grandes via le type dynamique peuvent être incapables d'accéder à des informations tronquées. La WCAG 1.4.4 (Redimensionner le texte) exige que le contenu textuel reste visible et utilisable lorsque l'utilisateur agrandit le texte. Cette règle aide à identifier le contenu déjà tronqué, ainsi que le contenu qui serait tronqué si l'utilisateur augmente ses paramètres de taille de texte.

Confirmer le problème de texte tronqué

1. Trouvez Accessibilité dans les Réglages
2. Sélectionnez Afficher et taille de texte
3. Basculez pour sélectionner la plus grande taille de texte accessible dans le panneau Texte plus grand
4. Observez le changement à l'écran :
   • Inaccessible : Le contenu est tronqué par cette vue
   • Accessible : Le contenu s'enroule, s'étend verticalement, ou peut être accédé en défilant

Corriger les problèmes

• Assurez-vous que les conteneurs de texte ajustables par le développeur ont une largeur et une hauteur suffisantes pour afficher tout le contenu, y compris à la plus grande taille de type dynamique que vous envisagez de prendre en charge
• Utilisez des contraintes de mise en page automatique qui permettent au texte de s'enrouler ou de s'étendre verticalement
• Définissez la propriété numberOfLines du texte à numberOfLines = 0
• Pour le contenu déroulant, vérifiez que la vue de défilement elle-même est correctement dimensionnée pour que le texte plus long puisse défiler à l'écran plutôt que d'être tronqué

UIKit

Pour résoudre ce problème dans UIKit, vous avez généralement besoin d'une correction de texte et d'une correction de mise en page ensemble. Définir numberOfLines à 0 permet à l'étiquette de s'enrouler, mais une contrainte de hauteur fixe sur l'étiquette ou son conteneur coupera toujours le texte enroulé. Utilisez également greaterThanOrEqualToConstant des contraintes de hauteur, afin que le conteneur puisse effectivement s'agrandir.

• Définissez numberOfLines = 0 sur UILabel pour permettre un enroulement multi-lignes (correction de texte)

  label.numberOfLines = 0

• Remplacez les contraintes de hauteur fixe d'Auto Layout par >= pour que le conteneur puisse s'agrandir pour s'adapter au texte enveloppé

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

SwiftUI

Le système de disposition de SwiftUI dimensionne automatiquement les éléments pour s'adapter à leur contenu. Évitez d'utiliser une frame fixe ou la propriété clipped() . Les propriétés .fixedSize et minHeight ne sont nécessaires que dans des cas particuliers où un élément parent impose encore ses propres contraintes de taille sur le texte.

• L'utilisation de la propriété .clipped() et/ou des cadres de taille fixe sont les principales causes de violations de texte tronqué - supprimer ces contraintes est généralement suffisant

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

• Supprimez .lineLimit(1) ou réglez-la sur nil, comme une solution de support pour permettre l'enveloppement du texte

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

• Si une vue parente contraint la taille du texte, utilisez .fixedSize(horizontal: false, vertical: true) pour lui permettre de s'étendre verticalement

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

• Optionnellement, définissez minHeight sur le cadre pour qu'il puisse croître avec le contenu

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

• Utilisez ViewThatFits (iOS 16+) pour des dispositions adaptatives qui changent d'arrangement à des tailles plus grandes, afin de prévenir l'élagage avant qu'il ne se produise

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

React Native

Pour prévenir ce problème dans React Native, assurez-vous que les vues ont des hauteurs flexibles. Vous pouvez utiliser l'une des approches suivantes.

• Ne définissez pas de hauteur du tout - le conteneur ajustera sa taille pour s'adapter à son contenu.

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

• Utilisez la propriété minHeight au lieu de height - cela fixe un minimum pour un contenu court, mais le conteneur peut grandir quand le texte a besoin de plus d'espace.

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

• Utilisez une disposition flexible, afin que le conteneur croisse avec son contenu et ne soit jamais comprimé en dessous de sa taille naturelle.

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

• Utilisez le padding au lieu d'une hauteur fixe - la taille intrinsèque du texte et la quantité de padding détermineront la hauteur du conteneur.

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

• Réglez numberOfLines={0} pour que le texte puisse s'envelopper sur n'importe quel nombre de lignes, et associez-le à un lineHeight explicite pour contrôler l'espacement vertical.

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

Flutter

Résoudre ce problème dans Flutter nécessite généralement à la fois une correction du texte et une correction de la mise en page. Text les widgets s'enroulent par défaut, mais un parent à hauteur fixe ou un enfant non flexible Row peut encore tronquer le texte enveloppé. Permettez aux conteneurs de s'adapter à leur contenu et respectez le scaler de texte du système pour que Dynamic Type puisse mettre à l'échelle la police.

• Permettez à Text de s'envelopper sur plusieurs lignes en laissant maxLines non défini et en gardant softWrap: true, qui est le paramètre par défaut

  Text(
    longString,
    softWrap: true,
  )

• Utilisez le padding sur les conteneurs enveloppant le texte pour que la boîte croisse avec son contenu

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

• Enveloppez Text dans Expanded ou Flexible lorsqu'il se trouve à l'intérieur d'un Row, pour qu'il puisse s'envelopper sur plusieurs lignes à mesure que la police s'adapte

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

• Rendez l'écran défilable pour que le texte mis à l'échelle reste accessible lorsqu'il dépasse le champ de vision

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

Puis-je ignorer cette règle ?

Du texte tronqué a un impact sérieux pour les utilisateurs, et nous recommandons de résoudre ce problème dans presque tous les cas. Un texte tronqué est tout simplement illisible, et il n'y a pas de solution de contournement équivalente pour un utilisateur qui dépend de grandes tailles de Dynamic Type.

Dans de rares cas, vous pouvez envisager d'ignorer le résultat si l'élément tronqué est décoratif ou redondant - par exemple, une courte étiquette qui est entièrement véhiculée par un autre élément à proximité ou par l'étiquette d'accessibilité d'une image. En savoir plus sur l'ignorance des règles.

Ressources

Pages de Cours Deque University

• 1.4.4a Redimensionner (200 %) (Voir Mobile Native iOS)

Remarque : L'accès complet aux ressources de Deque University nécessite un abonnement.

Autres ressources

• Docs Comprendre WCAG 2.1
  • Correspond à Comprendre SC 1.4.4 - Redimensionner le texte