Sites institucionais · GUIA PRÁTICO

Como dimensionar alvos de toque em links e botões

Revise a área realmente clicável de ações em telas estreitas.

Na WCAG 2.2, o critério 2.5.8 (AA) requer alvos de ponteiro de pelo menos 24 × 24 pixels CSS, ou espaço suficiente para que o círculo de 24 px centrado em um alvo pequeno não toque outro alvo. Meça a área clicável de verdade, não o tamanho do desenho do ícone.

Como medir

  1. Abra DevTools e inspecione o elemento acionável. Veja o retângulo de conteúdo e padding; não conte espaço visual que não faz parte do link/botão.
  2. Se largura e altura permitirem um quadrado completo de 24 × 24 CSS px dentro do alvo, ele atende ao requisito de dimensão mínima.
  3. Se for menor, desenhe mentalmente um círculo de 24 px centrado no retângulo do alvo. A exceção de espaçamento aplica-se quando esse círculo não intersecta outro alvo nem o círculo de outro alvo pequeno.
  4. Ajuste padding/min-height/min-width e teste em viewport estreita; não aumente só a imagem mantendo hit area pequena.

Exceções da WCAG 2.2 AA

O critério tem exceções para: alvo equivalente em outro lugar que atenda ao tamanho; link inline em texto ou tamanho limitado pela altura de linha; controle fornecido pelo user agent sem alteração de tamanho; elemento essencial cujo posicionamento/tamanho transmite informação; e espaçamento conforme o círculo. A exceção não é um passe geral para ícones pequenos: confira o caso exato e ofereça alternativa quando possível.

44 × 44 CSS px é o critério AAA 2.5.5, não o mínimo AA 2.5.8. Área maior costuma facilitar toque, mas não atribua 44 px ao requisito AA.

Valide cada estado

Teste menu, botões, controles de ícone, alvos revelados em diálogo, orientação retrato/paisagem, zoom e teclado. Confirme foco visível e que controles próximos não são acionados por engano. Meça a área com DevTools ou ferramenta de acessibilidade e documente dimensões e espaçamento.

Consulte Target Size (Minimum), WCAG 2.2 e Target Size (Enhanced), nível AAA. Veja o núcleo institucionais.

Continue por aqui