Interactive elements meet minimum touch target size (44x44px)

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.

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

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

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

• ID: mobile-responsiveness.touch.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:

  .icon-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  nav a { padding: 0.75rem 1rem; display: block; }
  

  In Tailwind:

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