Skip to main content

No 300ms tap delay

ab-001928 · mobile-responsiveness.touch.tap-delay
Severity: lowactive

Why it matters

Legacy mobile browsers inserted a 300ms delay on tap events to distinguish between a single tap and a double-tap-to-zoom gesture. That delay makes buttons feel sluggish and unresponsive compared to native apps. Modern browsers eliminate the delay when a correct viewport meta tag is present, but older WebViews and some embedded browsers still apply it. touch-action: manipulation disables the double-tap-zoom gesture on interactive elements, removing the delay explicitly.

Severity rationale

Low because the primary mitigation (viewport meta tag) is already required by another check, and modern browsers no longer impose the delay.

Remediation

If the viewport meta check already passes, no further action is required for modern browsers. For extra coverage on older mobile WebViews, add touch-action: manipulation to buttons, links, and anything with role="button" in your global CSS.

button, a, [role="button"] { touch-action: manipulation; }

Detection

  • ID: mobile-responsiveness.touch.tap-delay

  • Severity: low

  • What to look for: Check for touch-action: manipulation CSS rule applied globally (e.g., on html or * selector) OR proper viewport meta tag with width=device-width. Modern browsers eliminate the 300ms tap delay when either condition is met. If the viewport meta tag is missing (caught by the viewport-meta check), this check should specifically look for touch-action: manipulation as an independent mitigation.

  • Pass criteria: At least 1 of the following 2 tap-delay mitigations must be present: (1) the viewport-meta check passes (meaning width=device-width is set, which eliminates the delay in all modern browsers), or (2) touch-action: manipulation is set on interactive elements or globally via a CSS rule. Count all touch-action: manipulation declarations if present.

  • Fail criteria: Neither of the 2 mitigations is present — no width=device-width viewport meta tag AND no touch-action: manipulation CSS on interactive elements.

  • Skip (N/A) when: Skip if the viewport-meta check passes — a correct viewport meta tag already eliminates the tap delay on modern browsers, so this check adds no independent signal in that scenario.

    Design note: This check is skipped when viewport-meta passes because a correct viewport meta tag eliminates the 300ms tap delay in modern browsers. The skip means this check does not contribute to the score for well-configured projects — this is intentional, as the viewport meta tag is the primary mitigation. The touch-action: manipulation CSS approach provides additional protection for older browsers but is not required when viewport is correctly configured.

  • Detail on fail: "0 of 2 tap-delay mitigations present — no width=device-width viewport meta tag and no touch-action: manipulation declarations found".

  • Remediation: Modern browsers eliminate this delay automatically when width=device-width is set in the viewport meta tag. For older browser coverage, add:

    button, a, [role="button"] {
      touch-action: manipulation;
    }
    

Taxons

History