Tamanho da Área de Toque

Saiba como estamos usando inteligência artificial para esta regra!

O Que Verificamos

Todos os elementos interativos devem ter um tamanho mínimo de 44dp por 44dp, tanto para as áreas visuais quanto tocáveis.

A área sensível ao toque de um elemento interativo pode potencialmente ser expandida além de seus limites visuais — por exemplo, usando um TouchDelegate para aumentar a região ativa do toque. Após uma cuidadosa consideração, a Deque afirma que é uma prática recomendada alinhar os limites visuais e interativos do alvo. Isso fornece ao usuário final uma área clara para interagir, aumentando suas chances de sucesso. Portanto, esta regra também verifica se os limites visuais dos elementos interativos atendem ao mínimo de 44dp.

Exemplo de Falha ❌

Touch target size = 20dp × 20dp

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

A área de toque é muito pequena para ser ativada com confiabilidade, especialmente para usuários com limitações motoras.

Exemplo de Sucesso ✅

Touch target size = 44dp × 44dp

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

Tanto os limites visuais quanto os sensíveis ao toque são suficientemente grandes para serem ativados com precisão.

Resumo

• Esta regra tem um impacto moderado para os usuários
• Todos os elementos interativos devem ter um tamanho visual e tocável de pelo menos 44dp × 44dp
• Tanto os limites visuais quanto os interativos (área de toque) 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 mais dificuldade para interagir com alvos pequenos e mirar neles.

Confirmar Problema de Tamanho da Área de Toque

Execute o aplicativo e navegue para a tela contendo o elemento a ser testado.

1. No Android Studio, abra o **Inspetor de Layout** (Ferramentas > Inspetor de Layout)
2. Selecione o elemento a ser testado na árvore de componentes ou no canvas
3. No painel **Atributos**, observe os valores width e height em dp
4. Se necessário, identifique a densidade de pixels do dispositivo para confirmar os valores em dp

Se qualquer dimensão for menor que 44dp, o elemento falha nesta regra.

Corrigir Problemas

Para resolver problemas de Tamanho do Alvo de Toque, certifique-se de que o tamanho visual de cada elemento interativo seja de pelo menos 44dp × 44dp. Os limites visuais e a área sensível ao toque devem corresponder — expandir apenas a área de toque via TouchDelegate não é suficiente.

Um problema encontrado por esta regra ocorre quando os valores height e/ou width de um elemento interativo não são de 44dp ou mais.

XML

Defina minimumHeight e minimumWidth no elemento, ou defina valores explícitos layout_width e layout_height de pelo menos 44dp.

Button button = findViewById(R.id.my_button);
button.setMinimumHeight(44);
button.setMinimumWidth(44);

<Button
     android:id="@+id/an_accessible_button_yay"
     android:minimumHeight="44dp"
     android:minimumWidth="44dp"
     android:text="@string/batman_likes_accessible_buttons" />

Compose

Use um Modifier.size ou Modifier.defaultMinSize para definir um tamanho mínimo de pelo menos 44dp × 44dp.

Button(
     onClick = { },
     modifier = Modifier.size(width = 44.dp, height = 44.dp)
) {
     Text(text = "Scan for Issues")
}

React Native

Use propriedades de tamanho específicas da plataforma para garantir que os controles atendam ao tamanho mínimo da área de toque.

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

_Dica: Ao usar controles personalizados, certifique-se de que o papel de acessibilidade esteja configurado corretamente!_

Flutter

Os widgets Material do Flutter (ElevatedButton, IconButton etc.) impõem automaticamente uma área de toque mínima de 48dp por 48dp, atendendo a esse requisito por padrão. Violações geralmente ocorrem em alvos de toque personalizados criados com GestureDetector, que não expandem 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 onde uma restrição de design impede de atingir o mínimo de 44dp — 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 de Cursos da 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 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