Como projetar melhores tamanhos de alvos de clique com CSS

• 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

[hohpark]

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.