{"id":40578,"date":"2021-04-22T14:13:35","date_gmt":"2021-04-22T12:13:35","guid":{"rendered":"https:\/\/kinsta.com\/?p=92617&preview=true&preview_id=92617"},"modified":"2025-02-13T12:42:53","modified_gmt":"2025-02-13T11:42:53","slug":"elementos-clicables-demasiado-cerca","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/elementos-clicables-demasiado-cerca\/","title":{"rendered":"C\u00f3mo Arreglar el Error \u00abElementos Clicables Est\u00e1n Demasiado Cerca Unos de Otros\u00bb (3 M\u00e9todos)"},"content":{"rendered":"

Los problemas de usabilidad m\u00f3vil no resueltos pueden tener un impacto significativo en el tr\u00e1fico de tu sitio web. Un problema com\u00fan sobre el que Google Search Console<\/a> puede advertirte es el error \u00abElementos Clicables Est\u00e1n Demasiado Cerca Unos de Otros\u00bb, que probablemente significa que tu sitio es complejo para los usuarios m\u00f3viles.<\/p>\n

M\u00e1s de 4.320 millones de personas<\/a> acceden a Internet desde sus dispositivos m\u00f3viles. Por lo tanto, es crucial resolver este error de elementos clicables lo antes posible. Por suerte, hay varias maneras de hacerlo y de hacer que tu sitio web sea m\u00e1s amigable para los m\u00f3viles.<\/p>\n

En este art\u00edculo, te explicaremos qu\u00e9 es el problema de \u00abElementos Clicables Est\u00e1n Demasiado Cerca Unos de Otros\u00bb, discutiremos por qu\u00e9 ocurre y te guiaremos a trav\u00e9s de tres m\u00e9todos que puedes utilizar para arreglarlo. Tambi\u00e9n te explicaremos qu\u00e9 es el error \u00abEl Contenido m\u00e1s ancho que la pantalla\u00bb y c\u00f3mo puedes resolverlo.<\/p>\n

\u00a1Vamos a ponernos manos a la obra!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Qu\u00e9 Es el Error \u00abElementos Clicables Est\u00e1n Demasiado Cerca Unos de Otros\u00bb<\/h2>\n

En pocas palabras, los errores de usabilidad m\u00f3vil pueden hacer que tu sitio de WordPress sea inaccesible<\/a> y m\u00e1s dif\u00edcil de navegar para los usuarios m\u00f3viles. Puedes utilizar el informe de usabilidad m\u00f3vil<\/a> de Google Search Console para probar tu sitio.<\/p>\n

\n

\"La
La herramienta de informe de usabilidad para m\u00f3viles de Google Search Console<\/figcaption><\/figure><\/figure>\n

Hay seis tipos principales de problemas de usabilidad m\u00f3vil con los que te puedes encontrar, que son:<\/p>\n

    \n
  1. Utiliza plugins incompatibles<\/li>\n
  2. No se ha definido ning\u00fan viewport<\/li>\n
  3. No se ha definido un viewport mediante\u00a0\u00abdevice-width\u00bb.<\/li>\n
  4. El texto demasiado peque\u00f1o para leerlo<\/li>\n
  5. El contenido es m\u00e1s ancho que la pantalla<\/li>\n
  6. Elementos clicables est\u00e1n demasiado cerca unos de otros<\/li>\n<\/ol>\n

    Como parte de este informe, Google Search Console comprobar\u00e1 todos los elementos en los que se puede hacer clic, como botones y enlaces. El prop\u00f3sito de esto es verificar si los usuarios m\u00f3viles pueden interactuar c\u00f3modamente con los elementos de tu sitio web utilizando solo el tacto, en lugar de utilizar un teclado o un rat\u00f3n.<\/p>\n

    Si Google Search Console determina que tus elementos clicables suponen un reto para los usuarios m\u00f3viles, incluir\u00e1 el error \u00abElementos clicables est\u00e1n demasiado cerca unos de otros\u00bb en tu informe de resumen.<\/p>\n

    \n

    \"Un
    Un informe de problemas de usabilidad m\u00f3vil de Google Search Console<\/figcaption><\/figure><\/figure>\n

    Si haces clic en el error, te llevar\u00e1 a la p\u00e1gina de detalles y estado. En esta pantalla, puede obtener m\u00e1s informaci\u00f3n sobre el problema, incluidas las p\u00e1ginas afectadas.<\/p>\n

    \n

    \"El
    El error de Google Search Console \u00abElementos clicables est\u00e1n demasiado cerca unos de otros\u00bb.<\/figcaption><\/figure><\/figure>\n

    Esencialmente, el error de elementos en los que se puede hacer clic es una advertencia que indica que los elementos clicables de tu sitio de WordPress son demasiado peque\u00f1os para que los usuarios m\u00f3viles puedan interactuar con ellos c\u00f3modamente.<\/p>\n

    Tambi\u00e9n puede significar que son lo suficientemente grandes, pero est\u00e1n colocados demasiado cerca de los elementos vecinos. Si los botones, enlaces y otros elementos en los que se puede hacer clic se agrupan demasiado cerca, los usuarios corren el riesgo de tocar los elementos equivocados, lo que perjudica la experiencia de usuario (UX).<\/p>\n

    Aunque tener elementos en los que se puede hacer clic demasiado juntos se considera un error de usabilidad m\u00f3vil, resolver este problema tambi\u00e9n puede mejorar la accesibilidad de tu sitio<\/a>. Por ejemplo, las personas con problemas de destreza pueden apreciar un espacio adicional entre los elementos interactivos. En cambio, a los usuarios con problemas de visi\u00f3n les puede resultar m\u00e1s f\u00e1cil interactuar con botones y enlaces grandes y claramente definidos.<\/p>\n\n

    Por Qu\u00e9 Puede Aparecer el Error \u00abElementos Clicables Est\u00e1n Demasiado Cerca Unos de Otros\u00bb<\/h3>\n

    Hay varios factores que pueden provocar el problema de \u00abElementos clicables est\u00e1n demasiado cerca unos de otros\u00bb. A veces, se debe simplemente a que Google no ha podido solicitar los recursos necesarios durante la renderizaci\u00f3n. Si ese es el caso, puedes probar el test de compatibilidad con dispositivos m\u00f3viles<\/a> y ver si lo supera. Si lo hace, probablemente puedas ignorarlo.<\/p>\n

    Este problema tambi\u00e9n puede deberse al dise\u00f1o de tu sitio web<\/a>. Por ejemplo, si tratas de meter demasiados elementos interactivos en una sola p\u00e1gina web, puedes ver este error de usabilidad m\u00f3vil.<\/p>\n

    Otra raz\u00f3n para el error de los elementos clicables es que hay un problema con la capacidad de respuesta m\u00f3vil<\/a> del dise\u00f1o de tu sitio. Tu sitio web debe ser flexible y adaptarse autom\u00e1ticamente al dispositivo espec\u00edfico del visitante para ofrecer la mejor experiencia de usuario posible. Sin embargo, si tu sitio no es responsivo, eso podr\u00eda dar lugar a problemas de usabilidad.<\/p>\n

    M\u00e1s concretamente, si tu sitio web no es responsivo, algunas partes pueden aparecer estiradas, encogidas o deformadas en determinadas pantallas. En los dispositivos con pantallas m\u00e1s peque\u00f1as, los elementos que se pueden tocar pueden aparecer apretados o distorsionados.<\/p>\n

    Identificar algunas de las razones m\u00e1s comunes y potenciales para que se produzca este error puede ayudarte a entender mejor por qu\u00e9 tu sitio est\u00e1 teniendo problemas de usabilidad m\u00f3vil. Tambi\u00e9n te ayudar\u00e1 a determinar c\u00f3mo solucionar el problema.<\/p>\n

    C\u00f3mo Arreglar el Error \u00abElementos Clicables Est\u00e1n Demasiado Cerca Unos de Otros\u00bb (3 M\u00e9todos)<\/h2>\n

    Si los usuarios de dispositivos m\u00f3viles tienen dificultades para navegar por tu sitio web, \u00bfqu\u00e9 es lo que les impide navegar fuera de <\/em>\u00e9l? Prevenir este problema es esencial para resolver todos los problemas de usabilidad m\u00f3vil lo antes posible. Echemos un vistazo a tres m\u00e9todos que puedes utilizar para arreglar el error \u00abElementos clicables est\u00e1n demasiado cerca unos de otros\u00bb y ofrecer una mejor UX a tus usuarios m\u00f3viles.<\/p>\n

    1. Utiliza el plugin de WordPress YellowPencil Visual Customizer<\/h3>\n

    YellowPencil Visual Customizer<\/a> es un plugin para WordPress<\/a> que te permite editar los archivos CSS y tem\u00e1ticos de tu sitio web sin necesidad de codificar.<\/p>\n

    \n

    \"El
    El plugin de WordPress YellowPencil Visual Customizer<\/figcaption><\/figure><\/figure>\n

    Este plugin es muy \u00fatil para modificar el tama\u00f1o de los elementos clicables, por ejemplo, para hacer los botones m\u00e1s grandes. Tambi\u00e9n puedes crear m\u00e1s espacio entre los elementos clicables cambiando los m\u00e1rgenes y el espacio entre ellos.<\/p>\n

    Puede descargar el plugin YellowPencil de forma gratuita o adquirir una licencia regular o extendida<\/a>. Para utilizarlo, primero instala y activa el plugin en tu sitio de WordPress navegando a Plugins <\/strong>> A\u00f1adir nuevo<\/strong>, buscando el plugin y haciendo clic en Instalar ahora > Activar<\/strong>.<\/p>\n

    \n

    \"La
    La opci\u00f3n de instalar el plugin YellowPencil en WordPress<\/figcaption><\/figure><\/figure>\n

    A continuaci\u00f3n, dir\u00edgete a YellowPencil > Personalizaciones<\/strong>. En la pesta\u00f1a Personalizaciones<\/strong>, selecciona \u00a1Vamos a empezar!<\/strong><\/p>\n

    \n

    \"La
    La p\u00e1gina de \u00abPersonalizaciones\u00bb del plugin YellowPencil de WordPress<\/figcaption><\/figure><\/figure>\n

    La interfaz del personalizador visual se cargar\u00e1 y te pedir\u00e1 que selecciones la p\u00e1gina que provoca el error de usabilidad m\u00f3vil.<\/p>\n

    \n

    \"La
    La interfaz del plugin YellowPencil Visual Customizer<\/figcaption><\/figure><\/figure>\n

    Puede aplicar tus cambios a esta p\u00e1gina espec\u00edfica o a todo tu sitio web. Si muchas p\u00e1ginas est\u00e1n presentando el error de elementos clicables, es posible que quieras seleccionar Global. <\/strong><\/p>\n

    Haz tu selecci\u00f3n, y luego haz clic en Continuar. <\/strong>Ahora puedes trabajar a trav\u00e9s de tu p\u00e1gina web, seleccionando cada elemento que se puede tocar. YellowPencil mostrar\u00e1 un panel de opciones de edici\u00f3n para ese elemento.<\/p>\n

    \n

    \"Opciones
    Opciones CSS del personalizador visual de YellowPencil para los elementos clicables<\/figcaption><\/figure><\/figure>\n

    Por ejemplo, en la captura de pantalla de abajo, seleccionamos Padding <\/strong>y a\u00f1adimos 10 p\u00edxeles en todos los lados para aumentar el espacio entre los objetivos que se pueden tocar:<\/p>\n

    \n

    \"La
    La configuraci\u00f3n del relleno en el personalizador visual del plugin YellowPencil<\/figcaption><\/figure><\/figure>\n

    Los ajustes de Tama\u00f1o <\/strong>y Posici\u00f3n <\/strong>tambi\u00e9n ayudan a resolver el error \u00abElementos clicables est\u00e1n demasiado cerca unos de otros\u00bb. Aunque no es necesario, si quieres editar el c\u00f3digo CSS directamente, puedes hacerlo a trav\u00e9s del panel izquierdo.<\/p>\n

    Luego puedes pasar al siguiente elemento que est\u00e9 causando problemas de usabilidad m\u00f3vil y repetir el proceso. Cuando est\u00e9s satisfecho con los cambios, haz clic en el bot\u00f3n verde Guardar<\/strong>.<\/p>\n

    2. Aseg\u00farate de que Todos los Objetivos que Se Pueden Tocar Sean de Al Menos 48px<\/h3>\n

    Es imposible crear un dise\u00f1o \u00fanico y est\u00e1tico que se vea bien y funcione correctamente en todos los dispositivos. En su lugar, lo mejor ser\u00eda crear un dise\u00f1o flexible <\/em>definiendo todos los objetivos manipulables mediante p\u00edxeles independientes del dispositivo (ppp). Los elementos definidos con dpi pueden escalarse autom\u00e1ticamente en funci\u00f3n del tama\u00f1o de la pantalla del usuario.<\/p>\n

    En un dispositivo m\u00f3vil, el objetivo t\u00e1ctil m\u00ednimo recomendado es de 48×48 p\u00edxeles<\/a>. Equivale a unos 9 mm, lo que es suficiente para la yema del dedo de una persona media.<\/p>\n

    Por lo tanto, si te cuesta saber exactamente qu\u00e9 elementos son el origen del problema, puede ser \u00fatil mirar los ppp de cada elemento. Si est\u00e1 por debajo del objetivo t\u00e1ctil recomendado (por ejemplo, 24px), puedes aumentar el relleno para llevarlo a 48px.<\/p>\n

    Puedes comprobar el valor calculado de un \u00e1rea que se puede tocar utilizando Chrome DevTools<\/a> o Firefox DevTools<\/a>, dependiendo del navegador que prefieras<\/a>. Utilizaremos Chrome como ejemplo.<\/p>\n

    Para comprobar el valor de los ppp de uno de los elementos clicables de tu sitio de WordPress, \u00e1brelo en una pesta\u00f1a del navegador Chrome y navega hasta la p\u00e1gina que presenta el error \u00abElementos clicables est\u00e1n demasiado cerca unos de otros\u00bb. Haz clic con el bot\u00f3n derecho en la p\u00e1gina y selecciona Inspeccionar<\/strong>.<\/p>\n

    \n

    \"La
    La opci\u00f3n \u00abInspeccionar\u00bb en el navegador Chrome<\/figcaption><\/figure><\/figure>\n

    Al hacer clic en Inspeccionar <\/strong>se abrir\u00e1 Chrome DevTools. A lo largo de la parte superior, haz clic en el icono que muestra los dispositivos m\u00f3viles, lo que le llevar\u00e1 a la pantalla de la barra de herramientas Alternar dispositivo<\/strong>.<\/p>\n

    \n

    \"La
    La opci\u00f3n \u00abAlternar la barra de herramientas del dispositivo\u00bb en Chrome DevTools<\/figcaption><\/figure><\/figure>\n

    En el panel de vista previa de la izquierda, ver\u00e1s una emulaci\u00f3n de tu sitio en un dispositivo m\u00f3vil. Si pasas el rat\u00f3n por encima y haces clic en cualquiera de los elementos manipulables, podr\u00e1s ver el valor calculado a la derecha:<\/p>\n

    \n

    \"La
    La consola DevTools de Google Chrome<\/figcaption><\/figure><\/figure>\n

    Si es necesario, puedes ajustar el tama\u00f1o de un elemento editando directamente tus archivos CSS<\/a> y del sitio o utilizando un plugin como YellowPencil.<\/p>\n

    3. Comprueba el M\u00e9todo de Entrada<\/h3>\n

    Si est\u00e1 tratando de solucionar el error \u00abElementos clicables est\u00e1n demasiado cerca unos de otros\u00bb, puede ayudar a comprobar el m\u00e9todo de entrada<\/a>. Se refiere al m\u00e9todo o dispositivo que un usuario est\u00e1 utilizando para ver e interactuar con tu sitio. M\u00e1s concretamente, puedes ver si est\u00e1n utilizando un smartphone, una tableta u otros dispositivos.<\/p>\n

    Por ejemplo, el toque se considera un m\u00e9todo de entrada impreciso. Como acabamos de comentar, el uso de CSS para aumentar el tama\u00f1o de los objetivos t\u00e1ctiles o a\u00f1adir un relleno adicional puede hacer que los objetivos t\u00e1ctiles sean m\u00e1s f\u00e1ciles para los visitantes que utilizan dispositivos t\u00e1ctiles para interactuar con tu sitio web.<\/p>\n

    Sin embargo, determinar el dispositivo de un usuario no es una ciencia exacta. Esta t\u00e9cnica utiliza lo que se conoce como \u00abpuntero\u00bb para comprobar el m\u00e9todo de entrada principal del usuario, que puede tener uno de dos valores:<\/p>\n