When you log in to your Google Search Console account, you might see the “Clickable elements too close together” error.
I have seen many websites having this mobile usability error. There are several threads on Google where webmasters are desperately looking for a solution to fix this problem.
Hence, in this article, I will discuss the exact steps needed to fix this error. But, first, let’s clarify a few things about this error.
Related: How to Fix Text Too Small To Read Error
What does “Clickable elements too close together” error mean?
It means that the URL displaying such an error has touch targets like buttons and links that are too close to each other. When the users try to tap on such a button or link, the neighboring elements also get tapped. This degrades the user experience and the user bounces back from your site.
Related: How to Fix LCP Issue in Search Console
Why Does Google show the “Clickable elements too close together” error?
This issue is returned if your visitors are having trouble clicking on different elements on your site using their mobile devices.
Google always provide the best user experience. It uses a mobile-first search algorithm which means your site should be designed keeping the mobile audience in mind. If your site has usability issues then Google will drop the rankings of your site.
Hence, Google displays this error to every site that has some elements that are not mobile-friendly. All you need to do is to fix the issue and Google will start loving your site again.
So, let’s now dive straight into fixing this issue.
Follow the below steps to fix the “Clickable elements too close together” error:
Step 1: Identify the Example URL
Login to your Google Search Console account and check the example URL that is returning such an issue.
You can do that by clicking on the Mobile Usability section and then, clicking on the error where it is written: “Clickable elements too close together”.
Once you click on the error, you will see the number of affected URLs and an example URL. Open the example URL in a new window.
Step 2: Run a Mobile Friendly Test
Copy the example URL and enter it on Google Mobile-Friendly Test and Bing Mobile-Friendly Test one by one.
The reason, I suggest you use both these tools because they display slightly different results.
I tested the example URL by taking the Mobile-Friendly Test. Here is what Google returned:
The page is mobile-friendly.
The result is confusing because in the GSC you can see the error but when you take the mobile-friendly test, no issues are detected.
Next, I checked it on Bing Mobile Friendly Test tool.
Bang on! It returned that the page has the “links and tap targets too close/small” issue.
I also found out that some resources on the page are blocked by robots.txt.
Also, when I looked at the page using my mobile device, I was able to locate the issue because the tap targets were missing the recommended padding.
Step 3: Optimize The Touch Target Size
The “Clickable elements too close together” error might get displayed for several reasons, but the commonest of all is because the touch target is too small.
The touch target size should be around 48px. You should use additional padding to increase the touch target size to 48px.
Now, we will find out the elements that are causing this error.
Add the Mobile/Responsive Web Design Tester plugin in your Google Chrome browser.
Now, you will see the mobile icon on the right-hand side of your browser.
Click on it and you can see how this page looks when accessed using a mobile device.
Now, locate the buttons or links that are too close to each other. Once you have located that, return back to the desktop URL and point your cursor to the elements that are too close to each other.
Right-click and go to inspect. This will open up a window displaying the size of the tap target and the padding.
Increase the size of the tap target to 48px.
Once you have done that, add spacing of around 8px for every touch target.
Step 4: Set The Mobile Viewport Tag
“Clickable elements too close together” error is also caused when you don’t have a mobile viewport tag on your site.
Hence, you should always have a mobile viewport set. To do that, add the below code in the <head> of your HTML.
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
The above code will tell the browsers to set the width of the viewport to match the width of the user’s device. Hence, your site visitors will be able to view all the elements at a size that is the best fit for the device they are using. Naturally, this will make your website mobile-friendly and fix the “Clickable elements too close together” issue.
Step 5: Validate Fix
After you finish all the suggested changes, open Search Console, and click on validate fix. You will see a validate fix option in the upper right corner where the error is displayed.
Thereafter, Google will start the validation process. Have patience, because this will take time. Once the validation process is over, you will see a tick mark and the word “passed” written next to the error. Congrats! you just fixed the error.
Conclusion
“Clickable elements too close together” is a common error. It mostly happens on sites that are not responsive. Hence, you need to make sure that your site is fully responsive. A mobile-friendly site offers the best browsing experience to users and Google loves it. I hope, this article offers a quick fix to the error you see in your search console. If you have any questions, please let me know in the comments below.
