Texto Cortado

O Que Procuramos

O conteúdo visível dos elementos de texto estático não deve ser cortado, seja no tamanho de texto padrão ou em tamanhos maiores de Texto Dinâmico.

Exemplo de Falha ❌

Exemplo de Sucesso ✅

Em Resumo

• Esta regra tem um impacto sério para os usuários
• Esta regra requer iOS 17.0 ou posterior e funciona em elementos de texto estático que são visíveis e ajustáveis pelo desenvolvedor
• O texto estático não deve cortar seu conteúdo visível em seu estado atual ou quando for redimensionado
• Corrija permitindo que o texto se ajuste ou cresça:
  • Defina numberOfLines = 0 (UIKit), ou
  • Remova .clipped() / .lineLimit() (SwiftUI)

Impacto nos Usuários

Usuários com baixa visão, deficiências cognitivas ou que dependem de tamanhos de texto maiores via Tipo Dinâmico podem não conseguir acessar informações que são cortadas. A WCAG 1.4.4 (Redimensionar Texto) requer que o conteúdo do texto permaneça visível e utilizável quando o usuário aumenta o texto. Esta regra ajuda a identificar conteúdo que já foi cortado, bem como conteúdo que seria cortado se o usuário aumentar sua configuração de tamanho de texto.

Confirme o Problema de Texto Cortado

1. Encontre Acessibilidade no iOS Configurações
2. Selecione Tela e Tamanho de Texto
3. Alterne para selecionar o maior tamanho de texto de acessibilidade no painel Texto Maior
4. Observe a mudança na tela:
   • Inacessível: O conteúdo é cortado por esta visualização
   • Acessível: O conteúdo se ajusta, cresce verticalmente ou pode ser acessado ao rolar

Corrigir Problemas

• Garanta que os contêineres de texto ajustáveis pelo desenvolvedor tenham largura e altura suficientes para exibir o conteúdo completo, inclusive no maior tamanho de Tipo Dinâmico que você pretende suportar
• Use restrições de Auto Layout que permitem que o texto se ajuste ou cresça verticalmente
• Defina a propriedade numberOfLines no texto para numberOfLines = 0
• Para conteúdo rolável, verifique se a própria visualização de rolagem está corretamente dimensionada para que o texto mais longo possa rolar para a visualização em vez de truncar

UIKit

Para resolver este problema no UIKit, você geralmente precisa de uma correção de texto e uma correção de layout juntos. Ajustar numberOfLines para 0 permite que a etiqueta embrulhe, mas uma restrição de altura fixa na etiqueta ou em seu contêiner ainda cortará o texto envolvido. Use também restrições de altura de greaterThanOrEqualToConstant, para que o contêiner possa realmente crescer.

• Defina numberOfLines = 0 em UILabel para permitir o embrulho em várias linhas (correção de texto)

  label.numberOfLines = 0

• Substitua as restrições de Auto Layout de altura fixa por >= para que o contêiner possa crescer para se ajustar ao texto quebrado

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

SwiftUI

O sistema de layout do SwiftUI dimensiona automaticamente os elementos para caberem em seu conteúdo. Evite usar um frame fixo ou a propriedade clipped(). As propriedades .fixedSize e minHeight são necessárias apenas em casos extremos onde um elemento pai ainda está impondo suas próprias restrições de tamanho no texto.

• O uso da propriedade .clipped() e/ou de molduras de tamanho fixo são as principais causas de violações de texto cortado - remover essas restrições geralmente é tudo o que é necessário

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

• Remova .lineLimit(1) ou defina como nulo, como uma correção de apoio para permitir que o texto envolva

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

• Se uma visualização pai estiver restringindo o tamanho do texto, use .fixedSize(horizontal: false, vertical: true) para permitir que ele se expanda verticalmente

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

• Opcionalmente, defina minHeight na moldura para que possa crescer com o conteúdo

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

• Use ViewThatFits (iOS 16+) para layouts adaptativos que trocam de arranjo em tamanhos maiores, para evitar corte antes que ocorra

  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 evitar esse problema no React Native, assegure-se de que as vistas tenham alturas flexíveis. Você pode usar qualquer uma das seguintes abordagens.

• Não defina uma altura - o contêiner dimensionará a si mesmo para se ajustar ao seu conteúdo.

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

• Use a propriedade minHeight em vez de height - isso define um piso para conteúdo curto, mas o contêiner é livre para crescer mais alto quando o texto precisa de mais espaço.

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

• Use um layout flexível, para que o contêiner cresça com seu conteúdo e nunca seja esmagado abaixo de seu tamanho natural.

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

• Use preenchimento em vez de uma altura fixa - o tamanho intrínseco do texto e a quantidade de preenchimento determinarão a altura do contêiner.

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

• Defina numberOfLines={0} para que o texto possa envolver qualquer número de linhas e combine-o com um lineHeight explícito para controlar o espaçamento vertical.

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

Flutter

Resolver este problema no Flutter normalmente requer uma correção de texto e uma correção de layout juntos. Os widgets Text envolvem por padrão, mas um pai de altura fixa ou um filho Row não flexível ainda pode cortar o texto envolto. Permita que os contêineres dimensionem com seu conteúdo e respeite o escalador de texto do sistema para que o Tipo Dinâmico possa escalar a fonte.

• Permita que Text envolva em várias linhas deixando maxLines não definido e mantendo softWrap: true, que é o padrão

  Text(
    longString,
    softWrap: true,
  )

• Use preenchimento nos contêineres que envolvem texto para que a caixa cresça com seu conteúdo

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

• Envuelva Text em Expanded ou Flexible quando estiver dentro de um Row, para que possa envolver várias linhas conforme a fonte escala

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

• Torne a tela rolável para que o texto escalonado permaneça acessível quando crescer além do espaço da tela

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

Posso Ignorar Esta Regra?

Texto Cortado tem um Grave para usuários, e recomendamos resolver este problema na maioria dos casos. Texto cortado é simplesmente ilegível, e não há solução alternativa equivalente para um usuário que depende de tamanhos grandes de Tipo Dinâmico.

Em casos raros, você pode considerar ignorar o resultado se o elemento cortado for decorativo ou redundante - por exemplo, um rótulo curto que é totalmente transmitido por outro elemento próximo ou pelo rótulo de acessibilidade de uma imagem. Saiba mais sobre ignorar regras.

Recursos

Páginas de Cursos da Deque University

• 1.4.4a Redimensionar (200%) (Consulte iOS Nativo)

Nota: O acesso completo aos recursos da Deque University requer uma assinatura.

Outros Recursos

• WCAG 2.1 Documentos Explicativos
  • Relaciona-se a Compreender SC 1.4.4 - Redimensionar Texto