Accessibility
Tap targets are sized appropriately
It is unnecessary and potentially confusing to have alternative text for a link or image to be repeated in text adjacent to the link or image since it would be read twice by a screen reader.
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 audit fails
Sitefig flags pages with tap targets that are too small or too close together:
Targets that are smaller than 48 px by 48 px or closer than 8 px apart fail the audit. 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. |
How to fix your tap targets
Step 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:
Step 2: Increase the spacing between tap targets that
are too close together using properties like margin
. There should be at least
8 px between tap targets.
- Accessible tap targets: more information on how to ensure your tap targets are accessible by all users.