Cuando tu diseño se muestra en un dispositivo móvil, debes asegurarte de que los elementos interactivos, como los botones o vínculos, sean lo suficientemente grandes y tengan suficiente espacio alrededor para que sea sencillo presionarlos sin superponerse accidentalmente sobre otros elementos. Esto beneficia a todos los usuarios, pero es especialmente útil para cualquier persona con una discapacidad motriz.
El tamaño mínimo de objetivo táctil recomendado es de alrededor de 48 píxeles independientes del dispositivo en un sitio con una ventana móvil establecida adecuadamente. Por ejemplo, a pesar de que un ícono puede tener solo un ancho y una altura de 24 px, puedes usar relleno adicional para llevar el tamaño del objetivo de presión a hasta 48 px. El área de 48 x 48 píxeles corresponde a alrededor de 9 mm, que es aproximadamente el tamaño del área de la yema del dedo.
En la demostración, agregué padding a todos los vínculos para asegurarme de que cumplan con el tamaño mínimo.
Los objetivos táctiles también deberían tener un espacio de alrededor de 8 píxeles de separación, en orientación horizontal y vertical, de manera que el dedo del usuario, al presionar un objetivo de presión, no toque inintencionalmente otro objetivo de presión.
Prueba tus objetivos táctiles
Si tu objetivo es el texto y usaste valores relativos como em o rem para ajustar el tamaño del texto y cualquier relleno, puedes usar las Herramientas para desarrolladores a fin de verificar que el valor calculado de esa área sea lo suficientemente grande.
En el siguiente ejemplo, uso em para mi texto y padding.
Inspecciona el a del vínculo y, en las Herramientas para desarrolladores de Chrome, cambia al panel Computed, en el que puedes inspeccionar las distintas partes del cuadro y ver el tamaño de píxeles que resuelven.
En las Herramientas para desarrolladores de Firefox hay un panel de diseño.
En ese panel, obtienes el tamaño real del elemento inspeccionado.
Cómo usar consultas de medios para detectar el uso de pantallas táctiles
En lugar de simplemente probar las dimensiones del viewport y, luego, adivinar que las dimensiones pequeñas son de teléfonos o tablets, que a su vez usan una pantalla táctil, ahora hay formas más sólidas de adaptar tu diseño en función de las capacidades reales del dispositivo.
Una de las funciones multimedia que ahora podemos probar con las consultas de medios es si la entrada principal del usuario es una pantalla táctil (pointer) y si alguna de las entradas detectadas actualmente es una pantalla táctil (any-pointer). Las funciones pointer y any-pointer mostrarán fine o coarse.
Un puntero preciso es alguien que usa un mouse o un panel táctil, incluso si ese mouse está conectado a un teléfono a través de Bluetooth.
Un puntero coarse indica una pantalla táctil, que puede ser un dispositivo móvil, pero también una pantalla de laptop o una tablet grande.
Si ajustas tu CSS en una consulta de medios para aumentar el objetivo táctil, probar un puntero general te permite aumentar los objetivos táctiles para todos los usuarios de pantallas táctiles. Esto proporciona un área de presión más grande, ya sea que el dispositivo sea un teléfono o un dispositivo más grande.
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
Puedes obtener más información sobre las funciones de interacción multimedia, como el puntero, en el artículo Conceptos básicos del diseño web responsivo.