# No 300ms tap delay

- **Pattern:** `ab-001928` (`mobile-responsiveness.touch.tap-delay`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001928
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001928)

## 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.

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

## Detection

- **ID:** `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:

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

---

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-001928