Tap target density

What this check looks for

This check counts all interactive elements on the page (links, buttons, inputs, selects, textareas, and role="button" elements), and separately looks for parent elements containing 15 or more direct sibling <a> children — a footer link wall or tag cloud, for example. If any such dense clusters are found, it warns, citing each cluster. If no dense clusters exist but the total interactive-element count exceeds 150, it warns on overall density instead. Below both thresholds, it passes.

Why it matters

A cluster of links packed tightly together — common in footer sitemaps, tag clouds, or compact navigation menus — is easy to click precisely with a mouse cursor but genuinely hard to tap accurately with a finger, and mis-taps that land on the wrong link are a frustrating, avoidable friction point on mobile. An unusually high total count of interactive elements on one page is often a sign of an overly dense layout generally, not just a tap-precision problem — it usually correlates with a page trying to do too much at once. This is a usability heuristic focused on the mobile experience rather than a direct search-ranking signal, but poor mobile usability contributes to the page-experience factors search engines do weigh.

How to fix it

Give touch targets more breathing room and break up dense link clusters:

<!-- 20 tightly packed footer links with no spacing -->
<div class="footer-links">
  <a href="/a">A</a><a href="/b">B</a><a href="/c">C</a>
  <!-- ...17 more... -->
</div>

<!-- Fixed: grouped into columns with spacing, targets sized for touch -->
<div class="footer-links" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;">
  <a href="/a" style="padding: 8px 0; min-height: 48px;">A</a>
  <a href="/b" style="padding: 8px 0; min-height: 48px;">B</a>
</div>

Aim for at least 48×48px tap targets with roughly 8px of surrounding space, per common mobile-accessibility guidance.