Tamanho do Alvo de Toque

O Que Verificamos

Todos os elementos interativos devem ter um tamanho mínimo de 44pt por 44pt, para as áreas visual e tocável.

A área de clique de um elemento interativo pode ser potencialmente expandida além de seus limites visuais - por exemplo, anexando um reconhecedor de gestos com uma região de ativação maior. Após cuidadosa consideração, a Deque mantém que é uma prática recomendada que os limites visuais e interativos do alvo estejam alinhados. Isso fornece ao usuário final uma área clara para interagir, garantindo maior sucesso. Portanto, esta regra também verifica se os limites visuais dos elementos interativos atendem ao mínimo de 44pt.

Exemplo de Falha ❌

Touch target size = 20pt × 20pt

Este elemento é menor que o mínimo de 44pt × 44pt

A área de toque é muito pequena para ativar de forma confiável, especialmente para usuários com limitações motoras

Exemplo de Sucesso ✅

Touch target size = 44pt × 44pt

Este elemento atende ao mínimo de 44pt × 44pt

Tanto os limites visuais quanto os tocáveis são grandes o suficiente para ativar com precisão.

Visão Geral

• Esta regra tem um impacto moderado para os usuários
• Todos os elementos interativos devem ter uma borda visual e tocável de pelo menos 44pt × 44pt
• Tanto os limites visuais quanto os interativos (área de clique) devem atender ao mínimo
• Controles pequenos são um problema de usabilidade para todos, e especialmente problemáticos para usuários com limitações motoras

Impacto para os Usuários

Em um dispositivo de toque, controles pequenos são um problema de usabilidade para todos. Além disso, pessoas com limitações motoras têm uma dificuldade maior em interagir e mirar em alvos pequenos.

Confirmar Problema de Tamanho do Alvo de Toque

Execute o aplicativo no Xcode e navegue até a tela que contém o elemento interativo a ser testado.

1. Dentro do Xcode, selecione Hierarquia de Visualização de Depuração
2. Selecione o elemento a ser testado
3. Abra o Painel de Inspeção, se não estiver visível
4. Selecione o Inspetor de Tamanho
5. Observe a largura e a altura do elemento selecionado

Se a largura ou a altura for menor que 44pt, o elemento não atende a esta regra.

Corrigir Problemas

Para resolver problemas de Tamanho do Alvo de Toque, garanta que a borda visual de cada elemento interativo seja de pelo menos 44pt × 44pt. Tanto os limites visuais quanto a área de clique devem corresponder — expandir apenas a área de toque através de um reconhecedor de gestos não é suficiente.

Um problema encontrado por esta regra ocorre quando o frame de um controle ativo não tem altura e largura de 44pt ou mais.

UIKit

Defina a borda do elemento interativo para pelo menos 44pt × 44pt usando uma das abordagens a seguir.

No storyboard:

1. Navegue até o elemento interativo
2. Abra o Painel de Inspeção, se não estiver visível
3. Selecione o Inspetor de Tamanho
4. Em View, atualize os parâmetros width e height para pelo menos 44pt

No código:

Atualize o width e o height do frame do elemento interativo para pelo menos 44pt.

Isso pode ser definido através do inicializador e de uma borda específica:

let button = UIButton(frame: CGRect(x: 0, y: 0, width: 44, height: 44))

ou, pode ser configurado através de restrições de visualização. Se houver uma restrição atual no botão, vá em frente e atualize a largura e a altura para ser no mínimo 44 pontos. Caso contrário, você pode adicionar restrições:

// Update Height:
myButton.heightAnchor.constraint(greaterThanOrEqualToConstant: 44).isActive = true

// Update Width:
myButton.widthAnchor.constraint(greaterThanOrEqualToConstant: 44).isActive = true

SwiftUI

Aplique um modificador .frame para expandir controles para pelo menos 44pt × 44pt.

Campos de Texto

Observe que atualmente no SwiftUI não há uma maneira consistente de aumentar o tamanho da área tocável de um TextField, portanto um TextField SwiftUI retornará .INCOMPLETE para esta regra. Um relatório de radar foi enviado para a Apple.

Botões

Use um modificador de frame no conteúdo do parâmetro label em vez de no botão inteiro.

1. Use o inicializador baseado em rótulo do Button, que tem 'ação' como o primeiro parâmetro e 'rótulo' como o segundo parâmetro, conforme mostrado abaixo.

Button(action: {
  print("Button tapped")
  }, label: {
  Text("Tap here")
  }
)

1. Adicione um modificador de frame ao conteúdo do parâmetro label do Button, especificando uma altura e largura de pelo menos 44.

Button(action: {
  print("Button tapped")
  }, label: {
  Text("Tap here")
    .frame(width: 80, height: 45)
  }
)

React Native

Use propriedades de tamanho específicas da plataforma para garantir que os controles atinjam o tamanho mínimo do alvo de toque.

Alguns componentes do React Native não são customizáveis para permitir ajustes de tamanho, como o componente Button. Se possível, garanta que todos os elementos interativos tenham pelo menos 44pt por 44pt. Se não for possível, explore componentes alternativos que permitam ajustar o tamanho.

Dica: Ao usar controles personalizados, certifique-se de que a função de acessibilidade esteja configurada corretamente!

Flutter

Os widgets Material do Flutter (ElevatedButton, IconButton, etc.) impõem uma área mínima de toque de 48pt por 48pt automaticamente, cumprindo assim este requisito por padrão. As infrações geralmente vêm de alvos de toque personalizados construídos com GestureDetector, que não expande a área de toque além do tamanho visual.

  // Failing — tap target is only 24×24
  GestureDetector(                                                                                      
    onTap: () {},
    child: Container(                                                                                   
      width: 24,                                                                                      
      height: 24,
      color: Colors.blue,
      child: const Icon(Icons.close, size: 16, color: Colors.white),                                    
    ),
  )                                                                                                     
                                                                                                      
  // Passing — tap target meets 44×44 minimum                                                           
  GestureDetector(
    onTap: () {},                                                                                       
    child: Container(                                                                                 
      width: 44,
      height: 44,
      color: Colors.blue,
      child: const Icon(Icons.close, size: 24, color: Colors.white),
    ),                                                                                                  
  )

Posso ignorar esta regra?

O Tamanho do Alvo de Toque tem um impacto moderado para os usuários. Em casos em que uma restrição de design impede atender ao mínimo de 44pt — como um ícone de barra de ferramentas em uma interface muito densa — documente a decisão e explore alternativas antes de ignorar a regra. Saiba mais sobre ignorar regras.

Recursos

Páginas do Curso Deque University

• 2.5.5 Tamanho do Alvo (AAA)

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

Outros Recursos

• Diretrizes de Acessibilidade para Conteúdo da Web (WCAG) 2.1, Recomendação do W3C
  • Critério de Sucesso 2.5.5 - Tamanho do Alvo
• Documentos de Compreensão do WCAG 2.1
  • Compreendendo 2.5.5 AAA - Tamanho do Alvo