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 a su alrededor para que sea fácil 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 del objetivo táctil recomendado es de aproximadamente 48 píxeles independientes del dispositivo en un sitio con un viewport para dispositivos móviles configurado correctamente. Por ejemplo, si bien un ícono solo puede tener un ancho y una altura de 24 px, puedes usar padding adicional para que el tamaño del objetivo táctil sea de hasta 48 px. El área de 48 × 48 píxeles corresponde a aproximadamente 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 deben estar a unos 8 píxeles de separación, horizontal y verticalmente, para que el dedo del usuario, al presionar un objetivo de presión, no toque otro objetivo de presión.
Cómo probar tus objetivos táctiles
Si tu objetivo es texto y usaste valores relativos, como em o rem, para ajustar el tamaño del texto y cualquier padding, puedes usar Herramientas para desarrolladores para 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 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, 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 suponer que es probable que las dimensiones pequeñas sean teléfonos o tablets, que a su vez usan una pantalla táctil, ahora existen 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 podemos probar ahora es si la entrada principal del usuario es una pantalla táctil (pointer) y si cualquiera 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 refinado será quien use un mouse o un panel táctil, incluso si el mouse está conectado a un teléfono por Bluetooth.
Un puntero coarse indica una pantalla táctil, que puede ser un dispositivo móvil, pero también puede ser la pantalla de una laptop o una tablet grande.
Si ajustas tu CSS dentro de una consulta de medios para aumentar el objetivo táctil, probar un puntero aproximado te permitirá aumentar los objetivos de presión para todos los usuarios de la pantalla táctil. De esta manera, se muestra el área táctil más grande, independientemente de si el dispositivo es un teléfono o de mayor tamaño.
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
Puedes obtener más información sobre las funciones de medios de interacción, como el puntero, en el artículo Conceptos básicos del diseño web responsivo.