Um ícone pode parecer elegante no mockup e continuar difícil de acertar com o dedo, uma caneta ou um mouse impreciso. Quando vários controles pequenos ficam encostados, o problema piora: a pessoa abre o link vizinho, fecha o menu sem querer ou desiste de corrigir o formulário.

Landing pages criadas por IA costumam repetir esse padrão em headers compactos, carrosséis, seletores de plano, botões de fechar e links secundários. A correção não é aumentar todo ícone. O que precisa de espaço é o alvo interativo completo.

Este guia mostra como inventariar, medir, corrigir e retestar alvos de ponteiro sem depender de inspeção visual.

Use o mínimo da WCAG como piso

O critério Target Size (Minimum) da WCAG 2.2 define, no nível AA, um alvo de pelo menos 24 por 24 CSS pixels para entradas por ponteiro. Um controle menor ainda pode atender ao critério quando cumpre uma das exceções, como espaçamento suficiente, alternativa equivalente na mesma página, link inline, tamanho definido pelo navegador ou apresentação essencial.

Vinte e quatro pixels são um requisito mínimo, não uma recomendação universal de design. Um CTA primário, um botão de fechar usado sob pressão ou um controle frequente pode pedir uma área maior. O contexto, o dispositivo e a tarefa continuam importando.

Também não confunda pixels CSS com pixels físicos da tela. Meça a caixa no layout calculado pelo navegador.

Entenda qual caixa conta como alvo

O alvo é a área que responde à interação, não o desenho interno.

Um ícone de 16 por 16 pixels pode estar dentro de um botão de 40 por 40 e oferecer uma área confortável. O inverso também acontece: um SVG parece grande, mas apenas um caminho estreito recebe o evento.

Inspecione o elemento interativo e confirme:

  • largura e altura calculadas;
  • padding incluído na área clicável;
  • pseudo-elementos ou wrappers que não recebem o evento;
  • sobreposição por outro elemento;
  • área recortada por clip-path ou overflow;
  • estado em que o controle aparece ou se move;
  • tamanho depois de zoom e em cada breakpoint.

Use o destaque de caixa do DevTools e clique perto das bordas. A medição precisa combinar com o comportamento real.

Faça um inventário por tarefa

Liste os alvos na ordem em que a pessoa os encontra:

rota:
versão:
viewport:
tarefa principal:
controle:
elemento interativo:
largura x altura em CSS px:
distância até alvos vizinhos:
exceção aplicada:
resultado com toque, mouse e caneta:

Inclua estados escondidos no carregamento inicial:

  • menu mobile aberto;
  • accordion expandido;
  • carrossel em cada slide;
  • seletor de quantidade;
  • campo com botão de limpar;
  • senha com alternância de visibilidade;
  • modal e botão de fechar;
  • banner de cookies;
  • erro de formulário;
  • paginação e filtros.

Uma auditoria que mede apenas os CTAs visíveis perde justamente os controles menores.

Meça tamanho antes de avaliar espaçamento

Se a caixa interativa tem pelo menos 24 por 24 CSS pixels, ela atende à dimensão mínima desse critério. Se uma das dimensões fica abaixo disso, avalie uma exceção em vez de somar margens informalmente.

Na exceção de espaçamento, a WCAG usa um círculo imaginário de 24 CSS pixels de diâmetro centrado na caixa delimitadora do alvo pequeno. Esse círculo não pode cruzar outro alvo nem o círculo de outro alvo pequeno.

Essa conta explica por que uma fileira de ícones minúsculos e colados falha, enquanto controles menores com distância real podem passar. Na prática, ampliar a caixa interativa costuma ser mais simples de manter que depender de uma geometria delicada entre vários vizinhos.

Não conte a margem visual quando outro elemento cobre o espaço. Nem presuma que gap: 4px resolve qualquer botão de 20 pixels. A orientação, a outra dimensão e os alvos acima e abaixo também entram na avaliação.

Saiba quando uma exceção se aplica

As exceções evitam forçar mudanças que destruam texto ou controles nativos. Elas não são uma lista de atalhos.

Um link cujo tamanho é limitado pela altura da linha de texto pode usar a exceção inline. Isso não libera uma lista de navegação compacta, um rodapé com links amontoados ou um botão disfarçado dentro do parágrafo.

Controle equivalente

Um alvo pequeno pode ter outra forma de executar a mesma função na mesma página, desde que o controle equivalente atenda ao critério. A alternativa precisa estar disponível no mesmo contexto, não escondida em outra rota.

Controle do navegador

Se o navegador define o tamanho e o autor não o modifica, a exceção pode valer. Ao personalizar o controle, você volta a responder pela área criada.

Apresentação essencial

Use essa exceção somente quando a posição ou dimensão for necessária para transmitir informação ou cumprir uma exigência. “O design fica mais limpo” não torna um alvo pequeno essencial.

Registre a exceção por controle. Uma justificativa genérica para a página inteira não permite revisão.

Aumente a caixa sem inflar o ícone

O padrão mais simples mantém o desenho compacto e dá padding ao botão:

.icon-button {
  display: inline-grid;
  min-inline-size: 2.5rem;
  min-block-size: 2.5rem;
  place-items: center;
  padding: 0.5rem;
}


.icon-button svg {
  inline-size: 1rem;
  block-size: 1rem;
}

