Cuando tu diseño se muestre en un dispositivo móvil, asegúrate de que los elementos interactivos, como los botones o los vínculos, sean lo suficientemente grandes y tengan suficiente espacio alrededor. Esto facilita que los usuarios presionen sin superponerse accidentalmente con otros elementos. Esto beneficia a todos los usuarios, pero es especialmente útil para las personas con discapacidades motoras.
El tamaño mínimo recomendado del objetivo táctil es de alrededor de 48 píxeles independientes del dispositivo en un sitio con un viewport para dispositivos móviles configurado correctamente. Por ejemplo, si bien un ícono puede tener solo un ancho y un alto de 24 px, puedes usar padding adicional para aumentar el tamaño del objetivo de toque a 48 px. El área de 48 px × 48 px corresponde a alrededor de 9 mm, que es aproximadamente el tamaño de la yema del dedo de una persona.
Los objetivos táctiles también deben estar separados por unos 8 píxeles, tanto horizontal como verticalmente, de modo que el dedo del usuario que presiona un objetivo táctil no toque inadvertidamente otro objetivo táctil.
Prueba tus objetivos táctiles
Si tu objetivo es el texto y usaste valores relativos, como em o rem, para dimensionar el texto y el padding, puedes usar herramientas para desarrolladores para verificar que el valor calculado de esa área sea lo suficientemente grande.
Inspecciona el vínculo. En las Herramientas para desarrolladores de Chrome, cambia al panel Computed, en el que puedes inspeccionar las distintas partes del cuadro y ver a qué tamaño de píxel se resuelven. En las Herramientas para desarrolladores de Firefox, hay un panel de diseño. En ese panel, obtendrás el tamaño real del elemento inspeccionado.
Detecta pantallas táctiles con consultas de medios
En lugar de probar las dimensiones de la ventana gráfica y adivinar las dimensiones pequeñas que probablemente sean teléfonos o tablets, existen formas más sólidas de adaptar tu diseño en función de las capacidades reales del dispositivo.
Con las consultas de medios, podemos detectar si la entrada principal de un usuario es una pantalla táctil (pointer) y si alguna de las entradas detectadas es una pantalla táctil (any-pointer). Las funciones pointer y any-pointer devuelven fine o coarse.
Un puntero preciso indica que el usuario tiene un mouse o un panel táctil. Esto sigue siendo así incluso si el mouse está conectado por Bluetooth a un teléfono o una tablet. Un puntero coarse indica una pantalla táctil, que puede ser de cualquier tamaño o tipo de dispositivo.
Si agregas una consulta de medios para aumentar el objetivo táctil, haz pruebas con un puntero grueso para que puedas aumentar los objetivos de toque para todos los usuarios de pantallas táctiles, sin importar el dispositivo que usen.
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
Obtén más información sobre las funciones de medios de interacción, como pointer, en Conceptos básicos del diseño web responsivo.