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.

• ID: gov-section-508.forms-interactive.touch-targets
• Severity: low
• What to look for: Count all relevant instances and enumerate each. Check for viewport meta tag. Inspect CSS for interactive elements (buttons, links, form inputs). Measure or estimate their minimum dimensions in CSS (width and height). Touch targets should be at least 44-48 pixels in each dimension (WCAG 2.5.5 recommends 48x48px). If smaller, check that they are spaced with at least 8px of clear space between targets.
• Pass criteria: Interactive elements on mobile/touch devices are at least 48x48 pixels, OR if smaller, they are separated by at least 8px of clear space from other interactive elements.
• Fail criteria: Touch targets are smaller than 44px without adequate spacing.
• Skip (N/A) when: The site is desktop-only with no touch-based interaction expected (rare).
• Detail on fail: Example: "Buttons throughout the app are 32x32px. Links in the footer are 20px tall with less than 4px vertical spacing between them. On mobile, users will struggle to tap individual links without accidentally tapping adjacent ones."
• Remediation: Increase button and link sizes or add spacing:

  button {
    min-width: 48px;
    min-height: 48px;
    padding: 12px 16px;
  }
  
  /* Or add spacing */
  a {
    display: block;
    padding: 8px;
    margin: 8px 0;
  }