Text too small to read? Clickable elements too close together?

These are two of the most common mobile usability alerts raised by Google search console or a Mobile-Friendly Test are Text too small to read and Clickable elements too close together. However, they are often false negatives, and many clients find themselves at a loss on how to resolve the issue.

The potential reasons for these errors are:

  1. The text is too small to read and or clickable elements are too close together.
  2. The website needs optimising to make it easier for Google to perform a valid test.
  3. They are a false negatives due to crawling and testing of sites when Google server resources are low. See point 2.

Perform a visual check

If you receive an alert, the first thing is to check the affected pages on a real mobile device. Use an Incognito / Private browsing session to eliminate viewing a cached version of the page instead of the latest version.
Note: some routers and ISPs also cache pages so you may want to also check on a different network. If in doubt, ask me to check for you.

My page looks a horrendous!

If your site looks broken it’s likely missing styles, in this case these alerts are just symptoms of a more significant issue. It’s more likely related to caching or the server not completing the necessary requests resulting in 404 or 500 errors. The first step in diagnosing an issue is to disable any cache or optimisation plugins temporarily. Then review the site again.

Text legibility

If you’re finding you need to pinch-zoom to read the text easily, then your text is too small to conform to legibility guidelines. Whether Google alerted you or not, increase your font-sizes and line-heights (if necessary) to remedy this issue. I recommend a minimum body font size of 16px. 

Clickable elements

You should be able to click an element without your fingertip overlapping a neighbouring clickable element. If that’s not the case, then look at increasing its size.

Lighthouse report

If your having difficulty identifying an issue then run a Chrome developer tools Lighthouse report:

https://developers.google.com/web/tools/lighthouse

Online resources:
Text too small to read: https://web.dev/font-size/
Clickable elements too close together: https://web.dev/tap-targets/

My site passed all of the tests, so why am I still receiving these alerts?

What you see and what Googlebot sees may be two different things. Correctly displayed sites rely on all of the necessary stylesheets and javascript files being loaded. Receiving these alerts when your site looks correct means that Google’s servers could not load all of them. There are two likely reasons for this:

  1. Blocked by Robots.txt
  2. Other error

To find out which ones are the cause run a mobile-friendly test:

https://search.google.com/test/mobile-friendly

Click the Page Loading Issues link to see if any Stylesheets or Javascript issues are reported.

Blocked by Robots.txt

You’ll need to enlist my services to help you sort this one out.

Other Error

This somewhat ambiguous error means your website exceeded Google’s server resource limit. The number of network requests your site required or the time it took to complete them.

There are many factors in how the Google resource limit is calculated when it crawls and fetches your site. But it also varies considerably depending on how busy its servers are at the time.

To eliminate the possibility that Google is extremely busy, take a break and come back later and perform another Mobile-Friendly Test. Remember running continuous tests of your site will place more strain on their server’s resources and increase the chances of more failed tests.

Continual mobile usability alerts or Mobile-Friendly Test Fails

If your site continues to fail its test due to the Other issue, your site could probably do with some optimisation. The better your site performs, the less likely it will exceed Googles available resources.

Optimisation

Optimisation is a complex task that varies from site to site. However, one of the main issues I see is websites making a large number of network requests. You can get a quick summary of this by using many online testing tools such as GT Metrix.

If your site is making 50 or more requests, (I have seen cases of 300+!) you need to reconsider what is essential and look at trimming back on plugins, fonts, images or adverts. 

Interested in talking about WordPress?