# Teste a área de acerto, não apenas a arte do botão

> Torne os controles do jogo mais fáceis de acertar, separando a arte visual dos limites interativos e verificando o tamanho, o espaçamento e a sobreposição em dispositivos de toque.

- URL: https://oneshotgems.ai/pt-BR/topics/game-touch-targets
- Categoria: Para desenvolvedores de jogos
- Tipo: Guia
- Atualizado: 5 de outubro de 2026

Um controle pode parecer grande enquanto sua região de ocorrência real é uma pequena parte do trabalho artístico. Em um jogo de navegador, defina deliberadamente os limites interativos e teste-os com o dedo, não apenas com o ponteiro preciso do mouse. O alvo certo depende de sua função, espaçamento e movimento ao redor, mas regiões de acerto claras reduzem erros acidentais e tornam a entrada mais fácil de raciocinar.

## Separe o desenho visível da área interativa

Para um ícone pequeno, como o botão de pausa, faça a área clicável se estender além do símbolo desenhado. Mantenha distância suficiente entre ações vizinhas para que um dedo não ative as duas por engano. Em um jogo em canvas, desenhe o objeto e calcule sua área interativa com os mesmos dados de layout; duplicar coordenadas em trechos diferentes do código pode causar divergências.

O critério de sucesso 2.5.8 da WCAG 2.2 estabelece o mínimo de 24 × 24 pixels CSS, com exceções definidas, incluindo espaçamento e controles equivalentes. Trate-o como requisito de acessibilidade, não como limite de design: um alvo móvel ou uma ação principal pode precisar de uma área maior. Não dependa apenas de cor ou de uma borda discreta para indicar onde o toque é reconhecido.

## Verifique as áreas interativas em tamanhos reais de tela

Teste toques perto de cada borda e canto, entre controles adjacentes e enquanto a área de jogo muda de escala. Confirme que o controle visível, a área interativa do DOM e as coordenadas do mundo do jogo apontam para a mesma ação. Para objetos pequenos em movimento, considere uma área de acerto maior que a arte, mantendo uma distância significativa dos perigos.

Teste diferentes tamanhos de viewport usando toque. Um mouse pode acertar um ponto com mais precisão do que um dedo. Converta as posições do ponteiro para o sistema de coordenadas da área e confira novamente depois de redimensionar. A explicação da W3C descreve o critério e suas exceções.

## Perguntas

**Todo alvo do jogo precisa ter pelo menos 24 pixels?** O critério 2.5.8 da WCAG 2.2 exige alvos de pelo menos 24 × 24 pixels CSS para entradas por ponteiro, com algumas exceções. Avalie o critério e escolha áreas maiores quando o contexto do jogo exigir.

**A área interativa pode ser maior que a arte?** Sim. Uma área interativa ampliada ao redor de um ícone pequeno pode facilitar o toque, desde que os controles próximos continuem distintos e tenham resultados previsíveis.

## Siga sua curiosidade

- [Projete controles por toque para jogos web](https://oneshotgems.ai/pt-BR/topics/touch-controls-for-web-games): Planeje a interação por toque considerando os gestos do navegador, o feedback visual e o estado do ponteiro para que o jogo responda de forma previsível nos celulares.
- [Crie layouts adaptáveis para jogos de navegador](https://oneshotgems.ai/pt-BR/topics/responsive-game-layouts): Adapte uma superfície de jogo ao seu contêiner sem vincular o estado da simulação às dimensões da tela e teste o layout em janelas de visualização variáveis.
- [Projete um jogo para celular para jogar com um polegar](https://oneshotgems.ai/pt-BR/topics/one-thumb-mobile-game-design): Reduza o jogo com um polegar para um conjunto de ações viável, leve em consideração a posição das mãos e a oclusão da tela e, em seguida, teste a mecânica em pegadas realistas.

## Leitura complementar

- [W3C: Tamanho alvo (mínimo)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum)
- [MDN: eventos de ponteiro](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)

---
Página canônica: https://oneshotgems.ai/pt-BR/topics/game-touch-targets