{"id":69862,"date":"2023-09-11T15:30:00","date_gmt":"2023-09-11T12:30:00","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=69862"},"modified":"2024-01-10T21:04:24","modified_gmt":"2024-01-10T19:04:24","slug":"tap-targets-are-not-sized-appropriately","status":"publish","type":"post","link":"https:\/\/themeisle.com\/blog\/tap-targets-are-not-sized-appropriately\/","title":{"rendered":"How to Fix \u201cTap Targets Are Not Sized Appropriately\u201d on WordPress"},"content":{"rendered":"\n

Lighthouse is a powerful tool that allows you to gather useful information about the performance of your web pages. One of the common design problems flagged is “Tap targets are not sized appropriately”<\/strong>. However, if you’re not a web developer or designer, you might not know what this means or how to fix it.<\/p>\n\n\n\n\n\n\n\n

Fortunately, it’s relatively straightforward to make your pages more user-friendly and remedy this particular Lighthouse issue. For example, you can increase the size of tap targets or the spacing between them.<\/p>\n\n\n\n

\n
\n

In this post, we’ll take a \ud83d\udd0e closer look at Lighthouse<\/a> and the “Tap targets are not sized appropriately” issue. Then, we’ll discuss a few ways you can fix it<\/a>. Let’s begin!<\/p>\n<\/div>\n\n\n\n

\n\t\t
<\/div>\n\t\t\t
\n\t\t \t
\n\t\t \t\tLearn how to fix \u2699\ufe0f \u201cTap Targets Are Not Sized Appropriately\u201d on #WordPress \ud83e\udd14<\/a>\n\t\t \t<\/div>\n\t\t \t
\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n
<\/div>\n\n\n\n

An introduction to the “Tap targets are not sized appropriately” issue<\/h2>\n\n\n\n

Before we explore the “Tap targets are not sized appropriately” issue, you’ll need to know a bit about Lighthouse<\/a>. This open-source tool enables you to assess the quality and performance of your web pages. For instance, you can gather information about your site’s accessibility<\/a>, SEO, page speed, design, and more.<\/p>\n\n\n\n

If you have a lot of experience with web development, you might run Lighthouse in Chrome DevTools or from the command line. However, PageSpeed Insights<\/a> is also powered by Lighthouse<\/a>, and is often a good alternative for beginners.<\/p>\n\n\n\n

To get an advanced assessment of your website, all you need to do is enter your site’s URL and click on Analyze<\/strong><\/em>:<\/p>\n\n\n

\n
\"PageSpeed<\/figure><\/div>\n\n\n

The analysis will begin shortly after. Then, you can view details about your web page’s performance<\/a> and optimization. PageSpeed Insights makes this easy by categorizing details under clear headings.<\/p>\n\n\n\n

If you scroll to the bottom, you’ll find the Mobile Friendly<\/strong><\/em> section. This is where you’ll see information about tap targets:<\/p>\n\n\n

\n
\"Tap<\/figure><\/div>\n\n\n

As you can see, our analysis returned the “Tap targets are not sized appropriately” issue. If you expand the section, you’ll find more detailed information about each of your tap targets.<\/p>\n\n\n\n

Tap targets are the areas of your web page that users can interact with on touch devices. For example, visitors might be able to touch images, buttons, links, or form elements.<\/p>\n\n\n\n

Lighthouse flags tap targets that are too small (smaller than 48 px by 48 px). You’ll also see the warning message if your tap targets don’t have enough space around them, resulting in overlapping targets.<\/p>\n\n\n\n

You might run into this issue when you create the desktop version of your website without optimizing for the mobile experience<\/a>. On desktop, all your page elements may sit nicely together, but if they can’t adapt to different screen sizes, this causes problems.<\/p>\n\n\n

<\/div>\n\n\n\n

How to fix the “Tap targets are not sized appropriately” issue<\/h2>\n\n\n\n

Now that you know more about Lighthouse and the “Tap targets are not sized appropriately” issue, let’s take a look at some easy ways to fix it.<\/p>\n\n\n\n

    \n
  1. Increase the size of tap targets<\/a><\/li>\n\n\n\n
  2. Increase the spacing between tap targets<\/a><\/li>\n<\/ol>\n\n\n
    <\/div>\n\n\n\n

    1. Increase the size of tap targets<\/h3>\n\n\n\n

    The first way to fix the “Tap targets are not sized appropriately” issue is to increase the size of the tap targets themselves. So, let’s consider some design elements that serve as tap targets.<\/p>\n\n\n\n

    As we mentioned, links, buttons, icons, and form elements can all serve as tap or “touch” targets. Therefore, you’ll need to make sure that the size of these design features doesn’t dip below 48 px by 48 px. In this section, we’ll show you how to resize buttons and links on your pages.<\/p>\n\n\n\n

    Increase the size of buttons in WordPress<\/h4>\n\n\n\n

    To resize buttons on your website, you’ll need to open the WordPress Customizer<\/a>. You can do this by going to Appearance<\/strong> <\/em>> Customizer<\/strong> <\/em>in your dashboard. Next, select Buttons<\/em>:<\/p>\n\n\n

    \n
    \"Resize<\/figure><\/div>\n\n\n

    Now, there are a few ways that you can increase the size of buttons. First, you’re able to increase the Weight<\/strong> <\/em>using the dropdown box. This won’t drastically alter the size of the tap target, but it will add some extra bulk and definition:<\/p>\n\n\n

    \n
    \"Change<\/figure><\/div>\n\n\n

    To further optimize a tap target, you can increase its Line Height<\/strong><\/em>. This will increase the size of the target vertically. Plus, if you edit the value of the Letter Spacing<\/strong><\/em>, you can extend the size of the button horizontally:<\/p>\n\n\n

    \n
    \"Increase<\/figure><\/div>\n\n\n

    Then, remember to click on Publish<\/strong> <\/em>to save your changes.<\/p>\n\n\n\n

    Increase the size of links in WordPress<\/h4>\n\n\n\n

    Links can direct users to other pages on your website. Therefore, they might encourage visitors to stay on your site for longer.<\/p>\n\n\n\n

    However, in order for visitors to “touch” or tap your link targets, you need to make them clickable. The easiest way to do this is to increase the size of links.<\/p>\n\n\n\n

    You can do this directly within the relevant post or page. For example, you might feature a Query Loop block, so users can see a list of your published blog posts:<\/p>\n\n\n

    \n
    \"Fix<\/figure><\/div>\n\n\n

    In this scenario, each of your post titles might contain a link. Meanwhile, you might feature an additional Read more<\/em> link to lead visitors directly to the post.<\/p>\n\n\n\n

    One of the best things about using a link in the title of your posts is that it’s super simple to increase the size of the tap target. All you need to do is click on the link title. Then, navigate to Change heading level<\/strong> <\/em>within the toolbar:<\/p>\n\n\n

    \n
    \"Changing<\/figure><\/div>\n\n\n

    Here, you can increase the link size by opting for an H1 or H2 format.<\/p>\n\n\n\n

    Additionally, you might also have links in your paragraph text. You can increase the size of these tap targets by clicking on the element. Then, in the Block settings, head to Typography<\/strong><\/em>:<\/p>\n\n\n

    \n
    \"Change<\/figure><\/div>\n\n\n

    Here, use the SIZE (PX)<\/strong> <\/em>dropdown to change from Normal<\/strong> <\/em>to a larger setting:<\/p>\n\n\n

    \n
    \"Increase<\/figure><\/div>\n\n\n

    Then, make sure to save your changes.<\/p>\n\n\n

    <\/div>\n\n\n\n

    2. Increase the spacing between tap targets<\/h3>\n\n\n\n

    The second way to fix the “Tap targets are not sized appropriately” issue in Lighthouse is to increase the spacing between tap targets. Chrome says that 8 px is usually sufficient<\/a>. However, for smaller tap targets, you may need to increase the distance further to pass the Lighthouse audit<\/a>. There are a few ways you can do this.<\/p>\n\n\n\n

    Adjust the padding property<\/h4>\n\n\n\n

    One way to increase the space between tap targets is to adjust the padding property of the elements. This will increase the distance between targets by adding on to the element’s margins.<\/p>\n\n\n\n

    You can do this with your buttons by opening the WordPress Customizer. Then, head to Buttons<\/strong><\/em>. You’ll find the Padding<\/strong> <\/em>property at the top of the General<\/strong> <\/em>settings:<\/p>\n\n\n

    \n
    \"Increase<\/figure><\/div>\n\n\n

    To fix the “Tap targets are not sized appropriately” issue, simply increase the padding around your button. Make sure you’re in PX<\/strong> <\/em>and not EM<\/strong><\/em> or REM<\/em><\/strong>.<\/p>\n\n\n\n

    It can be a good idea to try increasing the padding on each side by 10 px first. Then, you can increase the size between targets even further if need be.<\/p>\n\n\n\n

    You might find that adding more padding shuffles one of your buttons onto a new line. In which case, you can also increase the padding value at the top and bottom to put more space between your targets:<\/p>\n\n\n

    \n
    \"Add<\/figure><\/div>\n\n\n

    Make sure to click on Publish<\/strong> <\/em>to save your changes.<\/p>\n\n\n\n

    Use the WordPress Spacer block<\/h4>\n\n\n\n

    Another approach to adding space between page elements is using the WordPress Spacer block. All this does is add some blank space to your page, keeping your tap targets a greater distance from each other. <\/p>\n\n\n\n

    For example, you might have two buttons stacked on top of each other:<\/p>\n\n\n

    \n
    \"Fix<\/figure><\/div>\n\n\n

    Although it may look as though there is sufficient space between these touch targets, when you preview the layout on the front end, you can see that the buttons are almost overlapping:<\/p>\n\n\n

    \n
    \"View<\/figure><\/div>\n\n\n

    In this case, you can add a Spacer block between the buttons to fix the “Tap targets are not sized appropriately” issue. Simply click on the +<\/strong> icon between the blocks. Then, search for “spacer”:<\/p>\n\n\n

    \n
    \"Add<\/figure><\/div>\n\n\n

    Add the block to your page and this instantly creates space between your elements. Now, click on Publish<\/strong> <\/em>to save your changes and view the buttons on the front end:<\/p>\n\n\n

    \n
    \"Use<\/figure><\/div>\n\n\n

    As you can see, there is now a greater amount of space between your tap targets.<\/p>\n\n\n

    Go to top<\/a><\/div>\n\n\n\n

    Conclusion \ud83e\uddd0<\/h2>\n\n\n\n
    \n
    \n

    One of the ways that Lighthouse evaluates your website design for accessibility and user-friendliness is by judging your tap targets. If “tappable” or “touchable” design elements are too large or too close together, you might see the “Tap targets are not sized appropriately” issue.<\/p>\n<\/div>\n\n\n\n

    \n\t\t
    <\/div>\n\t\t\t
    \n\t\t \t
    \n\t\t \t\tLearn how to fix \u2699\ufe0f \u201cTap Targets Are Not Sized Appropriately\u201d on #WordPress \ud83e\udd14<\/a>\n\t\t \t<\/div>\n\t\t \t
    \n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n\n

    To recap, here are two ways to fix this problem:<\/p>\n\n\n\n

      \n
    1. \ud83d\udc49 Increase the size of tap targets.<\/li>\n\n\n\n
    2. \ud83d\udc49 Increase the spacing between tap targets.<\/li>\n<\/ol>\n\n\n\n

      Do you have any questions about how to fix the “Tap targets are not sized appropriately” issue? Let us know in the comments below!<\/em><\/strong><\/p>\n\n\n