Texto Cortado

Qué Buscamos

El contenido visible de los elementos de texto estático no debe cortarse, ya sea en el tamaño de texto predeterminado o en tamaños más grandes de Dynamic Type.

Ejemplo Fallido ❌

Ejemplo Aprobado ✅

De un Vistazo

• Esta regla tiene un impacto serio para los usuarios
• Esta regla requiere iOS 17.0 o posterior y se ejecuta en elementos de texto estático que son visibles y ajustables por el desarrollador
• El texto estático no debe cortar su contenido visible en su estado actual ni cuando se redimensione
• Corrija permitiendo que el texto se envuelva o crezca:
  • Establezca numberOfLines = 0 (UIKit), o
  • Elimine .clipped() / .lineLimit() (SwiftUI)

Impacto para los Usuarios

Los usuarios con baja visión, discapacidades cognitivas o que dependen de tamaños de texto más grandes mediante Dynamic Type pueden no poder acceder a la información que se corta. La WCAG 1.4.4 (Redimensionar Texto) requiere que el contenido de texto siga siendo visible y usable cuando el usuario agranda el texto. Esta regla ayuda a detectar contenido que ya ha sido cortado, así como contenido que se cortaría si el usuario aumenta la configuración de tamaño de texto.

Confirmar Problema de Texto Cortado

1. Busque Accesibilidad en los Ajustes
2. Seleccione Pantalla y Tamaño de Texto
3. Active la opción para seleccionar el tamaño de texto accesible más grande en el panel de Texto más Grande .
4. Observe el cambio en pantalla:
   • No accesible: El contenido está cortado por esta vista
   • Accesible: El contenido se envuelve, crece verticalmente o se puede acceder desplazándose

Solucionar Problemas

• Asegúrese de que los contenedores de texto ajustables por el desarrollador tengan suficiente anchura y altura para mostrar todo el contenido, incluso en el tamaño de Dynamic Type más grande que planea soportar
• Use restricciones de Auto Layout que permitan al texto envolverse o crecer verticalmente
• Establezca la numberOfLines propiedad en el texto a numberOfLines = 0
• Para contenido desplazable, verifique que la vista de desplazamiento esté correctamente dimensionada para que el texto más largo pueda desplazarse en lugar de truncarse

UIKit

Para resolver este problema en UIKit, generalmente necesita tanto una corrección de texto como una corrección de diseño juntas. Establecer numberOfLines en 0 permite que la etiqueta se envuelva, pero una restricción de altura fija en la etiqueta o su contenedor aún cortará el texto envuelto. Use greaterThanOrEqualToConstant restricciones de altura también, para que el contenedor pueda realmente crecer.

• Establezca numberOfLines = 0 en UILabel para permitir el envolvimiento en varias líneas (corrección de texto)

  label.numberOfLines = 0

• Reemplaza las restricciones de altura fija de Auto Layout con >= para que el contenedor pueda crecer y ajustarse al texto envuelto

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

SwiftUI

El sistema de diseño de SwiftUI dimensiona automáticamente los elementos para que se ajusten a su contenido. Evita usar un frame fijo o la propiedad clipped() . Las propiedades .fixedSize y minHeight solo son necesarias en casos extremos donde un elemento padre sigue imponiendo sus propias restricciones de tamaño en el texto.

• Usar la propiedad .clipped() y/o marcos de tamaño fijo son las principales causas de violaciones de texto recortado: eliminar estas restricciones suele ser todo lo que se necesita

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

• Elimina .lineLimit(1) o establece en nil, como una solución para permitir que el texto se envuelva

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

• Si una vista padre está restringiendo el tamaño del texto, usa .fixedSize(horizontal: false, vertical: true) para permitir que se expanda verticalmente

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

• Opcionalmente, establece minHeight en el marco para que pueda crecer con el contenido

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

• Usa ViewThatFits (iOS 16+) para diseños adaptativos que cambian de disposición en tamaños más grandes, para evitar el recorte antes de que ocurra

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

React Native

Para prevenir este problema en React Native, asegúrate de que las vistas tengan alturas flexibles. Puedes usar cualquiera de los siguientes enfoques.

• No establezcas una altura en absoluto: el contenedor se redimensionará para ajustarse a su contenido.

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

• Usa la propiedad minHeight en lugar de height : esto establece un mínimo para contenido corto, pero el contenedor puede crecer más alto cuando el texto necesita más espacio.

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

• Usa un diseño flexible, de modo que el contenedor crezca con su contenido y nunca se aplaste por debajo de su tamaño natural.

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

• Usa padding en lugar de una altura fija: el tamaño intrínseco del texto y la cantidad de padding determinarán la altura del contenedor.

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

• Establece numberOfLines={0} para que el texto pueda envolverse en cualquier número de líneas, y acompáñalo con un lineHeight explícito para controlar el espaciado vertical.

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

Flutter

Resolver este problema en Flutter generalmente requiere tanto una solución para el texto como una solución para el diseño juntas. Text los widgets se envuelven por defecto, pero un padre de altura fija o un hijo no flexible pueden aún recortar el texto envuelto. Permite que los contenedores se dimensionen con su contenido y respeta el escalador de texto del sistema para que Dynamic Type pueda escalar la fuente. Row Permite que

• se envuelva en múltiples líneas dejando Text sin establecer y manteniendo maxLines , que es el valor predeterminado softWrap: trueUsa padding en contenedores que envuelven texto para que la caja crezca con su contenido

  Text(
    longString,
    softWrap: true,
  )

• Envuelve

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

• en Text o Expanded cuando se encuentre dentro de un Flexible , para que pueda envolverse en múltiples líneas a medida que la fuente se escala RowHaz que la pantalla sea desplazable para que el texto escalado permanezca accesible cuando se extienda más allá del área visible

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

• ¿Puedo ignorar esta regla?

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

El texto recortado tiene un

impacto serio para los usuarios, y recomendamos remediar este problema en casi todos los casos. El texto que está recortado es simplemente ilegible y no hay una solución alternativa equivalente para un usuario que depende de tamaños grandes de Dynamic Type. En casos raros, podrías considerar ignorar el resultado si el elemento recortado es decorativo o redundante - por ejemplo, una etiqueta corta que es completamente transmitida por otro elemento cercano o por la etiqueta de accesibilidad de una imagen. Aprende más sobre

ignorando reglas ..

Recursos

Páginas de cursos de Deque University

• 1.4.4a Redimensionar (200%) (Ver iOS Nativo Móvil)

Nota: El acceso completo a los recursos de Deque University requiere una suscripción.

Otros recursos

• Documentos de comprensión de WCAG 2.1
  • Relacionado con Comprender SC 1.4.4 - Redimensionar texto