Área de acionamento (mínima)
O que a norma pede
Elementos interativos têm área de toque ou clique de pelo menos 24 × 24 pixels CSS, ou espaço suficiente em volta, salvo exceções como links dentro de um texto.
Formas de atender
Basta uma delas. A primeira é a preferida; as demais são alternativas para exceções.
- Uma forma de atender: a área de acionamento tem pelo menos 24 × 24 pixels CSS.
- Ou: o elemento é menor, mas tem espaçamento tal que tamanho mais espaço chegam a 24 pixels CSS em todas as direções.
- Ou: há outro controle com a mesma função, na mesma página, com pelo menos 24 × 24 pixels CSS.
- Ou: o elemento está dentro de uma frase ou bloco de texto, ou seu tamanho é definido pelo navegador, ou é essencial ou exigido por lei.
- 2.5.8 (AA)
Parecido na NBR 17060
A NBR 17060 trata de aplicativos. Se o seu serviço também tem app, veja o que a Bússola da NBR 17060 diz sobre o mesmo assunto:
Visões por perfil
Escolha um perfil para ver o que o requisito pede de quem ocupa esse papel:
Defina no sistema de design um tamanho padrão confortável para os alvos, como 44 × 44 px, e nunca menos de 24 × 24 px sem espaçamento em volta. Aumente a área clicável dos ícones sem precisar aumentar o desenho.
Paginação da lista de resultados
Números de página no rodapé da lista.
Errado: Alvos pequenos e colados
Na especificação
Números com 16 × 16 px e 4 px de espaço.
É fácil tocar na página errada.
Certo: Alvos confortáveis
Na especificação
Números com área de 44 × 44 px.
O toque acerta o alvo.
Garanta que a área clicável dos controles tenha pelo menos 24px de largura e de altura, usando padding para ampliar ícones pequenos. Confira a área real nas ferramentas do navegador.
Botão de fechar
Um “X” de 12px no canto do aviso.
Errado: Área igual ao ícone
.fechar { width: 12px; height: 12px; padding: 0; }Área de 12 × 12 px: difícil de acertar.
Certo: Área ampliada
.fechar { min-width: 44px; min-height: 44px; } /* o ícone continua com 12px */Fácil de acionar sem mudar o visual.
Inclua o tamanho mínimo dos alvos no padrão do produto e priorize os controles de fluxos críticos no celular, por onde chega a maior parte do público. Alvos pequenos geram toques errados e frustração.
Seleção de horário no celular
Horários disponíveis em uma grade compacta.
Errado: Grade compacta
Situação
Horários de 20 × 20 px lado a lado.
Muitas pessoas marcam o horário errado.
Certo: Botões maiores
Situação
Horários de 44 px de altura, em lista.
Menos erros e remarcações.
Meça nas ferramentas do navegador a área de ícones e controles compactos e observe o espaço entre alvos vizinhos. Alvos menores que 24px precisam de espaçamento que compense; teste também no celular, com o polegar.
Ícones de redes sociais
Ícones no rodapé do site.
Errado: Abaixo do mínimo
Medição
16 × 16 px, com 2 px entre eles.
Não atende ao mínimo.
Certo: Dentro do mínimo
Medição
Área de 44 × 44 px cada.
Atende com folga.
Evite links de uma palavra curta, como “aqui”, que viram alvos minúsculos. Prefira listas a vários links colados na mesma linha, separados por barras.
Links do rodapé
Links institucionais em uma linha.
Errado: Links colados
No rodapé
“LGPD | Termos | Mapa | Ajuda”
Alvos pequenos e próximos.
Certo: Lista espaçada
No rodapé
Lista: Proteção de dados · Termos de uso · Mapa do site · Ajuda
Cada link é fácil de acionar.