Google search console - text too small to read, clickable elements too close together
Closed this issue · 3 comments
FYI, I just got this email from Google Search Console Team <sc-noreply@google.com>
Mobile Usability issues detected on waysciencelab.com
To the owner of waysciencelab.com:
Search Console has identified that your site is affected by 2 Mobile Usability issues:
Top Issues
The following issues were found on your site:
- Text too small to read
- Clickable elements too close together
We recommend that you fix these issues when possible to enable the best experience and coverage in Google Search.
You can safely ignore this. I'll elaborate more tomorrow but here's some related links:
Okay, so if you read the links above, you'll find some common complaints about these warnings. I encounter them a lot and find them to be invalid. Here are some reasons why.
When GSC gives you these errors, it doesn't give any helpful information. It doesn't tell you where the errors are occurring or what is causing them. They're not very actionable.
Google says they want at least 12px for font sizes, yet we are definitely not using anything smaller than 14.4px: 16px default <html> font size times 0.9rem (smallest font size in any of the css styles) equals 14.4px. Also, Chrome Lighthouse does not report any small text size issue. GSC is wrong.
Regarding clickable elements too close together, I'm assuming (again I can't be sure because GSC gives no info) that it's complaining about things like this:
GSC seems to want at least a few pixels of space between any link or button. I get where they're coming from (see the links above), but I think they're misguided and not backed up by any hard research (my opinions aren't either, but I just say this to say that we shouldn't just trust them as fact). I purposefully make these links such that they have no margins (space) around them, but a large padding (click "hitbox"). This way, you don't get the annoying situation where you're trying to click on something but accidentally click on blank space between them, doing nothing. At least you always get a click on something, whichever you were closest to. I don't like links where you have to get super precise in order to click them. I submit that what matters is not the space between clickable items, but the absolute size of clickable items, such that people, even those on small mobile screens with motor deficiencies for example, can easily click them. Testing this template on mobile, it seems to me that the icons in the footer (which might be the most problematic) are still large enough to easily touch, though I might bump the size of them anyway just a little bit. But I do not think the spacing matters. This is also something that Lighthouse does not complain about. 🤷
However, as a result of all this, I've opened #101 to solve some related accessibility issues. Look out for a major release coming soon (hopefully) that addresses these and perhaps makes some errors go away.