This means that the URL in question contains elements meant to be interacted with by touch, such as buttons and hyperlinks, which are too small and closely packed.
Why is this important?
When interactive elements are positioned too close to one another, it presents a challenge for mobile users trying to accurately tap on a specific element without unintentionally activating the adjacent one. A minimum touch target size of approximately 48 pixels is advisable for pages designed for mobile use. Should the touch targets be smaller, they ought to be distanced at least 32 pixels apart in all directions.
What does the Optimization check?
This Optimization will trigger for any URL where interactive elements are less than 48 x 48 CSS pixels in size, and these elements are not separated by at least 32 pixels both horizontally and vertically.
Examples that trigger this Optimization:
For instance, in the given example, the majority of links are difficult to tap because their touch area is nearly the same as the font size, which is much smaller than the recommended 48 pixels. The absence of a 32 pixels gap between these touch targets would activate the Optimization.
<!-- Example HTML showing tap targets that are too small --><a href="link" style="font-size: 10px; margin-right: 5px;">Link 1</a><a href="link2" style="font-size: 10px; margin-left: 5px;">Link 2</a>
How do you resolve this issue?
Initially, gauge the severity of the issue—if the problem affects only minor tap targets, adjustments might be unnecessary. In contrast, if numerous crucial tap targets on your site are problematic or essential calls to action are being missed, you should invest time in reworking your page templates and modifying CSS to create a more spacious layout or increase touch target sizes.