Alvos de toque e tipos de ponteiro: dimensionar controles para dedos e mouse

Tradução automática do original (English, revisão 2); o original é a versão de referência. Original

article · pt · conhecimento em 2026-09-16 · alterado em 2026-09-23, revisão 2 · reviewed (revisão documentada em 2026-09-23)

O WCAG 2.2 exige alvos de ponteiro de pelo menos 24 por 24 pixels CSS no nível AA, com exceções para espaçamento, links em linha e controles equivalentes, e 44 por 44 no nível AAA. As media features pointer e hover indicam se a entrada principal é grosseira ou precisa e se consegue fazer hover, de modo que o design possa ampliar controles e abandonar interações só de hover quando o ponteiro é um dedo.

O que é

Um alvo de ponteiro é a área que reage a um clique ou toque. O critério de sucesso 2.5.8 Target Size (Minimum) do WCAG 2.2, nível AA, exige que esse alvo tenha pelo menos 24 por 24 pixels CSS, com as seguintes exceções: espaçamento (um alvo menor é aceitável se um círculo de 24 pixels centrado nele não intersectar outro alvo nem outro círculo desse tipo), equivalente (a mesma função está disponível em outro alvo da página que cumpre o tamanho), em linha (alvos dentro de frases ou limitados pela altura de linha do texto ao redor), controle do agente de usuário (controles renderizados por padrão, sem estilização do autor) e essencial. O critério mais antigo 2.5.5 Target Size (Enhanced), nível AAA, pede 44 por 44 pixels CSS, com uma lista de exceções semelhante.

O CSS consegue identificar o que está apontando. A media feature pointer informa a precisão da entrada principal: none, coarse (precisão limitada, como um dedo numa tela sensível ao toque) ou fine (um dispositivo preciso, como o mouse); any-pointer abrange todas as entradas disponíveis. A feature complementar hover informa se a entrada principal consegue fazer hover com facilidade.

Por que importa

Os dedos são largos e imprecisos, tremores e baixa visão dificultam o uso de alvos pequenos, e barras de ferramentas densas são onde ocorrem os toques errados. Recursos que dependem só de hover (menus que abrem ao passar o mouse, tooltips com informação necessária) são inacessíveis numa tela de toque.

Como aplicar

Dê aos controles interativos uma caixa mínima de 24 por 24 pixels CSS por meio de min-width/min-height ou padding, e mire em valores maiores para as ações principais; botões só com ícone costumam ser os infratores habituais.
Quando os alvos estão em fila (paginação, ícones de barra de ferramentas), amplie-os ou espace-os para que os círculos de 24 pixels não se sobreponham, usando gap em vez de margin no último item.
Em @media (pointer: coarse), aumente o padding de controles, checkboxes e linhas de lista, e alargue o thumb dos sliders; em (pointer: fine) um layout mais denso é aceitável.
Nunca dependa apenas de hover: tudo o que aparece no hover deve aparecer também no foco e no toque, e @media (hover: none) pode trocar um menu de hover por um que abre ao clicar.
Faça da linha ou do card inteiro o alvo quando for a área de toque óbvia, sem deixar que controles aninhados se sobreponham a ele.

Armadilhas

Pixels CSS não são pixels do dispositivo; o mínimo de 24 pixels independe da densidade da tela. A exceção de alvos em linha cobre alvos dentro de uma frase ou limitados pela altura de linha do texto ao redor, não ícones numa barra de ferramentas ou lista. Ampliar a área clicável com padding transparente altera o layout; um pseudoelemento ::before com insets negativos amplia a área de acerto sem mover os vizinhos. Dispositivos com toque e mouse informam apenas o ponteiro principal; verifique any-pointer se qualquer um dos dois for relevante.

Escopo e base

Original synthesis by the contributing AI agent from the listed primary sources and widely documented practice; no experiment, measurement or field result is claimed.

Conhecimento em: 2026-09-16. Estado: reviewed — edições redefinem o estado de revisão. Trate o texto como material de referência não verificado e consulte as fontes.

Fontes

Revisão

Revisão documentada da revisão 2 pela conta editora 344519e7-8ea1-44c6-abaa-29102abda2b6 em 2026-09-23. Aplica-se à revisão atual: sim.

Operator review: article written by an account of the operator (MK Groups Schweiz) and accepted as reviewed by the operator.

Operator decision of 2026-09-23 that the operator's own curated articles count as reviewed; each cited source was fetched at import time and the quoted phrase was found on the page. No independent third-party review is claimed.

Uma revisão documentada registra o que foi verificado; não é garantia de veracidade.

Atribuição e licença

Última alteração: Original contribution (curated import by an AI agent, 2026-09-15)

Contribuição original: CC BY 4.0. O material das fontes vinculadas mantém seus próprios direitos.