Use o elemento nativo adequado. Um button oferece semântica e comportamento que uma div com clique não ganha só por ficar maior. O artigo sobre HTML semântico aprofunda a escolha de elementos.

Evite adicionar uma camada invisível que invade o controle vizinho. Áreas clicáveis sobrepostas tornam o resultado imprevisível e podem capturar o alvo errado.

Corrija grupos densos com hierarquia

Toolbars, cabeçalhos e seletores de quantidade costumam concentrar falhas. Pergunte se todos os controles precisam estar visíveis ao mesmo tempo.

Possíveis correções:

  • aumentar padding e gap;
  • permitir quebra em mais de uma linha;
  • transformar ações raras em menu bem rotulado;
  • ampliar toda a linha de um item de menu;
  • separar navegação principal de ícones utilitários;
  • manter o botão de fechar longe de outro alvo;
  • evitar controles sobrepostos a imagens e carrosséis;
  • mostrar texto junto de ícones ambíguos.

Não reduza fonte e ícone para encaixar mais ações. Densidade é uma decisão de produto. Se a largura acabou, reorganize a interface.

Teste todos os breakpoints e estados

Um botão pode ter 40 pixels no desktop e perder padding numa media query mobile. Outro pode ficar espremido quando a tradução aumenta o rótulo.

Repita a medição em:

  • largura ampla;
  • tablet;
  • celular estreito;
  • orientação horizontal;
  • zoom alto;
  • texto ampliado;
  • menu e modal abertos;
  • carregamento, erro e sucesso;
  • conteúdo longo e localização prevista.

O guia de zoom e reflow ajuda a verificar se o aumento das áreas interativas não cria corte ou rolagem lateral. Um alvo grande que sai da viewport continua inacessível.

Use um aparelho real para confirmar a tarefa

O DevTools mede CSS e acelera o inventário. Depois, abra a página em um aparelho real.

Faça a tarefa com:

  1. o polegar da mão que segura o aparelho;
  2. a outra mão;
  3. toques próximos das bordas do controle;
  4. rolagem seguida de toque;
  5. orientação horizontal;
  6. zoom ou tamanho de texto maior quando disponível.

Observe ativações acidentais, necessidade de corrigir a posição do dedo e controles encostados nas bordas do dispositivo. O guia de teste em celulares reais foi escrito para performance, mas o preparo de aparelhos, rede e evidências também ajuda nesta passagem manual.

Não declare conformidade porque uma pessoa acertou o CTA uma vez. Meça a implementação e use o aparelho para encontrar problemas de uso que o número não mostra.

Não esqueça foco e nome acessível

Tamanho resolve apenas uma parte do controle. Um botão amplo sem nome acessível continua confuso para tecnologia assistiva. Um botão que só funciona com toque continua indisponível para teclado.

Para cada alvo corrigido, confirme:

  • elemento semântico;
  • nome acessível que descreve ação ou destino;
  • indicador de foco visível;
  • operação por teclado;
  • estado desabilitado comunicado;
  • mudança de estado anunciada quando necessário;
  • contraste do componente e do foco;
  • ausência de área sobreposta.

Use o roteiro de navegação por teclado e o teste com leitor de tela para completar a revisão.

Peça ao agente um relatório mensurável

Defina escopo, viewport e evidência:

Audite os alvos de ponteiro desta landing page antes de editar.


Escopo:
- fonte e versão: [origem]
- páginas e estados: [lista]
- viewports: [larguras]
- tarefa principal: [descrição]
- referência: WCAG 2.2, critério 2.5.8


Para cada alvo, informe:
- seletor ou componente;
- função e nome acessível;
- largura e altura calculadas em CSS pixels;
- distância até alvos vizinhos;
- resultado ou exceção aplicável;
- menor correção proposta.


Não conte o tamanho visual de um ícone como área clicável.
Não use sobreposição invisível para invadir alvos vizinhos.
Não edite nem publique antes da aprovação do inventário.

Depois, peça a mudança em poucos componentes e repita a medição. Uma regra global de min-height pode deformar campos, links inline e controles do navegador.

Reteste depois de publicar

O CSS servido na URL pode não ser o mesmo que você acabou de inspecionar localmente. Confirme a versão publicada antes de medir.

Na URL final:

  1. percorra a tarefa no celular;
  2. meça os controles pequenos no layout calculado;
  3. abra menus, accordions, formulários e modais;
  4. teste zoom, rotação e texto longo;
  5. repita com teclado;
  6. confira nome e estado com leitor de tela;
  7. registre falhas e o controle vizinho ativado por engano;
  8. republique o mesmo Site se houver correção.

O fluxo de Publicação do Site no Ar permite substituir a versão mantendo o Site e sua URL. A equipe ainda precisa confirmar que o deploy terminou e retestar o conteúdo entregue.

Feche com uma matriz pequena

Guarde o resultado num formato que aceite nova rodada:

versão:
URL:
viewport e aparelho:
tarefa:
alvos medidos:
alvos corrigidos:
exceções e justificativas:
ativações acidentais:
teclado e leitor de tela:
falhas restantes:
responsável:

O alvo está pronto quando sua caixa interativa é mensurável, separada dos vizinhos e operável nos estados reais da página. O ícone bonito é só a parte que aparece.