Controlos suficientemente grandes

A Silktide mede os botões, as ligações e os controlos de formulário nas suas páginas e comunica quaisquer elementos com menos de 44 por 44 píxeis. Os controlos maiores são mais fáceis de premir com precisão para todas as pessoas, especialmente em ecrãs táteis.

Porque é importante

Os alvos pequenos exigem uma precisão que muitas pessoas não têm. Visitantes com tremores, destreza limitada ou dedos maiores em dispositivos táteis falham frequentemente os controlos pequenos, ativam o controlo errado ou precisam de várias tentativas. Tamanhos de alvo generosos tornam o seu site mais rápido e menos frustrante para todas as pessoas visitantes, não apenas para aquelas com limitações motoras.

Este é o critério de sucesso 2.5.5 (Tamanho do alvo (Aprimorado)) da WCAG, um requisito de Nível AAA. AAA é um padrão aspiracional: a maioria dos sites falha esta verificação por predefinição, porque 44 por 44 píxeis é maior do que as ligações e os botões típicos. Se está a trabalhar para alcançar o Nível AA, comece pela verificação relacionada de Distância entre componentes interativos, que testa o requisito AA de 24 por 24 píxeis.

Como corrigir

1. Aumente os controlos principais para, pelo menos, 44 por 44 píxeis CSS, utilizando min-width, min-height ou preenchimento. Dê prioridade a ações principais, como a navegação, a pesquisa e os botões de formulário.
2. Quando aumentar um controlo não for prático, disponibilize uma ligação ou um controlo equivalente na mesma página que cumpra o tamanho — a Silktide ignora automaticamente as ligações pequenas quando existe uma ligação suficientemente grande para o mesmo destino.
3. Se decidiu que um controlo é aceitável tal como está — por exemplo, se estiver abrangido por uma exceção da WCAG que esta verificação não consegue detetar — pode aprovar o resultado ou excluir o elemento da verificação.

/* Problema: um botão de ícone de 30x30 */
.search-button {
  width: 30px;
  height: 30px;
}

/* Correção: cumprir a recomendação de 44x44 */
.search-button {
  min-width: 44px;
  min-height: 44px;
}

Como a Silktide testa isto

1. Testa as versões móveis e de computador de cada página; os resultados podem ser diferentes entre as duas.
2. Encontra os elementos interativos: ligações, botões, campos de formulário e áreas de mapas de imagens.
3. Ignora os elementos que normalmente não estão visíveis, como conteúdo posicionado fora do ecrã para leitores de ecrã, e quaisquer elementos que tenha excluído da verificação.
4. Ignora os controlos que estão diretamente junto a texto, uma vez que a WCAG isenta os alvos que aparecem numa frase ou num bloco de texto.
5. No caso das ligações, ignora quaisquer ligações que tenham uma equivalente: outra ligação visível na mesma página que aponte para o mesmo destino e tenha pelo menos 44 por 44 píxeis.
6. Comunica todos os elementos restantes com menos de 44 píxeis de largura ou 44 píxeis de altura. Os tamanhos são arredondados para uma casa decimal antes da comparação, correspondendo ao que é apresentado nos resultados.

Resolução de problemas

Apenas algumas falhas são apresentadas

A Silktide comunica até 100 exemplos por página. Como as falhas desta verificação são comuns, uma página pode ter mais; corrigir estilos partilhados resolve muitos resultados de uma só vez.

A WCAG permite exceções que esta verificação não consegue detetar

A WCAG isenta os alvos cujo tamanho é essencial, definido pelo navegador em vez dos seus estilos ou duplicado por um controlo equivalente noutro local da página. A Silktide deteta automaticamente as exceções de texto incorporado e de ligações equivalentes; as restantes exigem o seu discernimento. Aprove os resultados que se qualificam.

Saiba mais

• Compreender o Tamanho do alvo (Aprimorado) (WCAG 2.5.5)
• Distância entre componentes interativos