# Calculadora de alvos de toque (WCAG 2.2)

> Confira se ícones e botões atingem o tamanho mínimo das WCAG 2.2 e leve o CSS que aumenta a área de toque sem mudar o desenho.

URL: https://dpw.dev/ferramentas/alvos-de-toque/

Informe o tamanho dos alvos e o espaço entre eles: a prévia desenha a área de toque que as WCAG 2.2 pedem, diz se a fileira passa e o código aumenta a área clicável sem mudar o desenho.

Esta página tem uma calculadora interativa no navegador. Exemplo: ícones de 16px com 4px de espaço. As áreas de 24px se sobrepõem em 4px: o código aumenta o espaço para 8px.

```css
/* Área de toque de 24px (WCAG 2.5.8, AA) sem mudar o tamanho do alvo. */
.target {
  position: relative;
}

.target::before {
  content: "";
  /* Cresce para fora o que falta até 24px em cada eixo; num alvo maior, fica 0. */
  inset: min(0px, (100% - 24px) / 2);
  position: absolute;
}

/* Com alvos de 16px, as áreas de 24px só não se sobrepõem a 8px uma da outra. */
.targets {
  gap: 8px;
}
```

## O problema

Ícones de 16px ou 20px são o padrão em barras de ação, cabeçalhos de tabela e botões de fechar. No celular, o dedo cobre bem mais que isso, e o toque acerta o vizinho ou nada.

Aumentar o ícone muda o desenho, e aumentar o padding empurra o layout. As WCAG 2.2 medem o alvo clicável, não o desenho: dá para crescer só a área de toque.

## Como funciona

Um `::before` posicionado cobre o alvo e cresce para fora o que falta até o mínimo. O `inset` negativo vale a metade da diferença em cada lado:

`inset: min(0px, (100% - 24px) / 2)`

Em `top` e `bottom`, o `100%` é a altura do alvo; em `left` e `right`, a largura. Num ícone de 16px, cada lado cresce 4px e a área fica com 24px. Se o alvo já passa do mínimo, o `min()` devolve 0 e nada muda. O clique no `::before` conta como clique no elemento.

O critério 2.5.8 (nível AA) pede 24 × 24px, ou espaço para que um círculo de 24px centrado em cada alvo não toque o vizinho. Numa fileira de alvos iguais, as duas regras dão na mesma conta: alvo mais espaço tem de chegar a 24px de centro a centro. O 2.5.5 (nível AAA) pede 44 × 44px, sem a exceção do espaçamento.

Por isso a área extra só ajuda se couber: se as áreas de dois vizinhos se sobrepõem, o toque no meio vai para o que vem depois no HTML e o alvo de verdade continua pequeno. Nesse caso, o código aumenta o `gap` da fileira para o mínimo.

Links dentro de um parágrafo, alvos que o próprio navegador desenha e os que têm uma alternativa do tamanho certo na mesma página ficam de fora do critério. Os ícones soltos de uma interface, não.

## Quando usar

- Barras de ícones (curtir, compartilhar, salvar) e botões de fechar de 16px a 20px.
- Ações em linhas de tabela e listas densas, em que o espaço entre os ícones é pequeno.
- Controles de paginação, estrelas de avaliação e seletores de cor com amostras pequenas.
- Auditorias de acessibilidade que apontaram alvo pequeno, quando o desenho não pode mudar.

Suporte: funciona em todos os navegadores atuais ([Baseline](https://webstatus.dev/features/min-max-clamp)).

## Leia no blog

- [Acessibilidade e CSS](https://dpw.dev/acessibilidade/acessibilidade-css/)

## Conceitos Fundamentais de CSS

O `::before` posicionado se mede pelo bloco de contenção, e é isso que faz o `100%` do `inset` valer o tamanho do alvo. O livro explica posicionamento e bloco de contenção em 237 páginas sobre como o CSS funciona por dentro. [Conheça o livro](https://dpw.dev/livro-conceitos-fundamentais-css/?utm_source=blog&utm_medium=cta_ferramentas)

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml