Pistas visuais

Alvos de toque precisam ser grandes o suficiente

Regra: target-size
Gravidade: Grave
Nível WCAG AA

Por que isso importa

Um controle menor que 24 por 24 pixels CSS é difícil de acertar para quem tem tremor, destreza reduzida ou apenas o polegar num ônibus em movimento. Toques errados costumam acionar o controle ao lado.

Como corrigir

Deixe os alvos interativos com pelo menos 24 por 24 pixels CSS.
Se o ícone visível precisa continuar pequeno, aumente a área de toque com padding, sem mudar o design.
Como alternativa, deixe espaço suficiente ao redor para que os círculos de 24 px não se sobreponham.

Na marcação

Falha

.icon-button { width: 18px; height: 18px; }

Passa

.icon-button { width: 24px; height: 24px; } /* or add spacing around it */

O que a verificação não consegue julgar

A regra prevê exceções que o motor nem sempre consegue julgar — um link no meio de uma frase ou um alvo com espaçamento suficiente. Confira os elementos apontados antes de tratá-los como falhas.

A exigência por trás disso

Esta regra é uma das formas de falhar nos seguintes critérios de sucesso das WCAG 2.2. O W3C, que publica a norma, explica cada um deles:

2.5.8 Tamanho do alvo (mínimo) (abre em nova aba) — Nível WCAG AA

Para aprofundar

Deque University sobre target-size (abre em nova aba)

A Deque mantém o axe-core, o motor de código aberto que o nosso scanner executa. A página deles documenta a regra como o motor a implementa.

Verificações automáticas encontram falhas que o navegador consegue comprovar. Elas não julgam se uma legenda está correta, se um texto alternativo é útil, nem se a página pode ser operada de ponta a ponta pelo teclado — isso exige uma pessoa.