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

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 sobre ⁨tamanho do alvo de toque do jogo⁩