Mobile viewport set; touch targets ≥ 48px or spaced appropriately per WCAG 2.5.8

Touch targets that are too small cause users with motor impairments—including tremor, limited dexterity, or large fingers—to mis-tap adjacent controls repeatedly. This affects both assistive switch users and any mobile user on a small device. WCAG 2.2 SC 2.5.8 (Level AA, new in WCAG 2.2) sets a minimum 24x24 CSS pixel target size with spacing, and SC 2.5.5 (Level AAA) recommends 44x44 pixels. Section 508 2018 Refresh 503.3.7 requires that AT-operable controls meet size requirements. Undersized touch targets are particularly damaging on government services where users may need to complete critical tasks like submitting forms or accessing benefits.

Set minimum dimensions on all interactive elements. In src/app/globals.css or your component styles:

button, [role="button"] {
  min-width: 48px;
  min-height: 48px;
  padding: 12px 16px;
}

/* For small icon-only buttons, use padding to expand the hit area */
.icon-button {
  padding: 12px;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Dense link lists — add vertical padding */
nav a, footer a {
  display: block;
  padding: 8px 0;
}

For grouped controls (radio buttons, toggle chips) where targets are close together, ensure at least 8px of clear space between adjacent targets per WCAG 2.2 SC 2.5.8.