Na ScrollView

O que nós verificamos

O texto deve ser contido em áreas roláveis para garantir que todo o conteúdo esteja visível, mesmo quando o texto for redimensionado.

Nota: Esta regra não redimensiona o texto nem verifica se ele pode ser escalonado. Ela verifica para garantir que o texto ainda possa ser acessado pelo usuário se ao ser escalonado ou se ficar mais longo devido à localização.

Exemplo de Falha ❌

O elemento contenente é um UIView.

O texto redimensionado é cortado e cannot be reached by scrolling.

Exemplo de Aprovação ✅

O elemento contenente é um UIScrollView.

O texto redimensionado é cortado, mas can be accessed by using the scroll bars.

Visão Geral

• Esta regra tem um impacto sério para os usuários
• Quando os usuários habilitam tamanhos de texto maiores, o conteúdo pode transbordar ou ser truncado e se tornar inacessível se não puderem rolar
• Esta regra assinala elementos de texto que não estão envoltos em UIScrollView, ScrollView, ou contêineres roláveis similares
• Cabeçalhos, texto corporal, botões com rótulos de texto e elementos de formulário precisam de suporte de rolagem

Impacto para os Usuários

As pessoas que usam Dynamic Type para alterar tamanhos de texto no iOS são as mais impactadas por violações desta regra. Quando o Dynamic Type está ativado, o texto pode sair da tela - ou ser truncado - à medida que o tamanho aumenta, potencialmente tornando as informações indisponíveis. Vistas roláveis são uma ótima forma de suportar vários tamanhos de tela, garantindo que todo o conteúdo esteja acessível.

Confirme o Problema no ScrollView

1. Se o conteúdo na página ocupar menos de uma tela, torne todo o texto maior com o Dynamic Type:
   • Se estiver usando um simulador:
     1. Abra o Inspector de Acessibilidade
     2. No canto superior esquerdo do inspetor, altere o dispositivo do seu Mac para o simulador iOS
     3. Selecione o botão Configurações no canto superior direito do inspector
     4. Em Tamanho da Fonte, mova o controle deslizante para uma configuração maior
   • Se estiver usando um dispositivo iOS 13.0+:
     1. Abra as Configurações
     2. Selecione Acessibilidade
     3. Selecione Tela e Tamanho do Texto
     4. Selecione Texto Maior
     5. Mova o controle deslizante na parte inferior da página para uma configuração maior
2. Tente rolar até o elemento de texto
   • Inacessível: Parte do texto desaparece da tela e você não pode rolar para acessá-lo
   • Acessível: Todo o conteúdo permanece acessível ao rolar, mesmo nos maiores tamanhos de texto

Corrigir Problemas

Para resolver problemas no ScrollView, adicione UIScrollView ou ScrollView como um contêiner pai para elementos de texto em sua aplicação.

UIKit

Adicione um UIScrollView como o contêiner pai para todos os elementos interativos e estáticos na sua tela.

class MyViewController: UIViewController {
    override func viewDidLoad() {
      super.viewDidLoad()
      
      let scrollView = UIScrollView()
      let contentView = UIView()
      
      view.addSubview(scrollView) /* Add the scroll view to the main view first */
      scrollView.addSubview(contentView)  /* Add any content to the scroll view */ 
      
      /* Add your text and buttons to contentView instead of view */
      let label = UILabel()
      label.text = "This content can overflow when resized, so put it inside of a scrollView!"
      label.numberOfLines = 0
      contentView.addSubview(label)
      
      /* Set up basic constraints */
      scrollView.setConstraintsFillParentView()
      contentView.setConstraintsFillParentView()
  }
}

SwiftUI

Adicione texto dentro de um ScrollView:

     var body: some View {
        ScrollView {
            VStack  {
                HStack {
                    Text("This text can grow, and users can scroll so they can still see all of it!")
                        .padding()
                }
            }
        }
    }

React Native

Aninhe elementos de texto dentro de um elemento ScrollView. O elemento ScrollView deve estar dentro de um SafeAreaView para garantir que o conteúdo permaneça dentro dos limites da janela durante a rolagem.

<SafeAreaView style={{ flex: 1 }}>
   <ScrollView>
     <View>
       <Text> Make sure each screen has a ScrollView so users can access all of your content! </Text>
     </View>
   </ScrollView>
</SafeAreaView>

Flutter

Envolva o conteúdo da tela em um SingleChildScrollView para que o texto permaneça acessível quando os usuários aumentarem seu tamanho de fonte preferido.

Scaffold(
  body: SafeArea(
    child: SingleChildScrollView(
      child: Padding(                                                         
        padding: EdgeInsets.all(12.0),
        child: Column(                                                        
          children: [                                                       
            Text('This text can grow when users increase their font size, and they can scroll to see all of it!'),
          ],                                                                  
        ),
      ),                                                                      
    ),                                                                      
  ),
)

Posso ignorar esta regra?

Esta regra tem um impacto sério para os usuários e você deve corrigir todos os problemas encontrados por esta regra, com exceção das seguintes limitações conhecidas. Se o texto fizer parte de um elemento fixo na tela, um que permanece no mesmo lugar mesmo quando a tela é rolada, como um UINavigationBar ou UITabBar, utilize um elemento UILargeContentViewer em vez de um ScrollView. Observe que nossa regra não consegue detectar se UILargeContentViewer é implementado para esses elementos e ainda sinalizará a falha In ScrollView, mesmo que você tenha implementado uma experiência acessível. Em um caso como este, você pode optar por ignorar a regra. Saiba mais sobre ignorando regras.

Recursos

Páginas do Curso Deque University

• Critério de Sucesso 1.4.4 - Redimensionar Texto

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

Outros Recursos

• Diretrizes de Acessibilidade para Conteúdo Web 2.2, Documentos de Compreensão
  • Compreendendo o Critério de Sucesso 1.4.4 - Redimensionar Texto
• Tutorial UIScrollView