In some cases, when logging into your Google Search Console account, you might notice the “Clickable elements too close together” error.
A lot of websites face this mobile usability error, so today we will discuss the steps you need to take in order to fix it.
What does this error mean?
In short, the Clickable elements too close together error means the URL displaying it has touch targets like links and buttons which are too close to each other. Every time a user tries to use such a link or button, the neighboring elements get tapped as well. This will lead to the user bouncing back from the website and degrading the whole experience.
Why does Google show you this error?
The error will be visible when users are having trouble clicking on different elements from the website with their mobile devices.
Google’s main priority is providing quality user experience. As its algorithm is mobile-first, this means you need to design your website with mobile audience in mind. If Google detects any usability issues, it will drop your rankings.
This is why Google will display the Clickable elements too close together error when it detects non-mobile-friendly elements. Make sure to remove the issue and Google will once again love your website!
So, let’s begin.
Identify the example URL
Go to your Google Search Console and check the example URL showing the issue.
This can be done from the Mobile Usability section by clicking on the error message. Once you do this, you will be able to see the number of affected URLs and one example URL. Open it in a separate window.
Do a Mobile Friendly test
Go on Google Mobile-Friendly Test and Bind Mobile-Friendly Test, and enter the example URL.
Note: We suggest using both tools as they display slightly different results.
Optimizing the Touch Target Size
There are several reasons the error might get displayed but the most common one is because the touch target is too small. Its size should be around 40 px. By using additional padding, you can increase the touch target size to 48 px.
We can now locate the elements which are causing the issue.
In this case, we used the Mobile/Responsive Web Design Tester plugin in our browser.
You will now see the mobile icon, located on the right-hand side of the browser.
Click on it and check how the page looks when you open it from a mobile device.
Next step, is finding the buttons or links which are too close to each other. Once you do that, go back to the desktop URL and point the cursor to the elements which are too close to each other.
Do a right-click and Inspect. You will now see a new window showing the size of the tap target and the padding.
Now, increase the tap target size to 48px.
Once this is done, add spacing of 8px for every touch target.
Setting the Mobile Viewport tag
Another reason for the Clickable elements too close together error is that you do not have a mobile viewport tag on your website, which is mandatory to have.
To do this, add the code mentioned bellow on the
of your HTML.meta name=”viewport” content=”width=device-width, initial-scale=1″
The code tells the browsers to set the width of the viewport to match the width of the user’s device. This means that users will see all elements which are sized best for their device. This in turn will make the website mobile-friendly and remove the error.
Validate Fix
After you are done with the steps above, go to your Search Console and click on Validate fix. You will now see an option on the upper right corner to validate the fix where the error is displayed.
This means Google has started the validating process. Note, that this will take some time. Once the whole process is complete, you will see the “passed” message next to the error. And you are done!
Conclusion
“Clickable elements too close together” is a very common error which can be seen on unresponsive websites. This is why, make sure you have a fully responsive site. Users love mobile-friendly websites as they offer the best browsing experience. And let’s not forget, Google loves them, too!
