[ Web Proxy ]
URL:
Viewing: https://web.dev/tap-targets [Back]  [Original]

Tap targets are not sized appropriately  |  Lighthouse  |  Chrome for Developers Skip to main content
Chrome for Developers [Chrome for Developers]

Tap targets are not sized appropriately Stay organized with collections Save and categorize content based on your preferences.

Tap targets are the areas of a web page that users on touch devices can interact with. Buttons, links, and form elements all have tap targets.

Many search engines rank pages based on how mobile-friendly they are. Making sure tap targets are big enough and far enough apart from each other makes your page more mobile-friendly and accessible.

How the Lighthouse tap targets audit fails

Lighthouse flags pages with tap targets that meet both of these conditions:

Lighthouse audit showing inappropriately sized tap targets [Lighthouse audit showing inappropriately sized tap targets]

When the audit fails, Lighthouse lists the results in a table with three columns:

Tap Target The tap target that is inappropriately sized.
Size The size of the target's bounding rectangle in pixels.
Overlapping Target Which other tap targets, if any, are too close.
Note: Each SEO audit is weighted equally in the Lighthouse SEO Score, except for the manual Structured data is valid audit. Learn more in the Lighthouse Scoring Guide.

How to fix your tap targets

Option 1: Increase the size of tap targets that are too small. Tap targets that are 48 px by 48 px never fail the audit. If you have elements that shouldn't appear any bigger (for example, icons), try increasing the padding property:

Appropriately-sized tap targets [Appropriately-sized tap targets] Use padding to make tap targets bigger without changing the appearance of an element.

Option 2: Increase the spacing between tap targets that are too close together using properties like margin. 8 px between tap targets is a good starting point, but is not always enough spacing to pass the audit especially for very small targets.

Resources

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2019-05-02 UTC.

[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2019-05-02 UTC."],[],[]]

Web Proxy Viewer  |  New URL  |  Original Page