Mobile Tap Targets - Practical Fix Guide

This check estimates whether interactive controls are large enough for touch users. Undersized targets increase accidental taps, form errors, and mobile frustration.

What Scavo checks (plain English)

Scavo samples interactive elements (links, buttons, form controls, labels, summaries) and estimates target size from inline style/attributes.

Thresholds in this check:

• Minimum threshold: 24px (critical WCAG-style floor)
• Recommended comfort target: 44px

How Scavo scores this check

Result behavior:

• Fail: undersized (<24px) targets are significant (>=25% ratio or >=3 targets)
• Info: fewer than 3 measurable targets (sample too limited)
• Warning: some undersized targets (<24px) but below fail threshold
• Warning: none under 24px but some under 44px
• Pass: no undersized sampled targets

In your scan report, this appears under What failed / What needs attention / What is working for mobile_tap_targets, followed by Recommended next steps and Technical evidence (for developers) when needed.

• Scan key: mobile_tap_targets
• Category: ACCESSIBILITY

Why fixing this matters

Small touch targets cause mis-taps and slow task completion, especially on dense navs and form-heavy pages. This is a direct conversion and usability issue on mobile.

Target-size consistency also reduces support friction and helps accessibility compliance posture.

Common reasons this check flags

• Icon buttons with tiny dimensions.
• Tight inline controls in tables/cards.
• Low padding on links/buttons in mobile breakpoints.
• Legacy components not updated to modern touch spacing.

If you are not technical

1. Test key mobile flows one-handed on a real device.
2. Prioritize CTA, nav, and form control targets first.
3. Ask for component-level size tokens, not one-off CSS patches.
4. Re-scan and confirm undersized count declines.

Scavo flagged Mobile Tap Targets (mobile_tap_targets). Please increase undersized interactive controls to meet at least 24px minimum and preferably 44px comfort size, then verify at mobile breakpoints.

If you are technical

1. Set minimum touch-size tokens in design system.
2. Increase padding/hit area for icon-only controls.
3. Ensure spacing between adjacent targets to reduce mis-taps.
4. Validate responsive breakpoints and state variants.
5. Add UI regression checks for mobile target dimensions.

How to verify

• Inspect computed control dimensions on mobile viewport.
• Test tap accuracy on key journeys (menu, signup, checkout).
• Confirm no critical controls drop below minimum size.
• Re-run Scavo and check critical under-24px count.

What this scan cannot confirm

• It estimates from measurable inline signals; some computed styles may be missed.
• It does not fully model spacing/context exceptions.
• It does not replace manual mobile usability testing.

Owner checklist

• [ ] Assign owner for mobile interaction ergonomics.
• [ ] Enforce target-size tokens in component library.
• [ ] Include real-device tap QA for major releases.
• [ ] Recheck after UI density or nav redesigns.

FAQ

Is 24px enough?

It is minimum threshold in this check. 44px is usually more comfortable for real users.

Can we keep small icon controls if visually required?

Increase invisible hit area/padding so interaction remains accessible.

Why info instead of pass/fail sometimes?

If too few measurable targets are detected, Scavo reports limited confidence.

What should we fix first?

Controls that trigger core actions: primary CTAs, menu toggles, form buttons.

Sources

• WCAG 2.2: Target size (minimum)
• WCAG 2.2: Target size (enhanced)
• Google Material touch target guidance

Need a touch-target token spec for your current components? Send support your button/link component list.