All Collections
Accessibility
Overlapping Tap Targets
Overlapping Tap Targets
Berislav avatar
Written by Berislav
Updated over a week ago

What is the issue?

Tap targets are the areas of a web page that users on touch devices can interact with such as buttons, links, and form elements. It’s important to ensure that tap targets are big enough and far enough apart from each other for a user-friendly and accessible website.

This report shows you on which pages of your website tap targets are too close together. These pages have targets that are smaller than 48 px by 48 px or closer than 8 px apart.

How to fix it

You can fix tap targets by increasing the padding property to 48dp minimum touch target size, and increasing the spacing between tap targets that are too close together using properties like margin to ensure there should be at least 8 px between tap targets. If you are not able to change padding properties via a CMS, download the list of URLs and pass them on to your developer.

If tap targets are too close together because of a missing viewport configuration (indicated in the column in the report below), you or your developer just need to add <meta name="viewport" content="width=device-width, initial-scale=1"> to the header area of every page.

The URLs are sorted according to OPR (number of internal links a page has), but you can also sort or filter according to Google Analytics data to more easily identify your high-priority pages.

Learn more in this article

Did this answer your question?