¿Cómo detectar si el espaciado entre botones es demasiado reducido al comprobar la compatibilidad con dispositivos móviles?

Si al tocar «Enviar consulta» en el móvil se pulsa por error el icono de WhatsApp que está al lado, o al desplegar un menú se acaba seleccionando la sección contigua, conviene revisar tres aspectos: el área realmente interactiva, la distancia respecto a las áreas contiguas y la distribución de la página. Que parezca haber espacio entre los botones no significa que sus áreas táctiles no estén demasiado juntas; y aunque un icono parezca pequeño, puede tener un área de pulsación suficientemente amplia.

Al buscar métodos de comprobación con check for mobile friendly, no te limites al resultado de aprobado o error de la herramienta. Primero identifica qué página, ancho de pantalla y estado de interacción provocan el toque accidental; después, comprueba las dimensiones de los elementos en el navegador y, por último, valida el resultado en un dispositivo real. Así podrás determinar si debes aumentar el relleno interno, ampliar la separación o cambiar la disposición del conjunto de botones.

Localiza dónde y en qué estado se producen los toques accidentales

Al revisar un sitio web de comercio internacional o una página de destino de marketing, empieza por las acciones que afectan directamente a las consultas y las compras: la navegación superior, los filtros de productos, el envío de formularios, los controles de cantidad del carrito y los accesos fijos de la parte inferior para llamar, chatear o enviar consultas. Presta especial atención a los casos en que coinciden el servicio de atención flotante, el aviso de cookies y la barra de acciones inferior, ya que pueden ocultar botones que normalmente se pueden pulsar sin problemas.

No revises únicamente la pantalla inicial de la página de inicio. Entra en la página de detalles del producto, despliega el menú, abre el panel de filtros y haz que aparezcan los mensajes de validación del formulario. Un mismo grupo de botones puede tener suficiente separación en el estado predeterminado, pero quedar demasiado junto al aparecer contenido nuevo. En los sitios multilingües, revisa también las versiones con textos más largos para evitar que, después de traducirse, los botones salten de línea y los enlaces contiguos queden demasiado cerca.

Al documentar un problema, incluye como mínimo la dirección de la página, el ancho de pantalla, los pasos para reproducirlo y el elemento que se pulsa por error. Por ejemplo, «En la página de detalles del producto, al abrir la barra inferior de consultas, es fácil activar el acceso al chat al tocar el botón de cierre» resulta más útil para que el equipo de desarrollo lo reproduzca que «Los botones están demasiado juntos en el móvil».

Comprueba los límites del área interactiva antes de valorar si el tamaño es adecuado

En las herramientas para desarrolladores del navegador, cambia a la vista de emulación de dispositivos móviles y usa el selector de elementos para localizar el botón. Comprueba su modelo de caja, altura y anchura, así como los elementos que lo rodean. La medición debe centrarse en el enlace o botón que recibe realmente la interacción; no basta con observar el icono o el texto interior, ni se debe tomar como tamaño interactivo el de un contenedor decorativo exterior.

Por ejemplo, si un icono está en el centro de un bloque de color grande y solo se puede pulsar el propio icono, el bloque no amplía el área táctil. En cambio, al aumentar el relleno interno del botón, el dedo puede acertar con mayor facilidad aunque el icono conserve el mismo tamaño. Comprueba también los elementos con posicionamiento absoluto y las capas transparentes para confirmar si otros controles ocupan los espacios que parecen vacíos.

Para valorar el tamaño, puedes tomar como referencia el requisito de «Tamaño del objetivo (mínimo)» de WCAG 2.2: en principio, los objetivos de entrada mediante puntero deben medir al menos 24×24 píxeles CSS, aunque hay excepciones, como las relacionadas con el espaciado y los enlaces en línea. Para determinar si un objetivo más pequeño cumple la excepción de espaciado, hay que aplicar el área circular que establece el estándar; no basta con interpretar que «dejar unos píxeles fijos entre dos botones» garantiza el cumplimiento.

Para acciones frecuentes, como enviar una consulta o añadir un producto al carrito, puedes fijar como objetivo de diseño un tamaño cercano a 44×44 píxeles CSS o igual a este, de modo que haya margen para tocar con el dedo. Cumplir el tamaño recomendado no sustituye la validación de la interacción: cuanto más fácil sea confundir las acciones de botones contiguos, más importante será diferenciarlos visualmente y separarlos con claridad.

