sitechecker.pro logo mobile

Not Size Tap Targets Appropriately Issue

Not Size Tap Targets Appropriately Issue

Free Complete Site Audit

Access a full website audit with over 300 technical insights.

Something went wrong. Please, try again later.
Trusted by
Sitechecker trusted company

Free Website SEO Checker & Audit Tool

  • Scan the site for 300+ technical issues
  • Monitor your site health 24/7
  • Track website rankings in any geo

The size of tap targets and the distance between them can affect the success of your site. Remember that the same text may appear differently on laptops and smartphones.

What Does “Not Size Tap Targets Appropriately” Mean?

This means that the page in question has buttons and links (tap targets) that are too close and small to each other. For the web version, this situation is not critical. But if users see this when using smartphones, the site needs to be fixed. Why? Because users may not be able to tap the right link with their fingers the first time. And they can get annoyed about it and leave such a site.

What Triggers This Issue?

You created the site first for the web version, where all the elements look harmonious together. But then you noticed that the pages look different on the mobile version: Some small tap targets are close to each other. You even used small clickable elements, but they are far enough apart. Below are some typical reasons:

  1. Using a different scale on the mobile version
  2. Adding new links
  3. Add or remove words or sentences

How to Check the Issue?

If you think that some tap targets on your site are close/small, then you need to do the following:

  1. Find all clickable elements within the chosen page
  2. Ensure that each tap target is a minimum 48x48dp in size or approximately 9mm in each dimension. But if there are smaller elements, they should be spaced about 32 pixels apart, both horizontally and vertically

We recommend that you use separate programs for Android and IOS to check for this problem.

You can find out more details about the touch target size here:

https://support.google.com/accessibility/android/answer/7101858?hl=en

Find out not only the information about Tap targets being too small and close, but also the presence of technical errors on it!

Conduct a full audit to find out and fix all the site level and page level issues on your website.

Something went wrong. Please, try again later.

Why is This Important?

You’ve done SEO for your site, but some new users may not be happy with the mobile version because tap targets are not sized appropriately on your pages. And users can accidentally click on a neighboring element instead of the desired one. You’d better avoid placing tap targets close to each other.

How to Fix the Issue?

Tap targets, such as buttons and links, need to be sized appropriately to ensure that they are easily tappable on touch devices. This is especially important for mobile usability and accessibility. Here are some steps to fix issues with tap targets not being sized appropriately:

1. Increase Tap Target Size

Ensure that tap targets are large enough to be easily tapped. According to Google’s Material Design guidelines, the minimum recommended capacity is 48×48 pixels.


button, .tap-target {
min-width: 48px;
min-height: 48px;
padding: 10px; /* Adjust padding as needed */
}

2. Add Adequate Spacing Between Tap Targets

Make sure there is enough space to prevent accidental taps on adjacent elements. A minimum spacing of 8 pixels is recommended.


button, .tap-target {
margin: 8px; /* Adjust margin as needed */
}

3. Use CSS Media Queries for Responsive Design

Ensure that elements are appropriately fited on different screen sizes by using CSS media queries.


@media (max-width: 600px) {
button, .tap-target {
min-width: 48px;
min-height: 48px;
padding: 12px; /* Increase padding for smaller screens */
}
}

4. Check and Adjust Font Sizes

Ensure that text within buttons or links is legible and the elements are large enough to accommodate the text.


button, .tap-target {
font-size: 16px; /* Ensure the text is readable */
}

5. Use User-Friendly Button Shapes and Sizes

Make buttons and other interactive elements user-friendly with clear shapes and proportions.


button {
border-radius: 4px; /* Rounded corners for better tap experience */
padding: 12px 24px; /* Increase padding for larger tap area */
}

6. Verify in Browser Developer Tools

Use the browser’s developer tools to simulate different devices and check the proportion of elements.

  • Open your website in a browser (Google Chrome is recommended).
  • Right-click and select “Inspect” to open the developer tools.
  • Google Chrome Inspect
  • Click on the “Toggle device toolbar” button (or press Ctrl+Shift+M).
  • Toggle Device Toolbar
  • Select different devices to see how your tap targets behave on various screen sizes.

7. Test with Real Devices

Finally, test your website on actual mobile devices to ensure that the elements are easy to use and appropriately sized.

By following these steps, you can ensure that elements on your website are sized appropriately, improving usability and accessibility for all users.

Fast Links

You may also like

View More Posts
How to Remove Unused JavaScript From Your Site
Site Audit Issues
How to Remove Unused JavaScript From Your Site
Ivan Palii
Jun 21, 2024
Twitter Description Length is a Too Long Issue
Site Audit Issues
Twitter Description Length is a Too Long Issue
Ivan Palii
Aug 16, 2024
How to fix URLs with 5xx server errors
Site Audit Issues
How to fix URLs with 5xx server errors
Ivan Palii
Oct 28, 2022

So, soon? Well, before you go…

Get instant on-page SEO analysis of your home page

  • Detect broken links
  • Detect issues with content optimization
  • Check PageSpeed for mobile and desktop
Something went wrong. Please, try again later.
You’ll get the report in 2 seconds without required signup
exit-popup-image
close