This is an online free tool that was designed to help fix the “Clickable elements too close together” error that appears in Google Search Console under the Mobile Usability tab. In brief, the tool highlights all the tap targets of the web page with issues and lets you work on fixing them. It is advisable to read through the entire article before you begin using this tool.
What are clickable elements?
Clickable elements are buttons, links, or forms in your website that can be clicked by the user. You will get the “Clickable elements too close together” error when they are too close.
Clickable elements that are too close together bring an error in the search console because such elements confuse users. They should be enough space between elements to avoid clicking the unintended one. This provides a good user experience. Other examples of causes of the error include when the text is too small to read, or buttons are too small to be clicked by a thumb.
How does the tool work?
If you get the clickable elements are too close together error, Google Webmaster will not tell you which targets are together. Stack Overflow, Quora, WordPress.org forums, etc. questions, and answers will not as well help you pinpoint your clickable elements.
This tool crawls your page and highlights all the tap targets or interactive elements in your website. You will then have the opportunity to look at the tap targets and decide on which ones are too close together and then space them.
Tool to check Clickable elements.
Enter your blog post or web page URL in the form below and click analyze to see the clickable elements. The clickable HTML elements will be highlighted in yellow.
UPDATE: This checker has been removed as it was abused by spammers causing security issues on our website. It will be available once we figure out how to stop spammers.
How to fix clickable elements error (solution)
To fix the “clickable elements too close together” error follow the procedure below.
- Login to Google Search Console
- Go to the Experience section and click on Mobile Usability
- Click on Error (with issues). You will see pages with mobile usability errors.
- Copy URL for one of the pages with the error.
- Paste it in the form above and scan it.
- You will see all your clickable elements highlighted in yellow
- Try to add a margin of 8px to increase spacing and increase font size to 16px and any of the highlighted button size to alteast 48px (if this breaks your website, then you need to ask your website developer or theme developer to fix the issue).
- After resolving, click the error in Google Console and then Validate Fix
- Give Google some days to crawl your pages
NOTE: If you want to make changes to clickable elements in the mobile version of the web page alone, then use media queries. For example, the media query below means show a font size of 16 px for links if your web page is accessed by devices with a maximum screen size of 450px.
@media screen and (max-width: 450px) {a {
font-size: 16px;
}
}
If you are getting the error “Content Wider than screen” then ensure that in your header, the viewport value is set to <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> as it is recommended by Google. Also, check your page on a smartphone or using the methods provided below to see if any elements are extending past the mobile screen layout.
Why is my web page Mobile Friendly but with errors?
If you try to test your web page or blog post for mobile-friendliness with Google mobile-friendly test tool or Microsoft Bing Mobile Friendliness Test tool, you are likely to get results that your page is mobile-friendly despite it having the error above. This is because the error does not make your page not be mobile-friendly, but it affects accessibility.
Responsive design checking on Browser
If you want to check how your website looks like on mobile devices, right-click the page, and click on inspect on Mozilla and Chrome. Then click on Responsive Design Mode on Mozilla or Toggle Device Toolbar in Google Chrome (DevTools). Adjust the screen size to the size of the mobile type. This will make it easy for you to know how the site looks like on mobile screens.
What happens if you do not fix the error?
If you are using a Squarespace, Joomla, Wix, Shopify, Bigcommerce, HubSpot, Weebly template, or WordPress theme, chances are that your theme developer may update the theme and the error will go away without you doing anything. However, if the theme is not updated then the error will remain unresolved.
The consequence of leaving the mobile usability issue unresolved is that you might begin to see a drop in mobile rankings due to repeat mobile users not clicking on your links on search results because of the bad experience they had when they first interacted with your site.
You might also be interested in this free tool used for checking for email spam filter words or take this blog checklist test.
We also have a list of over 600 blogging tools, software, and resources that successful bloggers use to run their blogs.
