# Interactive elements meet minimum touch target size (44x44px)

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

## Why it matters

Touch targets that are too small cause mis-taps, especially for users with larger fingers, motor impairments, or when holding a phone one-handed in motion. A 16px icon button with no padding gives an actual tap area of roughly 256 px² — 25% of the 1936 px² that WCAG 2.2 SC 2.5.8 (Target Size, Minimum) requires at 44×44px. Repeated mis-taps on close buttons, icon actions, or navigation links create genuine usability failures that drive abandonment. WCAG 2.2 SC 2.5.5 (Target Size, Enhanced, AAA) sets 44×44px; SC 2.5.8 (AA) requires 24×24px minimum with spacing — either way, 16px icons without padding fail both levels.

## Severity rationale

High because undersized touch targets directly cause interaction failures and mis-taps on mobile, with WCAG 2.2 SC 2.5.8 AA compliance at stake.

## Remediation

Add explicit size and padding to every interactive element that carries only an icon. In `src/app/globals.css` or a component stylesheet:

```css
.icon-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
```

In Tailwind, use `w-11 h-11 flex items-center justify-center` on every icon-only `<button>`:

```tsx
<button className="w-11 h-11 flex items-center justify-center rounded-md">
  <XIcon className="w-5 h-5" aria-hidden="true" />
  <span className="sr-only">Close</span>
</button>
```

For navigation links, `block py-3 px-4` gives sufficient tap area without visual change.

## Detection

- **ID:** `touch-target-size`
- **Severity:** `high`
- **What to look for:** Examine interactive elements — buttons, links, icon buttons, form controls, toggle switches, checkboxes. Check their declared or computed sizes. Buttons with small font and no padding, icon-only buttons without padding, and small checkbox/radio elements are common failure points. Look for explicit sizing (`width`, `height`, `padding`) on these elements.
- **Pass criteria:** Count all interactive elements in the project: buttons, links, icon buttons, form controls, toggle switches, checkboxes. For each, estimate the rendered tap target size based on declared dimensions, padding, and min-height/min-width. All interactive elements must meet the minimum 44x44px touch target size (WCAG 2.5.5 AAA / 2.5.8 AA). Report: "X of Y interactive elements meet the 44x44px minimum." No more than 0 interactive elements may be smaller than 44x44px without padding compensation.
- **Fail criteria:** At least 1 interactive element — particularly icon-only buttons, close buttons, or small text links — is smaller than 44x44px with no padding compensation.
- **Skip (N/A) when:** Never.
- **Detail on fail:** `"Close button in modal uses a 16px icon with no padding — actual tap target is approximately 16x16px, below 44x44px minimum — 1 of 15 interactive elements fails"`.
- **Cross-reference:** Touch target sizing is also an accessibility concern — see the Accessibility Fundamentals Audit for WCAG 2.5.5 / 2.5.8 guidance.
- **Remediation:** Add padding to small interactive elements:

  ```css
  .icon-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  nav a { padding: 0.75rem 1rem; display: block; }
  ```

  In Tailwind:

  ```html
  <button class="w-11 h-11 flex items-center justify-center rounded-md">
    <XIcon class="w-5 h-5" />
  </button>
  ```

---

## External references

- wcag 2.5.8
- wcag 2.5.5

Taxons: accessibility, user-experience

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