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:
  • Establecer numberOfLines = 0 (UIKit), o
  • Eliminar .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. Encontrar Accesibilidad en iOS Ajustes
2. Seleccionar Pantalla y Tamaño de Texto
3. Alternar para seleccionar el tamaño de texto de accesibilidad más grande en el panel 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
• Establecer la propiedad numberOfLines 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 necesitas tanto una corrección de texto como una corrección de diseño juntas. Configurar numberOfLines a 0 permite que la etiqueta se ajuste, pero una restricción de altura fija en la etiqueta o su contenedor aún cortará el texto ajustado. Usa también restricciones de altura greaterThanOrEqualToConstant, para que el contenedor pueda realmente crecer.

• Configurar numberOfLines = 0 en UILabel para permitir el ajuste de líneas múltiples (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 ajusta automáticamente los elementos para que se adapten 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 aún impone 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 cortado - eliminar estas restricciones generalmente es 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")

• Eliminar .lineLimit(1) o configurarlo en nil, como una corrección de soporte para permitir que el texto se ajuste

  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 adaptables que cambien de disposición a tamaños más grandes, para prevenir el corte 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 es libre de 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>

• Configura numberOfLines={0} para que el texto pueda ajustarse a cualquier número de líneas, y combínalo con un lineHeight explícito para controlar el espaciado vertical.

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

Flutter

Para resolver este problema en Flutter, generalmente se requiere tanto una corrección de texto como una corrección de diseño juntas. Los widgets Text se ajustan por defecto, pero un padre de altura fija o un hijo Row no flexible puede aún cortar el texto ajustado. Permite que los contenedores se ajusten con su contenido y respeta el escalador de texto del sistema para que Dynamic Type pueda escalar la fuente.

• Permitir que Text se ajuste a través de múltiples líneas dejando maxLines sin configurar y manteniendo softWrap: true, que es el valor predeterminado

  Text(
    longString,
    softWrap: true,
  )

• Envuelve

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

• Envuelve Text en Expanded o Flexible cuando esté dentro de un Row, para que pueda ajustarse a múltiples líneas a medida que la fuente se escala

  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

El texto cortado tiene un 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. para los usuarios, y recomendamos solucionar este problema en casi todos los casos. El texto que está cortado es simplemente ilegible, y no hay una solución similar para un usuario que depende de tamaños grandes de Dynamic Type.

En casos raros, puedes considerar ignorar el resultado si el elemento cortado es decorativo o redundante, por ejemplo, una etiqueta corta que está completamente transmitida por otro elemento cercano o por la etiqueta de accesibilidad de una imagen. Aprende más sobre ..

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 Comprensión del Criterio SC 1.4.4 - Redimensionar texto