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 de toque de um elemento interativo pode ser expandida além de seus limites visuais — por exemplo, usando um TouchDelegate para aumentar a região ativa de toque. Após uma consideração cuidadosa, a Deque mantém que é melhor prática fazer com que os limites visuais e interativos do alvo se alinhem. Isso proporciona ao usuário final uma área clara para interagir e aumentar a chance de sucesso. Portanto, esta regra também testa se os limites visuais dos elementos interativos atendem ao mínimo de 44dp.

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 de **Atributos** , observe os width e height valores 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 da Área 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 de toque devem coincidir — expandir apenas a área de toque via TouchDelegate sozinho não é suficiente.

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

XML

Defina minimumHeight e minimumWidth no elemento, ou defina explicitamente os layout_width e layout_height valores 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.) aplicam automaticamente uma área mínima de toque de 48dp por 48dp, cumprindo esse requisito por padrão. As violações geralmente vêm de alvos de toque personalizados construídos com GestureDetector, o 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 o cumprimento do 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