Tap targets are not size appropriately

How to fix tap targets are not sized appropriately?

A tap target is the area of a button, link or other clickable area that a user can interact with. The tap target should be sized appropriately so that the user can’t accidentally click on the wrong item.

To fix the tap target size you can:

1. Increase padding of the element;
2. or change the space between the tap targets.

The algorithm

ExcellentWebCheck uses the same algorithm as Lighthouse.

This means that tap targets are flagged as too small if:

• The tap target is smaller than 48px by 48px.
• At least 25% of the tap target area of the center of the target overlaps with another tap target.

Why is this important?

Without sufficient space around clickable elements, a user might accidentally click on the wrong button or link. This leads to unexpected results and frustration.

Pointing precisely on an element is difficult when using a touch screen. Therefore, it is more important to create properly sized buttons and links for a mobile-friendly website.

For this reason, search engines like Google, added the check to their mobile-friendliness ranking algorithm.