- Hacer que botones/enlaces/tarjetas sean más fáciles de clicar/tocar/tapear y que tengan un tamaño que reduzca los toques por error
- Los nombres para “target size” varían: Apple lo llama hit target, Google Material Touch target, WAI target size, Google Lighthouse Tap Target, y en la comunidad de diseño se usa Clickable Area
- Según WCAG, el tamaño del objetivo debe ser de al menos 44 x 44 píxeles CSS (en Android, 48x48)
- Si es más pequeño, los círculos de toque pueden superponerse y provocar clics erróneos
- En Google Design for Driving, el mínimo es 76dp x 76dp
- Es bueno dar retroalimentación visual del objetivo (borde en el elemento o inversión del fondo)
- En objetivos menores a 24x24, es necesario dejar suficiente espacio (Line Height: 1.4, Padding: 1rem, etc.)
- También es recomendable aumentar la altura de la ProgressBar para dar suficiente área táctil
- Eliminar la Dead Target Area entre objetos que ejecutan la misma acción
- Usar pseudoelementos como
:before y :after para ampliar el tamaño del objetivo
- En
label, asegurarse de usar for para ampliar el tamaño del objetivo
- En checkboxes, usar
padding-block para agrandar el tamaño del objetivo
- Añadir padding también a botones/enlaces de texto
- En ítems de lista, usar padding y
display:flex para expandir al tamaño completo del ítem
- Métodos para probar el tamaño del objetivo: usar DevTools, aplicar CSS Outline, usar el navegador Polypane
1 comentarios
Es un contenido excelente, así que revisé quién era el autor y resulta que es Ahmad Shadeed. Cada vez que leo artículos escritos por él, no puedo evitar quedarme impresionado.