Touch targets are adequate size for mobile accessibility

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.

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.

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