Cuando tu diseño se muestra en un dispositivo móvil, debes asegurarte de que los elementos interactivos, como botones o enlaces, sean lo suficientemente grandes y tener suficiente espacio a su alrededor, para que sean fáciles de presionar 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 recomendado para el 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, mientras que un ícono solo puede tener un ancho y una altura de 24 px, puedes usar padding adicional para aumentar el tamaño del objetivo táctil a 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 deben estar separados a unos 8 píxeles horizontal y verticalmente, para que el dedo del usuario que presiona un objetivo no toque inadvertidamente otro.
Cómo probar tus objetivos táctiles
Si tu segmentación es el texto y usaste valores relativos, como em o rem, para ajustar el tamaño del texto y cualquier padding,
puedes usar las 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 en qué tamaño de píxeles 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.
Cómo usar consultas de medios para detectar el uso de la pantalla táctil
En lugar de solo probar las dimensiones del viewport y, luego, adivinar que las pequeñas dimensiones suelen ser teléfonos o tablets, lo que, a su vez, usan una pantalla táctil, hay formas más sólidas de adaptarse 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)
si alguna de las entradas detectadas actualmente es una pantalla táctil (any-pointer).
Los atributos pointer y any-pointer mostrarán fine o coarse.
Un puntero fino es alguien
que usa un mouse o un panel táctil
incluso si el mouse está conectado a un teléfono por Bluetooth.
Un puntero coarse indica que es una pantalla táctil.
que puede ser un dispositivo móvil
o la pantalla de una laptop o una tablet grande.
Si ajustas tu CSS en una consulta de medios para aumentar el objetivo táctil las pruebas de punteros generales te permiten aumentar los objetivos táctiles para todos los usuarios de pantallas táctiles. De esta manera, se muestra el área táctil más grande, independientemente de 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, en el artículo Conceptos básicos del diseño web responsivo.