Content is readable without pinch-to-zoom

Body text set below 16px forces mobile users to pinch-to-zoom to read paragraph content — a friction that most users will not perform, choosing instead to abandon the page. WCAG 2.2 SC 1.4.10 (Reflow) requires content to present without loss of information at 320px viewport width, and SC 1.4.4 (Resize Text) requires text to scale to 200% without loss of content. Text rendered inside <img> elements cannot reflow at all and pixelates when zoomed. Overly wide line lengths (beyond ~75ch) cause the opposite problem on tablets: long horizontal eye travel that increases reading error rates and fatigue.

Set a readable baseline in src/app/globals.css:

body {
  font-size: 1rem;      /* 16px — never go below this for body text */
  line-height: 1.6;
}

.prose {
  max-width: 65ch;      /* keeps line length readable on tablets */
  margin-inline: auto;
}

.secondary {
  font-size: 0.875rem;  /* 14px acceptable for captions and metadata only */
}

In Tailwind, text-base leading-relaxed max-w-prose on your main content wrapper covers all three rules. Replace any text content rendered as images with actual text elements — images of text fail WCAG 2.2 SC 1.4.5 and cannot reflow.

• ID: mobile-responsiveness.mobile-ux.readable-without-zoom

• Severity: low

• What to look for: Examine text sizing in main content areas. Check for very small font sizes used for body text: below 16px for paragraph text, below 12px for secondary text. Look for text rendered inside images (which pixelate without zoom). Check line lengths — excessively wide text columns on tablet widths can be hard to read.

• Pass criteria: Count all body text font-size declarations in production styles. Main body text must be at least 16px. Count all text-in-image instances (text rendered inside <img> or <svg> without text alternatives). No more than 0 content text-in-image instances may lack text alternatives. Line lengths must be controlled with max-width of no more than 75ch on text containers.

• Fail criteria: Body text is set below 16px in production styles, or at least 1 significant text content element is rendered inside images without text alternatives. The 16px threshold is used because: (1) iOS Safari auto-zooms form inputs below 16px, and (2) WCAG recommends 16px as minimum for body text on mobile. This aligns with the text-readable-mobile check threshold.

• Skip (N/A) when: Never.

• Detail on fail: "Article body text uses font-size: 14px (below 16px minimum) — body text below 16px can be difficult to read on mobile and may trigger iOS auto-zoom".

• Cross-reference: Text contrast and readability accessibility is covered in the Accessibility Fundamentals Audit. Text-in-image accessibility is covered under WCAG 1.4.5.

• Remediation:

  body { font-size: 1rem; line-height: 1.6; } /* 1rem = 16px */
  .secondary { font-size: 0.875rem; /* 14px — acceptable for secondary/caption text */ }
  
  .prose { max-width: 65ch; margin: 0 auto; }
  

  In Tailwind:

  <p class="text-base leading-relaxed max-w-prose">