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éfinir numberOfLines = 0 (UIKit), ou
  • Supprimer .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. Trouver Accessibilité dans iOS Réglages
2. Sélectionner Afficher et taille de texte
3. Activez 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éfinir la propriété numberOfLines sur le 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 devez généralement effectuer à la fois une correction de texte et une correction de mise en page simultanément. Définir numberOfLines à 0 permet à l'étiquette de se dérouler, mais une contrainte de hauteur fixe sur l'étiquette ou son conteneur coupera toujours le texte enroulé. Utilisez également des contraintes de hauteur greaterThanOrEqualToConstant, afin que le conteneur puisse réellement s'agrandir.

• Définir numberOfLines = 0 sur UILabel pour autoriser l'enroulement multiligne (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 mise en page 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 au texte.

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

  // 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 définissez-le sur nil, comme une correction de soutien pour permettre au texte de s'enrouler

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

• Si une vue parentale 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)

• Facultativement, définissez minHeight sur le cadre pour qu'il puisse grandir avec le contenu

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

• Utilisez ViewThatFits (iOS 16+) pour des mises en page adaptatives qui changent d'organisation à des tailles plus grandes, afin d'éviter le rognage 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 est libre de croître en hauteur lorsque 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>

• Définissez numberOfLines={0} pour que le texte puisse s'enrouler sur n'importe quel nombre de lignes, et combinez-le avec un lineHeight explicite pour contrôler l'espacement vertical.

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

Flutter

La résolution de ce problème dans Flutter nécessite généralement à la fois une correction de texte et une correction de mise en page ensemble. Les widgets Text s'enroulent par défaut, mais un parent à hauteur fixe ou un enfant Row non flexible peuvent toujours couper le texte enroulé. Permettez aux conteneurs de dimensionner avec leur contenu, et respectez l'échelonnage de texte système afin que Dynamic Type puisse échelonner la police.

• Permettre à Text de s'enrouler sur plusieurs lignes en laissant maxLines non défini et en gardant softWrap: true, ce qui est la valeur 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, afin qu'il puisse s'enrouler sur plusieurs lignes au fur et à 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 ?

Le texte coupé a un impact sérieux pour les utilisateurs, et nous recommandons de remédier à ce problème dans presque tous les cas. Un texte coupé est tout simplement illisible, et il n'y a pas d'alternative é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 coupé est décoratif ou redondant - par exemple, une courte étiquette entièrement transmise par un autre élément voisin 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 iOS natif)

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

Autres ressources

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