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.

• ID: accessibility-basics.visual-color.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:

  button {
    min-width: 44px;
    min-height: 44px;
    padding: 10px 16px;
  }
  
  /* Spacing between buttons */
  button + button {
    margin-left: 8px;
  }