Tap Targets Too Small: Measure CSS Size and Applicable Exceptions

In one paragraph

Tap targets too small means the measured controls did not satisfy this check's size-and-spacing model after its implemented exceptions. WCAG 2.5.8 generally uses twenty-four by twenty-four CSS pixels at Level AA, with defined exceptions. Check actual active areas and surrounding targets rather than icon artwork alone. A product warning count is not permission for a page to contain a certain number of nonconforming controls.

Why it matters

Small closely packed controls can make selecting the intended action difficult. Larger targets or appropriate separation can help, but no single size guarantees comfort or successful use for every person.

The WCAG minimum criterion includes spacing, equivalent control, inline, user-agent control, and essential exceptions. The spacing test uses twenty-four-CSS-pixel circles under its defined geometry, not a blanket instruction that every link needs twenty-four pixels of empty margin.

The separate enhanced criterion uses forty-four by forty-four CSS pixels at Level AAA with its own conditions and exceptions. Do not confuse CSS pixels with physical device pixels or another platform's point units, and do not present forty-four as an unconditional AA minimum.

How WebAuditOS evaluates this finding

The supplied mobile rule measures selected controls at its 390-by-844 viewport and applies its documented size, inline-link, and geometric-spacing heuristics. No counted failure passes, one through ten warns, and more than ten fails. Missing rendering is ungraded.

It does not apply every contextual WCAG exception and can count some off-canvas or obscured elements. Its related axe target-size rule has different selectors, geometry handling, and severity. Disagreement requires inspection, not an assumption that one threshold count establishes overall conformance.

How to fix it

1. Identify the actual pointer target and function. The visible icon can be smaller than a properly padded active button; a large drawn background can also conceal a smaller actual hit area.
2. Measure in CSS coordinates at representative layouts. Check adjacent, overlapping, fixed, transformed, and state-dependent controls rather than only isolated bounding boxes.
3. For ordinary actions, larger comfortable areas can be a useful baseline. An illustration is:

<button class="action" type="button">Save changes</button>
.action { min-inline-size: 44px; min-block-size: 44px; padding: 0.5rem 0.75rem; }

This is not a universal conformance recipe. Verify the actual hit region, label, focus, overlays, and layout.

4. Where a target is undersized, evaluate the actual spacing exception or another applicable exception using the criterion's conditions. Document the reason instead of assuming all inline-looking content qualifies.
5. Avoid increasing invisible areas so they overlap neighbouring targets. A larger theoretical box is not useful if clicking it activates another action or if a transparent layer intercepts input.
6. Preserve keyboard access and focus visibility. The pointer-target criterion does not replace naming, keyboard, contrast, or error-prevention requirements.
7. Test menus, pagination, cookie controls, forms, and widgets in active mobile states, plus zoom and relevant device interactions. Initial hidden menus can create misleading counts or remain untested.
8. Rescan both product and axe results and review contextual exceptions manually. One validly identified nonconforming target is not automatically acceptable because it falls below the product's fail-count threshold.

What the fix can break

Extra padding can change wrapping or push important controls offscreen. Redesign the layout instead of creating a larger target that obscures content.

A stretched hit area can overlap a neighbouring button. Test actual selection outcomes, not just reported dimensions.

Do not enlarge ordinary prose links indiscriminately when an appropriate inline exception applies. Preserve readable text flow and evaluate the actual requirement.

Questions

Is twenty-four or forty-four the AA minimum?

The minimum criterion generally uses twenty-four CSS pixels with its exceptions. Forty-four belongs to a different enhanced criterion and can be a useful design goal.

Does every undersized target fail?

No. Evaluate the defined exceptions rather than relying only on dimensions.

Do ten warnings mean ten WCAG failures are permitted?

No. The product's reporting thresholds are not a conformance tolerance.

Which related checks help?

Review viewport presence, link names, and the mobile usability guide.