Guia para Escalonamento de Texto em Dispositivos Móveis

Aplicativos móveis devem estar em conformidade com a diretriz WCAG 1.4.4 Redimensionar Texto e escalonar conteúdo para garantir que não haja perda de informação ou funcionalidade para usuários que requerem tamanhos de fonte maiores. Este guia abrange maneiras recomendadas de suportar o escalonamento de texto em plataformas iOS e Android.

Recursos Específicos da Plataforma

iOS - Tipo Dinâmico

O Tipo Dinâmico é um recurso de acessibilidade no iOS que permite que os tamanhos de fonte sejam escalados em todo o dispositivo com base na preferência do usuário. Encontre esta opção em Configurações de Acessibilidade no dispositivo. Leia mais sobre a Exibição de Texto da Apple aqui.

Android - Escalonamento de Texto e Exibição

Para dispositivos Android a partir da versão 13, é possível alterar o tamanho de texto e conteúdo preferido nas configurações de acessibilidade. Os usuários podem ajustar tanto o tamanho da fonte quanto o tamanho de exibição independentemente. Leia mais sobre como alterar estas configurações no guia de suporte do Google para configurações de texto e exibição.

Preparando Suas Visualizações

Certifique-se de que o Conteúdo Possa Rolar

iOS: Quando o texto é escalado para tamanhos de fonte maiores, uma quantidade substancial de conteúdo pode ser deslocada para fora da tela. Implemente um UIScrollView ou ScrollView em qualquer tela com conteúdo.

Android: Use um elemento ScrollView como o contêiner para elementos de layout (constraint, linear, relative). ScrollViews não rolarão até que a altura (ou largura, para rolagem horizontal) da tela esteja preenchida.

Exceções:

• Android: RecyclerViews não precisam ser embutidos dentro de um ScrollView. Permita que os itens se expandam verticalmente ou horizontalmente.
• Android: Elementos de navegação (barras inferiores, abas, barras de ferramentas) devem estar no mesmo nível que o contêiner ScrollView, não dentro dele.

Certifique-se de que o Conteúdo Possa Expandir

iOS: Utilize contentHuggingPriority, contentCompressionResistancePriority, greaterThanOrEqualTo, e lessThanOrEqualTo para permitir que as visualizações se expandam. Limite a configuração de altura e largura constante para visualizações contendo conteúdo.

Android: A maioria dos problemas de redimensionamento de texto pode ser resolvida ao não restringir a altura ou a largura de uma visualização. Permita que TextView se expandam com as restrições definidas. Use wrap_content para altura e match_parent ou 0dp para largura.

Considerações Específicas de Layout

Android ConstraintLayout: Defina a largura da visualização para match_parent e a altura para wrap_content, ou use largura 0dp para preencher o espaço entre as restrições. Sempre garanta que os componentes possam se expandir verticalmente.

Android RelativeLayout: Defina diretrizes de início e fim para elementos irmãos para garantir que os componentes permaneçam na tela.

Android LinearLayout: Pode se ajustar a tamanhos de conteúdo variáveis se estiver em um ScrollView e não definir match_parent altura. Use android:minHeight para exigências específicas de altura.

Definir Número de Linhas

iOS: Defina o numberOfLines parâmetro para 0 para qualquer texto com potencial de transbordo. Para UIButton, ajuste numberOfLines para 0 em seu titleLabel.

Android: Use SP (pixels independentes de escala) para todos os textos, não DP (pixels independentes de densidade). Você pode utilizar o verificador de acessibilidade do Android Studio para detectar problemas com o uso de SP.

Implementação

Implementação no iOS

SwiftUI Views (iOS 14+)

Usando Fontes Padrão:

.font(.system(.largeTitle, design: .rounded))

Usando Fontes Personalizadas:

.font(.custom("FontName", size: 16, relativeTo: .body))

UIKit Views

Usando Fontes Padrão:

label.font = UIFont.preferredFont(forTextStyle: .body)
label.adjustsFontForContentSizeCategory = true

Usando Fontes Personalizadas com UIFontMetrics:

guard let font = UIFont(name: "CustomFont", size: UIFont.labelFontSize) else { return }
label.font = UIFontMetrics(forTextStyle: .caption1).scaledFont(for: font)
label.adjustsFontForContentSizeCategory = true

Gerenciamento Manual de Tipo Dinâmico:

// Via Notification Observer
NotificationCenter.default.addObserver(self,
                                       selector: #selector(changeTextSize),
                                       name: UIContentSizeCategory.didChangeNotification,
                                       object: nil)

// Via TraitCollection Override
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    // Handle font size changes based on preferredContentSizeCategory
}

Implementação no Android

Configuração Básica:

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="16sp" />

Exemplo de ConstraintLayout:

<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button Text"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

Modificação Programática de Texto:

SpannableStringBuilder str = new SpannableStringBuilder(tv.getText());
str.setSpan(new AbsoluteSizeSpan(70, true), 15, 18, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
tv.setText(str);

Testes e Melhores Práticas

Diretrizes Gerais

• Teste com vários tamanhos de fonte para garantir que o conteúdo seja exibido conforme o esperado.
• Mantenha os títulos curtos e descritivos para melhor acessibilidade.
• Certifique-se de que a usabilidade não seja afetada por restrições inadequadas.
• Verifique se todos os controles de texto suportam escala sem empurrar o conteúdo para fora da tela.

Considerações Específicas para Plataformas

iOS:

• Siga as Diretrizes de Tipografia da Apple e a documentação de Suporte ao Tipo Dinâmico.
• Use TextStyles apropriados (.body, .title1, .caption1, etc.).
• Para SwiftUI, muitas considerações são fornecidas por padrão, mas devem ser revisadas.

Android:

• Use títulos curtos para barras de ferramentas; evite o widget Toolbar para títulos dinâmicos.
• Forneça ícones distintos com descrições de conteúdo descritivas para a navegação inferior.
• Utilize visões roláveis para guias, ViewPager e componentes TabList.
• Não limite a altura dos controles.

Pontos Principais

1. **Implemente sempre contêineres roláveis** para conteúdo que possa transbordar.
2. **Use unidades de escala apropriadas para a plataforma** (SP para Android, TextStyles para iOS).
3. **Teste minuciosamente** em diferentes tamanhos de fonte e configurações de acessibilidade.
4. **Permita que as visualizações se expandam** em vez de restringi-las a dimensões fixas.
5. **Siga as diretrizes da plataforma** para uma experiência de usuário ideal.