Distância entre componentes interativos

A Silktide mede o tamanho e o espaçamento de botões, links e controlos de formulário nas suas páginas. Controlos pequenos muito próximos uns dos outros são fáceis de premir por engano, por isso cada um deve ter pelo menos 24 por 24 píxeis ou ter espaço livre suficiente à sua volta.

Por que isto é importante

Qualquer pessoa pode falhar um botão pequeno, mas, para pessoas com tremores, artrite ou controlo motor fino limitado, os controlos muito próximos tornam uma página realmente difícil de utilizar — tocar no link errado, enviar o formulário errado ou desistir por completo. O problema é pior em ecrãs táteis, onde a ponta do dedo é muito menos precisa do que o ponteiro do rato.

Este é o critério de sucesso 2.5.8 da (Tamanho do alvo (mínimo)), um requisito de da WCAG 2.2, pelo que faz parte do objetivo de conformidade que a maioria das organizações procura alcançar.

Como corrigir

Faça com que cada elemento interativo tenha pelo menos 24 por 24 píxeis. Definir min-width e min-height, ou adicionar preenchimento, costuma ser suficiente.
Em alternativa, adicione espaço entre os controlos para que uma área de 24 por 24 píxeis centrada em cada controlo não se sobreponha aos controlos vizinhos — alvos menores são aceitáveis quando não há mais nada por perto.
Preste especial atenção aos botões com ícones, aos links de paginação e aos ícones de redes sociais, que frequentemente são demasiado pequenos e estão muito próximos uns dos outros.

/* Problema: botões com ícones de 16 px encostados uns aos outros */
.toolbar button {
  width: 16px;
  height: 16px;
}

/* Correção: aumentar a área clicável para pelo menos 24x24 */
.toolbar button {
  min-width: 24px;
  min-height: 24px;
}

Como a Silktide faz a verificação

Testa as versões para dispositivos móveis e computadores de todas as páginas; os resultados podem ser diferentes entre ambas.
Encontra os elementos interativos: links, botões, campos de formulário e áreas de mapas de imagens.
Ignora elementos que normalmente não estão visíveis, como conteúdo posicionado fora do ecrã para , e quaisquer elementos que tenha excluído da verificação.
Considera aprovados os elementos com pelo menos 24 píxeis de largura e 24 píxeis de altura.
Ignora os controlos inseridos numa frase ou num bloco de texto, que a WCAG isenta desta regra.
Para cada elemento pequeno restante, mede o espaço até todos os outros elementos interativos. O espaço necessário é de 24 píxeis menos a largura do elemento (horizontalmente) e de 24 píxeis menos a altura do elemento (verticalmente).
Comunica o elemento se outro controlo estiver dentro desse espaço, exceto quando ambos são links para o mesmo destino. Os elementos fixos ao ecrã, como cabeçalhos fixos, são comparados com outros elementos fixos, e não com o conteúdo que passa por baixo deles.

Resolução de problemas

Um controlo pequeno passou na verificação

O tamanho, por si só, não implica uma falha: um controlo pequeno passa quando tem espaço livre suficiente à sua volta, está inserido em texto ou apenas tem como vizinhos links que apontam para o mesmo local. Isto reflete as exceções permitidas pela própria WCAG.

Apenas algumas falhas são apresentadas

A Silktide comunica até aos 10 exemplos mais graves por página. Corrigir um estilo partilhado costuma resolver muitos problemas de uma só vez.

Quero o padrão mais rigoroso

Esta verificação testa o mínimo de 24 por 24 píxeis do Nível AA. A verificação relacionada Controlos suficientemente grandes testa a recomendação mais rigorosa de 44 por 44 píxeis do Nível AAA.