How to join multiple tap targets into one to fix PageSpeed "tap targets too close"-warning?

Question

Situation and problem description

I'm currently working on mobile optimization of a web page according to hints given from Google Developer's PageSpeed Insights Tool and I get a lot of warnings about tap targets being too close to each other. The problem is: PageSpeed sees multiple tap targets when there's just one intended to be.

Example

PageSpeed Output (simplyfied):

The tap target <span class="glyphicon"> is close to 1 other tap targets.
The tap target <span class="badge"> is close to 1 other tap targets.

corresponding CSS/HTML (simplified):

.glyphicon::before {
    content: "x"; /* substitute for same size shopping cart symbol of custom font*/
}

.badge {
  background-color: #999;
  border-radius: 10px;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  min-width: 10px;
  padding: 3px 7px;
  text-align: center;
  vertical-align: baseline;
}

a {
  text-decoration: none;
  border-color: #000;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  margin: 1px 2px;
  padding: 5px 8px;
}

<a href="//some.where">
  <span class="glyphicon"></span>&nbsp;<span class="badge">21</span>
</a>

Question

You can see easily that the intention is to have one tap target which is the link, consisting of two (or in similar cases more) HTML elements.

What can I do to make Google's PageSpeed to recognize just the parenting link for a tap target and ignore it's children?

Why does this need two child elements to begin with? A simple `a` element containing _only_ the text would totally suffice. The icon can be applied via `:before` to the link itself, and the non-breaking space can be replaced by a padding or margin. — CBroe, Feb 12 '16 at 11:11
This is just one example, there's also a mobile menu button consisting of three horizontal bars stacked above each other which gives the same problem. I'd rather solve the issue generically than fiddle with every element individually (if that's possible...) — xmoex, Feb 12 '16 at 12:45
I’m surprised Pagespeed does even consider those child elements to be individual tab targets … might perhaps have something to do with additional formatting you left out in your “simplified” CSS, event handlers attached by scripts, etc. — CBroe, Feb 12 '16 at 12:48

score 0 · Answer 1 · answered Feb 17 '16 at 14:52

You're wrapping the anchor element around two inline elements. If you wrap it around a block level element, like a div, you'll have one block level link instead of multiple inline links. You'll also have the advantage of being able to size the tap target in terms of height and width to optimize the tap target for Google.

score 0 · Answer 2 · answered Feb 18 '16 at 08:42

The devil is in the details, and we don't seem to have any hint on why PageSpeed interprets the individual <span> elements within the <a> as tap targets, as it was already mentioned there could be event handlers bound to the elements triggering this warning.

With that disclaimer, I will assume PageSpeed does in fact warn you about structures like

<a href=#>
  <span class=glyph>..</span>&nbsp;<span>..</span>
</a>

So I'll focus on removing elements from it, as to prevent the symptoms (I truly don't believe PageSpeed nags about inline markup within an anchor).

.glyph::before {
  content: "x";
  margin: 0 1ex 0 0; /* hated to see &nbsp; again */
}

.badge {
  background-color: #999;
  border-radius: 10px;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  min-width: 10px;
  padding: 3px 7px;
  text-align: center;
  vertical-align: baseline;
}

a {
  text-decoration: none;
  /* Tip: Use shorthand to define, full property to override */
  /*
  border-color: #000;
  border-style: solid;
  border-width: 1px;
  */
  border: 1px solid #000;
  border-radius: 3px;

  margin: 1px 2px;
  padding: 5px 8px;

  /* prevent lines from wrapping, removes the need for &nbsp; */
  white-space: nowrap; 
}

<a href="//some.where" class="glyph">
  <span class="badge">21</span>
</a>

What this does is move around some logic, reducing the amount of elements needed to style it. (With some added tips in the comments)

This should remove the .. is close to 1 other tap targets warnings, as these elements are simply removed.

How to join multiple tap targets into one to fix PageSpeed "tap targets too close"-warning?

Situation and problem description

Example

Question

2 Answers2