Alvo de toque pequeno: o botão que o mouse acerta e o polegar erra

No quadro de tarefas, cada cartão tem um lápis de editar e um X de excluir, ambos com 16 pixels e separados por 4. No notebook, ninguém erra. No celular, dentro do ônibus, a pessoa queria editar "Enviar orçamento" e excluiu o cartão. O teste do componente foi feito com mouse.

A resposta curta: a área que recebe o toque precisa ser bem maior que o desenho do ícone. As diretrizes WCAG 2.2 pedem no mínimo 24 por 24 pixels CSS (ou espaço equivalente em volta) no nível AA, e o nível AAA pede 44 por 44. Mire em 44. O ícone continua com 16 pixels, só a área clicável cresce, com padding ou um pseudo-elemento.

Por que o dedo erra o que o mouse acerta

O cursor do mouse tem um ponto ativo de um pixel, e a pessoa vê exatamente onde ele está antes de clicar. O dedo cobre uma área muito maior que o alvo, esconde o próprio alvo no momento do toque, e o sistema escolhe um ponto dentro dessa área. Ícone pequeno vira loteria, ainda mais com o aparelho balançando.

Some a isso tremor nas mãos, uso com uma mão só, polegar esticado até o canto da tela e luvas no inverno. O alvo que funciona no teste da equipe, sentada com o aparelho firme, falha para muita gente fora do escritório.

O outro problema é a vizinhança. Dois alvos pequenos colados significam que errar um acerta o outro. No exemplo do quadro, errar o lápis por 5 pixels exclui a tarefa.

Os números que valem a pena conhecer

• WCAG 2.2, critério 2.5.8 (nível AA): alvo de pelo menos 24 por 24 pixels CSS, ou espaçamento suficiente para que um círculo de 24 pixels centrado em cada alvo não encoste em outro alvo. Há exceções, como links dentro de um parágrafo de texto e controles nativos do navegador sem estilo.
• WCAG, critério 2.5.5 (nível AAA): 44 por 44 pixels CSS.
• Guias das plataformas móveis: as diretrizes da Apple falam em 44 por 44 pontos e as do Material Design, do Google, em 48 por 48 dp para alvos de toque.

Na prática: 24 é o piso para não falhar na auditoria, 44 a 48 é o que deixa o polegar confortável. Pixel CSS não é pixel físico, então esses números já consideram a densidade da tela.

Como aumentar a área sem mudar o visual

1. Faça o controle ser um button (ou link), nunca um ícone solto com evento de clique.
2. Dê ao botão min-width e min-height de 44 pixels e centralize o ícone dentro dele.
3. Remova borda e fundo se o design pede só o ícone. A área continua lá, invisível.
4. Quando não houver espaço para crescer o botão, amplie a área com um pseudo-elemento posicionado.
5. Separe alvos vizinhos com espaço, não só com tamanho, para o erro cair no vazio e não na ação errada.
6. Dê nome acessível ao botão de ícone com aria-label, já que não há texto visível.

<button class="botao-icone" type="button" aria-label="Editar tarefa Enviar orçamento">
  <svg aria-hidden="true" width="16" height="16"><use href="#icone-lapis"></use></svg>
</button>

.botao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.acoes-cartao {
  display: flex;
  gap: 8px;
}

No quadro do exemplo, o lápis e o X passam a ocupar 44 pixels cada, com 8 de folga. O cartão fica um pouco mais alto, mas o desenho dos ícones é o mesmo.

Quando o layout não deixa crescer

Em linhas densas, como uma tabela com ícone de ordenar no cabeçalho, você pode ampliar só a área sensível ao toque:

.alvo-ampliado {
  position: relative;
}
.alvo-ampliado::after {
  content: "";
  position: absolute;
  inset: -12px;
}

Um elemento de 20 pixels com inset: -12px passa a receber toques numa área de 44. Cuidado com dois efeitos colaterais: a área ampliada pode cobrir o vizinho, então confira a sobreposição, e ferramentas que medem o tamanho do elemento não enxergam o pseudo-elemento.

Hover não existe no dedo

Muitos alvos pequenos nascem de outro vício: ação que só aparece ao passar o mouse. O ícone de excluir surge no hover do cartão, e no celular a pessoa precisa tocar uma vez para revelar e outra para agir, ou nunca descobre que a ação existe. Deixe ações essenciais sempre visíveis, ou num menu explícito. O mesmo vale para dicas, como discute dica que só aparece no hover, e para eventos de ponteiro em geral, tema de o mouse não é o único ponteiro.

Se você quer ajustar o layout ao tipo de ponteiro, as media queries (pointer: coarse) e (hover: none) existem para isso. Use para acrescentar conforto, não para esconder o problema: notebooks com tela sensível ao toque têm mouse e dedo ao mesmo tempo, então o tamanho decente deve valer para todos.

Como achar os alvos pequenos do seu site

Cole no console do navegador, na página que quer auditar. O script lista os controles interativos visíveis com menos de 24 pixels em algum lado:

[...document.querySelectorAll('a, button, input, select, textarea, [role="button"]')]
  .map((el) => ({ el, r: el.getBoundingClientRect() }))
  .filter(({ r }) => r.width > 0 && (r.width < 24 || r.height < 24))
  .forEach(({ el, r }) =>
    console.log(Math.round(r.width) + 'x' + Math.round(r.height), el)
  );

Revise o resultado com critério. Links dentro de parágrafos são exceção no critério 2.5.8, e elementos ampliados por pseudo-elemento aparecem como pequenos mesmo estando corretos. O que sobrar é sua lista de correção, começando pelos controles com ação destrutiva.

Depois, teste no aparelho real com o polegar da mão que segura o telefone, andando. Parece exagero, mas é o uso real de boa parte das pessoas. A base do CSS para celular, incluindo tamanhos de toque, está em CSS mobile-first.

Erros comuns

• Área clicável igual ao desenho do ícone. Ícone de 16 pixels vira alvo de 16 pixels, e o polegar erra com frequência.
• Ações destrutivas coladas em ações comuns. Errar o editar por poucos pixels exclui o registro.
• Ação essencial só no hover. No celular ela não aparece, ou exige toques extras que ninguém adivinha.
• Usar div com clique no lugar de button. O teclado não alcança e o leitor de tela não anuncia como botão.
• Pseudo-elemento ampliado sem conferir o vizinho. A área invisível cobre outro controle e rouba os toques dele.
• Aumentar o tamanho só com (pointer: coarse). Telas híbridas e configurações variadas ficam com alvos pequenos.

Checklist

• Nenhum controle interativo, fora links em texto corrido, tem menos de 24 pixels em algum lado.
• Botões de ícone têm área de 44 pixels ou próxima disso.
• Alvos vizinhos têm espaço entre si, principalmente perto de ações destrutivas.
• Ações essenciais ficam visíveis sem hover.
• Botões de ícone têm nome acessível.
• O script de auditoria foi rodado nas telas principais.
• O teste final foi feito com o polegar, no aparelho real.

Pegue o celular com uma mão só e, usando o polegar, toque no menor botão da tela mais usada do seu sistema. Você acerta na primeira tentativa, três vezes seguidas?