Calculadora de alvos de toque (WCAG 2.2)
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.
Veja
As áreas de 24px se sobrepõem em 4px: o código aumenta o espaço para 8px.
Copie o código
/* Á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.
Leia no blog
Outras ferramentas
Calculadora de aspect ratio
Descubra a largura ou a altura a partir de uma proporção e leve o aspect-ratio pronto para o CSS.
SeletoresGerador de quantity queries com :has()
Monte o seletor que muda o layout pelo número de filhos e veja a condição valer na prévia.
TipografiaEscala fluida de tipografia e espaçamento
Gere fontes e espaços com clamp() que crescem com a viewport entre um mínimo e um máximo, sem media queries.