Text can be resized to 200% without loss of content or functionality; relative units used

Users with low vision rely on browser zoom and operating system text scaling to increase font size to a readable level. When layout uses absolute pixel units, fixed container widths, or overflow hidden on text containers, zooming to 200% causes content to overflow off-screen, overlap other elements, or disappear entirely. WCAG 2.2 SC 1.4.4 (Level AA) requires text to be resizable to 200% without loss of content or functionality, and SC 1.4.10 (Level AA) requires content to reflow without horizontal scrolling at 320 CSS pixel width. Section 508 2018 Refresh 502.3.3 incorporates SC 1.4.4. Failing this check excludes the millions of users with low vision who use browser zoom rather than a screen reader.

Switch font sizes and spacing from px to rem (root-relative) units in src/app/globals.css. Use responsive layouts that reflow rather than overflow:

/* Base */
html { font-size: 16px; } /* 1rem = 16px */
body { font-size: 1rem; line-height: 1.5; }

/* Headings scale with root */
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }

/* Avoid fixed widths on text containers */
.card { width: 100%; max-width: 640px; } /* Not: width: 640px; */

/* Allow inputs to grow */
input, textarea { width: 100%; max-width: 480px; }

Test by opening the app in a browser and pressing Ctrl/Cmd + + five times to reach 200% zoom. Verify no content is clipped, no text overlaps, and the page remains scrollable without horizontal scroll.

• ID: gov-section-508.forms-interactive.text-resize
• Severity: low
• What to look for: Count all relevant instances and enumerate each. Check CSS for font sizing. Look for absolute units like px (pixels) without fallback support for user zoom. Test resizing (browser zoom to 200%) to see whether content becomes inaccessible, overlaps, or overflows without scrolling. Check for hardcoded fixed widths that may cause text to be cut off when resized.
• Pass criteria: Text can be resized to 200% using browser zoom or user preferences. All content remains visible and functional. No text is clipped or hidden.
• Fail criteria: Text resized to 200% causes content to overflow, overlap, or become inaccessible. Layout breaks significantly.
• Skip (N/A) when: Never — text resizing affects all users, especially those with low vision.
• Detail on fail: Example: "When browser zoom is set to 200%, the navigation bar text overlaps. Form labels are cut off because the input container has a fixed width of 300px. Long headings become unreadable due to text wrapping in narrow columns."
• Remediation: Use relative units (em, rem) and flexible layouts:

  body { font-size: 16px; } /* Base size */
  h1 { font-size: 2rem; } /* Scales with base size */
  button { padding: 0.75rem 1rem; }
  
  /* Avoid fixed widths */
  .container { width: 100%; max-width: 1200px; }
  input { width: 100%; max-width: 400px; }