Corrige según la causa y evita que ampliar los botones los amontone aún más

Si la separación entre botones es insuficiente, no siempre basta con aumentar el margen exterior. Primero determina si el área táctil es demasiado pequeña, si el contenedor no tiene suficiente espacio o si una capa superpuesta está tapando elementos; después, elige cómo corregirlo.

• Solo se puede pulsar una zona muy pequeña del icono o del texto: Prioriza aumentar el relleno interno del enlace o botón y establece una altura y anchura mínimas adecuadas. Haz que el espacio libre alrededor del icono forme parte del mismo objetivo interactivo.
• Una fila de botones ya ocupa toda la pantalla: Cambia la disposición para que los botones salten de línea o se apilen verticalmente, o muestra menos accesos secundarios a la vez. Si sigues ampliándolos, podrían desbordarse horizontalmente.
• Es fácil confundir objetivos contiguos: Aumenta la separación mediante la distribución o los márgenes y comprueba que las áreas interactivas no se solapen después de ampliarlas. Aumentar únicamente la separación entre textos quizá no mejore los límites de las áreas pulsables.
• Un acceso flotante tapa elementos de la página: Ajusta la posición, el espacio reservado o las condiciones de visualización para mantener una relación adecuada entre el acceso de atención al cliente, la barra inferior y el área segura del sistema.

Al revisar la página, es fácil pasar por alto los enlaces pequeños próximos a los menús de navegación, los números de paginación y los formularios. Los enlaces en línea dentro de los párrafos tienen criterios de evaluación distintos, por lo que no es necesario convertirlos todos en botones grandes; sin embargo, hay que comprobar por separado el área interactiva de cada acción independiente colocada junto a otra, como «Volver», «Enviar» y «Borrar».

Al hacer cambios, conserva también una jerarquía clara entre las acciones. Si los botones «Enviar» y «Restablecer» de un formulario de consulta están demasiado juntos, aunque ambos sean grandes, pueden aumentar las posibilidades de realizar una acción por error. Primero determina si es necesario conservar la acción secundaria y luego modifica la disposición; no te limites a ampliar todos los botones por igual para que la herramienta dé el visto bueno.

La nueva comprobación debe incluir interacciones reales, no solo capturas de pantalla

La emulación del navegador sirve para localizar problemas de diseño, pero la precisión al hacer clic con el ratón no es la misma que al tocar con el dedo. Después de los cambios, realiza las principales operaciones en un dispositivo real: abre la navegación, cambia de producto, rellena el formulario, cierra las ventanas emergentes y envía el formulario. Comprueba la posición de las barras fijas después de desplazarte y si el teclado virtual tapa el botón de envío al aparecer.

La nueva comprobación debe incluir pantallas estrechas, teléfonos con pantallas más anchas y versiones en idiomas con textos más largos. Revisa el desplazamiento horizontal, los saltos de línea en los textos de los botones y la disposición al cambiar el zoom de la página o la orientación de la pantalla. Si la página no tiene configurada correctamente la metaetiqueta viewport o se ha reducido toda la interfaz para que quepa más contenido, también hay que resolver primero esos problemas básicos; de lo contrario, aumentar localmente la separación seguirá sin mejorar lo suficiente la experiencia.

Los informes de detección automática pueden ayudar a encontrar algunos problemas de tamaño y distribución, pero no permiten valorar por completo la experiencia táctil y también pueden pasar por alto controles que aparecen solo después de interactuar. La herramienta de Google para comprobar la compatibilidad con dispositivos móviles, mencionada en tutoriales antiguos, ya no está disponible. Para revisar estos aspectos, combina las herramientas para desarrolladores del navegador, las herramientas de comprobación de accesibilidad y las pruebas en dispositivos reales.

Al validar la entrega, sustituye «Se ha ajustado la separación entre botones» por resultados de comprobación reproducibles: en qué páginas, anchos de pantalla e idiomas se realizaron las operaciones y si dejaron de producirse los toques accidentales. En las páginas que reciben tráfico publicitario o generan consultas, corregir primero los obstáculos en los procesos de envío, contacto y compra permite priorizar los cambios en función de su impacto en el negocio.