Mobile: Target Size

Pages with tap targets that are too small or there is not enough space around them, which means they are difficult to interact with on mobile devices.

Tap targets (also known as ‘touch targets’) are buttons, links or form elements that users on touch devices can use.

Insufficient size or spacing can also make it challenging for users with mobility impairments, or anyone experiencing difficulties controlling fine movement.

Tap targets must have sufficient size and spacing in order to “be easily activated without accidentally activating an adjacent target.”

Tap targets must be at least 24 by 24 CSS pixels in size.

How to Analyse in the SEO Spider

To populate this filter the PageSpeed Insights API must be connected via ‘Config > API Access > PSI’.

View URLs with this issue in the ‘Mobile’ tab and ‘Target Size’ filter.

Use the lower ‘Lighthouse Details’ tab to click on the issue on the left-hand side, and see details of the tap targets on the right-hand side.

Bulk export the pages and details of the tap targets via ‘Reports > Mobile > Target Size’.

What Triggers This Issue

This issue is triggered by the Axe accessibility testing library within Lighthouse when the following conditions are not met:

• Touch targets must be at least 24 by 24 CSS pixels in size. Size is computed by taking the largest unobscured area of the touch target.
• If the size of the target is insufficient, then it must be possible to draw a virtual circle centered on the target with a diameter of 24 pixels that does not intersect any other targets, nor any of the circles on other undersized targets.

For example, the following HTML would be considered a fail:

<button id="target">+</button>
<button style="margin-left: -10px">Adjacent Target</button>

How To Fix

Increase the size of tap targets that are too small, or increase the space between the tap targets so they are not so close together using properties like margin.