Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

Tap targets are not sized appropriately

Overview

Tap targets are interactive elements, like buttons or links, that users frequently tap. Appropriately-sized tap targets make pages more mobile-friendly and accessible. Google Search started boosting the ranking of mobile-friendly pages on mobile search results back in 2015. See Rolling out the mobile-friendly update.

A tap target is inappropriately-sized when it's too small, or too close to other tap targets.

Recommendations

To pass this audit:

  • Increase the size of the failing tap targets. Tap targets that are 48 pixels wide and 48 pixels tall never fail.

    Appropriately-sized tap targets
    Figure 1. Appropriately-sized tap targets
  • Increase the spacing between tap targets, using properties such as padding or margin. There should be at least 8 pixels of space between tap targets. In practice Lighthouse provides some leniency on the size, so tap targets as small as 40 pixels by 40 pixels usually pass.

Click the audit to see which tap targets are causing the audit to fail. The Tap Target column tells you which tap target is inappropriately-sized. The Size column tells you the size of the target's bounding rectangle, in pixels. The Overlapping Target column tells you which other tap target is too close.

The tap targets audit
Figure 2. The tap targets audit

More information

Audit source

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.