Search code examples
cssuser-experience

Tap targets are too small - Google pagespeed feedback


I'm using Zurb Foundation 5.5.3 with vanilla CSS.

I'm getting the Google pagespeed feedback my tap targets are too small in various areas per https://www.dropbox.com/s/v42ujkgiof8kd3r/Screenshot%202016-05-22%2007.55.45.png?dl=0

I don't know what I'm supposed to do for example in the footer to increase the size of the tap target...could anyone take a look ?

<footer class="footer">
    <div class="row">
        <div class="small-12 medium-6 large-5 columns">
            <p class="logo-footer"><img src="/img/favicon-32x32.png" alt="iProbe logo" width="32" height="32"/><br>iProbe</p>
            <p class="footer-links">
                <a href="/our-company/about-us">Company</a>
                <a href="/learn/">Knowledge Center</a>
                <a href="/our-work/">Our Work</a>
                <a href="/our-company/jobs">Jobs</a>
                <a href="/our-company/contact-us">Contact</a>
            </p>
            <p class="copywrite">Copyright &copy; 2002-2016 iProbe Multilingual Solutions, Inc. All Rights Reserved.</p>
        </div>
        <div class="small-12 medium-6 large-4 columns">
            <address>
                <ul class="contact">
                    <li><p><i class="fi-marker"></i><a class="ul-white" href="https://www.google.com/maps/place/iProbe+Multilingual+Solutions,+Inc./@40.7436927,-73.9857017,17z/data=!3m1!4b1!4m5!3m4!1s0x89c25978e10ef08d:0xac0cc841c886ce37!8m2!3d40.7436927!4d-73.983513">419 Park Avenue South, Suite 600, <br>New York, NY 10016</a></p></li>
                    <li><p><i class="fi-telephone"></i>+1-212-489-6035</p></li>
                    <li><p class="a-white"><i class="fi-mail"></i><a href="mailto:info@iprobesolutions.com">info@iprobesolutions.com</a></p></li>
                </ul>
            </address>  
        </div>
        <div class="small-12 medium-12 large-3 columns">
            <p class="about">See what we're up to.</p>
            <p class="about subheader">Like us.</p>
            <ul class="inline-list social">
                <li><a href="http://www.facebook.com/iprobe"><i class="fi-social-facebook"></i></a></li>
                <li><a href="https://twitter.com/iprobe"><i class="fi-social-twitter"></i></a></li>
                <li><a href="https://www.linkedin.com/company/iprobe"><i class="fi-social-linkedin"></i></a></li>
            </ul>
        </div>
    </div>
</footer>

This is the fiddle: https://jsfiddle.net/setbon/af7qtbh7/1/


Solution

  • It means that on a touch device 2 or more anchors are so close that there is a chance that a user might accidentally tap on another anchor than the one he wants Or the user tries to tap one anchor but instead it does on the other.

    So you should have some spacing ie margin between the anchors so that user can easily tap the relevant anchor.

    For more details see https://developers.google.com/speed/docs/insights/SizeTapTargetsAppropriately

    CSS change needed:

    Adding a margin will fix the issue, this is for footer-links only, you will need to do for all the links Google suggested.

    .footer .footer-links a {
        margin: 0 10px 10px 0;
        display: inline-block;
    }