- Tornar botões/links/cartões mais fáceis de clicar/tocar/tapar e com um tamanho que evite toques acidentais
- Os nomes usados para “tamanho do alvo” variam: a Apple usa hit target, o Google Material usa Touch target, a WAI usa target size, o Google Lighthouse usa Tap Target, e na comunidade de design também se usa Clickable Area
- Segundo o WCAG, o tamanho do alvo deve ser de pelo menos 44 x 44 pixels CSS (no Android, 48x48)
- Abaixo disso, os círculos de toque podem se sobrepor e causar cliques incorretos
- No Google Design for Driving, o mínimo é 76dp x 76dp
- É bom fornecer feedback visual do alvo (borda no elemento ou inversão de fundo)
- Para alvos menores que 24x24, é necessário manter espaçamento suficiente (
line-height: 1.4, padding: 1rem etc.)
- Também é melhor aumentar a
height de ProgressBar para oferecer uma área de toque suficiente
- Remover Dead Target Area entre elementos que executam a mesma ação
- Usar pseudo-elementos como
:before e :after para aumentar o tamanho do alvo
- Em
label, use sempre for para ampliar o tamanho do alvo
- Em checkboxes, use
padding-block para aumentar o tamanho do alvo
- Adicionar
padding também em botões/links de texto
- Em itens de lista, usar
padding e display:flex para expandir para o tamanho do item inteiro
- Como testar o tamanho do alvo: usar DevTools, aplicar CSS Outline, usar o navegador Polypane
1 comentários
O conteúdo é excelente, então fui ver quem era o autor e era Ahmad Shadeed. Sempre que leio textos escritos por ele, não tem como não ficar impressionado.