# Touch targets are adequate size for mobile accessibility

- **Pattern:** `ab-000068` (`accessibility-basics.visual-color.touch-target-size`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-000068
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-000068)

## Why it matters

Buttons and links smaller than 44x44 CSS pixels create a precision targeting problem for users with motor impairments, tremors, or large fingers on touch devices. WCAG 2.2 SC 2.5.8 (Target Size, Minimum) — new in WCAG 2.2 — requires a minimum target size of 24x24 CSS pixels with no adjacent targets within 24px, or a 44x44 minimum with no spacing requirement. SC 2.5.5 (Target Size, Enhanced) sets the AAA target at 44x44. Section 508 2018 Refresh 407.8 mandates operable part size. The most common failures: icon buttons (often 20x20 or 24x24 pixels), inline text links with short visible text, and toolbar controls packed without spacing. On touch-screen devices, close misses on a 20px button frequently activate adjacent controls instead.

## Severity rationale

Low because undersized touch targets impair usability for motor-impaired and touch-screen users without blocking access, and the fix requires only CSS changes.

## Remediation

Set a minimum size on all interactive elements using CSS. Use padding rather than fixed dimensions to allow the hit area to expand with content.

```css
/* globals.css or button component */
button,
a,
[role="button"] {
  min-width: 44px;
  min-height: 44px;
  /* Use padding to expand hit area without changing visible size */
  padding: 10px 12px;
}

/* Small icon button: expand hit area via padding, keep icon visually small */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
}

.icon-btn svg {
  width: 20px;
  height: 20px;
}

/* Space between adjacent controls */
.toolbar {
  display: flex;
  gap: 8px; /* Minimum 24px between targets per SC 2.5.8 */
}
```

For inline text links in body copy, WCAG 2.5.8 provides an exception when the link is inline within a sentence — but navigation links and standalone CTAs do not qualify for the exception. Audit buttons in `src/components/ui/button.tsx` and icon buttons across the component library.

## Detection

- **ID:** `touch-target-size`
- **Severity:** `low`
- **What to look for:** Enumerate every relevant item. Examine all interactive elements (buttons, links, form inputs) on mobile/touch-friendly layouts. Check that they are at least 44x44 CSS pixels. Check spacing between buttons to prevent accidental activation.
- **Pass criteria:** All interactive elements are at least 44x44 CSS pixels. Adequate spacing exists between interactive controls.
- **Fail criteria:** Interactive elements are smaller than 44x44, or are too close together (less than 8px spacing).
- **Skip (N/A) when:** The application is desktop-only with no mobile/touch interface.
- **Detail on fail:** Identify small touch targets. Example: `"Close button is 24x24 pixels. Icon buttons in toolbar are 28x28, below 44px minimum. Buttons have only 4px spacing between them."`
- **Remediation:** Ensure adequate touch target sizes:

  ```css
  button {
    min-width: 44px;
    min-height: 44px;
    padding: 10px 16px;
  }

  /* Spacing between buttons */
  button + button {
    margin-left: 8px;
  }
  ```

## External references

- wcag 2.5.8
- wcag 2.5.5
- section-508 407.8

Taxons: accessibility

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