Skip to main content

Content reflows at 200% zoom without horizontal scrolling

ab-000112 · accessibility-wcag.operable.zoom-reflow
Severity: mediumactive

Why it matters

Users with low vision frequently zoom to 200% or more using browser zoom. Fixed-width layouts that do not reflow at this zoom level produce horizontal scroll, force users to pan back and forth to read lines, and can overlap or truncate content. WCAG 2.2 SC 1.4.10 (Reflow) is a Level AA requirement: content must reflow to a single column at 320 CSS pixels equivalent (the width at 400% zoom on a 1280px screen) without loss of content or functionality.

Severity rationale

Medium because fixed-width layouts that break at 200% zoom create unusable horizontal scroll for low-vision users, violating WCAG 2.2 SC 1.4.10 at Level AA — a significant but partial exclusion.

Remediation

Replace all fixed pixel widths with fluid units and use responsive breakpoints so content stacks into a single column at narrow widths.

/* Remove fixed widths from layout containers */
.container {
  /* Before */
  /* width: 1200px; */

  /* After */
  width: 100%;
  max-width: 80rem;
  padding-inline: 1rem;
}

/* Stack multi-column layouts at narrow widths */
@media (max-width: 640px) {
  .two-col {
    display: block; /* or flex-direction: column */
  }
}

Test by zooming to 200% in Chrome (Cmd/Ctrl + ) and scrolling horizontally. No horizontal scroll should appear. Avoid overflow-x: hidden on body as a mask — fix the underlying layout instead.

Detection

  • ID: accessibility-wcag.operable.zoom-reflow

  • Severity: medium

  • What to look for: Enumerate every relevant item. Open the application in a browser and zoom to 200% (Ctrl++ or Cmd++). Check that content reflows to a single column and remains readable without horizontal scrolling.

  • Pass criteria: Content reflows to a single column at 200% zoom. No horizontal scrolling required. Text remains readable.

  • Fail criteria: Content requires horizontal scrolling at 200% zoom, or text overlaps and becomes unreadable.

  • Skip (N/A) when: Never — reflowability applies to all responsive designs.

  • Detail on fail: Example: "At 200% zoom, layout still displays side-by-side columns that overflow horizontally. Sidebar and main content do not reflow to single column"

  • Remediation: Use responsive design and avoid fixed widths:

    /* Bad */
.container { width: 1200px; }

/* Good */
.container { max-width: 100%; }

/* Responsive breakpoints */
@media (max-width: 768px) {
  .two-column { display: block; } /* Stack vertically */
}

External references

Taxons

accessibility

History