{"id":42215,"date":"2021-04-06T11:58:35","date_gmt":"2021-04-06T09:58:35","guid":{"rendered":"https:\/\/kinsta.com\/?p=92617&preview=true&preview_id=92617"},"modified":"2025-02-13T08:43:19","modified_gmt":"2025-02-13T11:43:19","slug":"elementos-clicaveis-estao-muito-proximos","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/elementos-clicaveis-estao-muito-proximos\/","title":{"rendered":"Como Corrigir o Erro “Elementos Clic\u00e1veis Est\u00e3o Muito Pr\u00f3ximos” (3 m\u00e9todos)"},"content":{"rendered":"

Problemas de usabilidade m\u00f3vel n\u00e3o resolvidos podem ter um impacto significativo no tr\u00e1fego do seu site. Um problema comum do Google Search Console<\/a> pode adverti-lo sobre o erro “Elementos clic\u00e1veis est\u00e3o muito pr\u00f3ximos”, o que provavelmente significa que o seu site \u00e9 complexo para os usu\u00e1rios m\u00f3veis navegarem.<\/p>\n

Mais de 4,32 bilh\u00f5es de pessoas<\/a> acessam a Internet a partir de seus dispositivos m\u00f3veis. Portanto, \u00e9 crucial resolver este erro de elementos clic\u00e1veis o mais r\u00e1pido poss\u00edvel. Felizmente, h\u00e1 v\u00e1rias maneiras de faz\u00ea-lo e tornar seu site mais amig\u00e1vel ao celular.<\/p>\n

Neste artigo, explicaremos o que \u00e9 a quest\u00e3o “Elementos clic\u00e1veis est\u00e3o muito pr\u00f3ximos”, discutiremos por que isso acontece e o acompanharemos atrav\u00e9s de tr\u00eas m\u00e9todos que voc\u00ea pode usar para consert\u00e1-la. Explicaremos tamb\u00e9m o que \u00e9 o erro “Conte\u00fado mais amplo que a tela” e como voc\u00ea pode resolv\u00ea-lo.<\/p>\n

Vamos ao trabalho!<\/p>\n

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

O que \u00e9 o erro “Elementos clic\u00e1veis est\u00e3o muito pr\u00f3ximos”?<\/h2>\n

Em poucas palavras, erros de usabilidade m\u00f3vel podem tornar seu site WordPress inacess\u00edvel<\/a> e mais desafiador para os usu\u00e1rios m\u00f3veis navegarem. Voc\u00ea pode usar o relat\u00f3rio de usabilidade m\u00f3vel<\/a> do Google Search Console para testar seu site.<\/p>\n

\n

\"A
A ferramenta de relat\u00f3rio de usabilidade do Google Search Console Mobile<\/figcaption><\/figure><\/figure>\n

H\u00e1 seis tipos principais de problemas de usabilidade m\u00f3vel com os quais voc\u00ea pode se deparar, que s\u00e3o<\/p>\n

    \n
  1. Utiliza plugins incompat\u00edveis<\/li>\n
  2. Janela de exibi\u00e7\u00e3o n\u00e3o configurada<\/li>\n
  3. Janela de exibi\u00e7\u00e3o n\u00e3o ajustada para “largura do dispositivo”.<\/li>\n
  4. Texto muito pequeno para ser lido<\/li>\n
  5. Conte\u00fado mais amplo que a tela<\/li>\n
  6. Elementos clic\u00e1veis est\u00e3o muito pr\u00f3ximos<\/li>\n<\/ol>\n

    Como parte deste relat\u00f3rio, o Google Search Console verificar\u00e1 todos os elementos clic\u00e1veis do seu site, tais como bot\u00f5es e links. O objetivo disto \u00e9 verificar se os usu\u00e1rios m\u00f3veis podem interagir confortavelmente com os elementos do seu website usando apenas o toque, em vez de usar um teclado ou mouse.<\/p>\n

    Se o Console de Busca do Google determinar que seus elementos acess\u00edveis representam um desafio para os usu\u00e1rios m\u00f3veis, ele incluir\u00e1 o erro “elementos acess\u00edveis muito pr\u00f3ximos” em seu relat\u00f3rio de resumo.<\/p>\n

    \n

    \"Um
    Um relat\u00f3rio de problemas de usabilidade m\u00f3vel do Google Search Console<\/figcaption><\/figure><\/figure>\n

    Se voc\u00ea clicar no erro, ele o levar\u00e1 para a p\u00e1gina de detalhes e status. Nesta tela, voc\u00ea pode saber mais sobre o assunto, incluindo as p\u00e1ginas afetadas.<\/p>\n

    \n

    \"O
    O erro “Elementos clic\u00e1veis est\u00e3o muito pr\u00f3ximos” do Console de Busca do Google<\/figcaption><\/figure><\/figure>\n

    Essencialmente, o erro dos elementos clic\u00e1veis \u00e9 um aviso indicando que os elementos clic\u00e1veis em seu site WordPress s\u00e3o muito pequenos para que os usu\u00e1rios m\u00f3veis possam interagir confortavelmente com eles.<\/p>\n

    Alternativamente, isso poderia significar que eles s\u00e3o suficientemente grandes, mas posicionados muito perto de elementos vizinhos. Se bot\u00f5es, links e outros itens clic\u00e1veis se agruparem muito pr\u00f3ximos, os usu\u00e1rios correm o risco de bater nos errados, o que prejudica a Experi\u00eancia do Usu\u00e1rio (UX).<\/p>\n

    Embora ter Elementos clic\u00e1veis est\u00e3o muito pr\u00f3ximos seja classificado como um erro de usabilidade m\u00f3vel, a resolu\u00e7\u00e3o deste problema tamb\u00e9m pode melhorar a acessibilidade do seu site<\/a>. Por exemplo, as pessoas com problemas de destreza podem apreciar algum espa\u00e7o adicional entre os elementos interativos. Em contraste, os usu\u00e1rios com problemas de vis\u00e3o podem achar mais f\u00e1cil interagir com bot\u00f5es e links grandes e claramente definidos.<\/p>\n\n

    Por que o erro “Elementos clic\u00e1veis est\u00e3o muito pr\u00f3ximos” pode aparecer<\/h3>\n

    V\u00e1rios fatores podem resultar na quest\u00e3o “Elementos clic\u00e1veis est\u00e3o muito pr\u00f3ximos”. \u00c0s vezes, \u00e9 s\u00f3 porque o Google n\u00e3o p\u00f4de solicitar os recursos necess\u00e1rios durante a renderiza\u00e7\u00e3o. Se for esse o caso, ent\u00e3o voc\u00ea pode tentar usar o mobile-friendly<\/a> e ver se ele passa. Se passar, provavelmente voc\u00ea pode ignor\u00e1-lo.<\/p>\n

    Esta quest\u00e3o tamb\u00e9m pode resultar do design do seu site<\/a>. Por exemplo, se voc\u00ea tentar apertar demasiados elementos interativos em uma \u00fanica p\u00e1gina da web, voc\u00ea poder\u00e1 ver este erro de usabilidade m\u00f3vel.<\/p>\n

    Outra raz\u00e3o para o erro dos elementos clic\u00e1veis \u00e9 que h\u00e1 um problema com a capacidade de resposta m\u00f3vel<\/a> do design do seu site. Seu site deve ser flex\u00edvel e se adaptar automaticamente ao dispositivo espec\u00edfico do visitante para fornecer o melhor UX poss\u00edvel. Entretanto, se seu site n\u00e3o for responsivo, isso pode resultar em problemas de usabilidade.<\/p>\n

    Mais especificamente, se seu website n\u00e3o for responsivo, partes dele podem parecer esticadas, encolhidas ou deformadas em telas espec\u00edficas. Em dispositivos com telas menores, os elementos que podem ser tocados podem parecer apertados ou distorcidos.<\/p>\n

    Identificar algumas das raz\u00f5es padr\u00e3o e potenciais para que este erro ocorra pode ajud\u00e1-lo a entender melhor porque seu site est\u00e1 encontrando problemas de usabilidade m\u00f3vel. Tamb\u00e9m o ajudar\u00e1 a determinar como corrigir o problema.<\/p>\n

    Como corrigir o erro “Elementos clic\u00e1veis est\u00e3o muito pr\u00f3ximos” (3 m\u00e9todos)<\/h2>\n

    Se os usu\u00e1rios m\u00f3veis lutam para navegar em seu site, o que os impede de navegar longe <\/em>dele? Evitar esta quest\u00e3o \u00e9 essencial para resolver todos os problemas de usabilidade m\u00f3vel o mais r\u00e1pido poss\u00edvel. Vamos dar uma olhada em tr\u00eas m\u00e9todos que voc\u00ea pode usar para corrigir o erro “Elementos clic\u00e1veis est\u00e3o muito pr\u00f3ximos” e fornecer um melhor UX para seus usu\u00e1rios m\u00f3veis.<\/p>\n

    1. Use o Plugin Visual Personalizado YellowPencil WordPress<\/h3>\n

    YellowPencil Visual Customizer<\/a> \u00e9 um plugin WordPress<\/a> frontend que permite a voc\u00ea editar os arquivos CSS e tem\u00e1ticos do seu website sem qualquer codifica\u00e7\u00e3o.<\/p>\n

    \n

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

    Este plugin \u00e9 \u00fatil para modificar o tamanho de seus alvos que podem ser batidos, como, por exemplo, tornar seus bot\u00f5es maiores. Voc\u00ea tamb\u00e9m pode criar mais espa\u00e7o entre os elementos clic\u00e1veis, alterando as margens e o espa\u00e7amento entre eles.<\/p>\n

    Voc\u00ea pode baixar o plugin YellowPencil gratuitamente ou adquirir uma licen\u00e7a Regular ou Extendida<\/a>. Para utiliz\u00e1-lo, primeiro instale-o e ative-o em seu site WordPress navegando em Plugins <\/strong>> Add New, <\/strong>procurando o plugin e depois clicando em Install Now > Activate.<\/strong><\/p>\n

    \n

    \"A
    A op\u00e7\u00e3o de instalar o plugin YellowPencil no WordPress<\/figcaption><\/figure><\/figure>\n

    A seguir, navegue para YellowPencil <\/strong>> Customiza\u00e7\u00f5es. <\/strong>Sob a guia Customiza\u00e7\u00f5es<\/strong>, selecione Let’s start!<\/strong><\/p>\n

    \n

    \"A
    A p\u00e1gina YellowPencil WordPress plugin “Customiza\u00e7\u00f5es”.<\/figcaption><\/figure><\/figure>\n

    A interface visual do customizador ir\u00e1 carregar e solicitar que voc\u00ea selecione a p\u00e1gina que desencadeia o erro de usabilidade do celular.<\/p>\n

    \n

    \"A
    A interface do plugin do Visual Customizer YellowPencil<\/figcaption><\/figure><\/figure>\n

    Voc\u00ea pode aplicar suas altera\u00e7\u00f5es a esta p\u00e1gina espec\u00edfica ou em todo o seu site. Se muitas p\u00e1ginas estiverem apresentando o erro de elementos clic\u00e1veis, voc\u00ea pode querer selecionar Global. <\/strong><\/p>\n

    Fa\u00e7a sua sele\u00e7\u00e3o, e depois clique em Continuar. <\/strong>Agora voc\u00ea pode trabalhar atrav\u00e9s de sua p\u00e1gina da web, selecionando cada elemento que possa ser tocado. YellowPencil exibir\u00e1 um painel de op\u00e7\u00f5es de edi\u00e7\u00e3o para esse elemento.<\/p>\n

    \n

    \"YellowPencil
    YellowPencil Visual Customizer CSS op\u00e7\u00f5es para elementos clic\u00e1veis<\/figcaption><\/figure><\/figure>\n

    Por exemplo, na captura de tela abaixo, selecionamos Padding <\/strong>e adicionamos 10 pixels em todos os lados para aumentar o espa\u00e7o entre os alvos que podem ser batidos:<\/p>\n

    \n

    \"As
    As configura\u00e7\u00f5es de acolchoamento do plugin YellowPencil customizador visual<\/figcaption><\/figure><\/figure>\n

    As configura\u00e7\u00f5es de Tamanho <\/strong>e Posi\u00e7\u00e3o <\/strong>tamb\u00e9m ajudam a resolver o erro “Elementos clic\u00e1veis est\u00e3o muito pr\u00f3ximos”. Embora n\u00e3o seja necess\u00e1rio, se voc\u00ea quiser editar o c\u00f3digo CSS diretamente, voc\u00ea pode faz\u00ea-lo atrav\u00e9s do painel esquerdo.<\/p>\n

    Ent\u00e3o voc\u00ea pode passar para o pr\u00f3ximo elemento que est\u00e1 causando problemas de usabilidade m\u00f3vel e repetir o processo. Quando voc\u00ea estiver satisfeito com suas mudan\u00e7as, clique no bot\u00e3o verde Salvar.<\/strong><\/p>\n

    2. Certifique-se de que todos os alvos que podem ser batidos estejam no m\u00ednimo em 48px<\/h3>\n

    \u00c9 imposs\u00edvel criar um design \u00fanico e est\u00e1tico que tenha bom aspecto e <\/em>funcione corretamente em todos os dispositivos. Em vez disso, seria melhor se voc\u00ea visasse criar um layout flex\u00edvel<\/em>, definindo todos os seus alvos que podem ser tocados usando pixels independentes do dispositivo (dpi). Os elementos que s\u00e3o definidos usando dpi podem ser automaticamente escalados para o tamanho com base no tamanho da tela do usu\u00e1rio.<\/p>\n

    Em um dispositivo m\u00f3vel, o alvo m\u00ednimo recomendado de toque \u00e9 48×48 pixels<\/a>. Equivale a cerca de 9 mm, o que \u00e9 suficiente para a almofada de dedos de uma pessoa comum.<\/p>\n

    Portanto, se voc\u00ea estiver lutando para descobrir exatamente quais elementos s\u00e3o a fonte do problema, isso pode ajudar a analisar os dpi de cada elemento. Se estiver abaixo do alvo de toque recomendado (por exemplo, 24px), voc\u00ea pode aumentar o acolchoamento para 48px.<\/p>\n

    Voc\u00ea pode verificar o valor computado de uma \u00e1rea de acesso usando o Chrome DevTools<\/a> ou Firefox DevTools<\/a>, dependendo de qual navegador voc\u00ea prefere<\/a>. Vamos usar o Chrome como exemplo.<\/p>\n

    Para verificar o valor de dpi de um dos elementos clic\u00e1veis em seu site WordPress, abra-o em uma aba do navegador Chrome e navegue at\u00e9 a p\u00e1gina que apresenta o erro “Elementos clic\u00e1veis est\u00e3o muito pr\u00f3ximos”. Clique com o bot\u00e3o direito do mouse na p\u00e1gina e selecione Inspectar<\/strong>.<\/p>\n

    \n

    \"A
    A op\u00e7\u00e3o “Inspecionar” no Navegador Cromado<\/figcaption><\/figure><\/figure>\n

    Clicando em Inspect <\/strong>abrir\u00e1 as ferramentas cromadas DevTools. Ao longo da parte superior, clique no \u00edcone que exibe os dispositivos m\u00f3veis, o que o levar\u00e1 para a tela da barra de ferramentas Toggle device.<\/strong><\/p>\n

    \n

    \"A
    A op\u00e7\u00e3o “Toggle device toolbar” no Chrome DevTools<\/figcaption><\/figure><\/figure>\n

    No painel de visualiza\u00e7\u00e3o \u00e0 esquerda, voc\u00ea ver\u00e1 uma emula\u00e7\u00e3o de dispositivo m\u00f3vel do seu site. Se voc\u00ea passar o mouse e clicar em qualquer um dos elementos que podem ser tocados, voc\u00ea poder\u00e1 ver o valor computado \u00e0 direita:<\/p>\n

    \n

    \"O
    O Console DevTools do Google Chrome<\/figcaption><\/figure><\/figure>\n

    Se necess\u00e1rio, voc\u00ea pode ent\u00e3o ajustar o dimensionamento de um elemento editando diretamente seus arquivos CSS<\/a> e do site ou usando um plugin como o YellowPencil.<\/p>\n

    3. Verifique o m\u00e9todo de entrada<\/h3>\n

    Se voc\u00ea estiver tentando corrigir o erro “Elementos clic\u00e1veis est\u00e3o muito pr\u00f3ximos”, isso pode ajudar a verificar o m\u00e9todo de entrada<\/a>. Ele se refere ao m\u00e9todo ou dispositivo que um usu\u00e1rio est\u00e1 usando para visualizar e interagir com seu site. Mais especificamente, voc\u00ea pode ver se eles est\u00e3o usando um smartphone, tablet ou outros dispositivos.<\/p>\n

    Por exemplo, o toque \u00e9 considerado um m\u00e9todo de entrada impreciso. Como acabamos de discutir, o uso de CSS para aumentar o tamanho de seus alvos de toque ou adicionar acolchoamento extra pode facilitar a intera\u00e7\u00e3o dos visitantes que est\u00e3o usando dispositivos de toque com seu website.<\/p>\n

    Entretanto, determinar o dispositivo de um usu\u00e1rio n\u00e3o \u00e9 uma ci\u00eancia exata. Esta t\u00e9cnica usa o que \u00e9 conhecido como “ponteiro” para verificar o m\u00e9todo de entrada principal do usu\u00e1rio, que pode ter um de dois valores:<\/p>\n