Skip to main content

WCAG 1.4.10 — Reflow: Content Requires Horizontal Scrolling at 320px

seriousWCAG 1.4.10 · Level AAcms scope

Your website forces people to scroll left and right to read content when viewed on phones or when zoomed in to 400%. This makes your site unusable for people with low vision who need to magnify text. Under the ADA Title II rule, all content must fit within the screen width.

Who Is Affected

Users with low vision who zoom content to 400% magnification, mobile device users with small screens, users with motor disabilities who have difficulty with horizontal scrolling, and anyone accessing your site on narrow viewports.

What This Means

When someone zooms your page to 400% or views it on a 320-pixel-wide screen (equivalent to an iPhone in portrait mode), all content should reflow to fit within that width without requiring horizontal scrolling. This means text wraps to new lines, navigation menus collapse or stack vertically, and images resize appropriately.

The requirement applies to all content except for images, maps, diagrams, video, games, presentations, data tables, and interfaces where a toolbar is essential for functionality.

Fix: CMS / Theme

Most reflow issues stem from fixed-width layouts, oversized images, or CSS that doesn't respond properly to narrow viewports.

Responsive Framework Check

  1. In Joomla, ensure your template uses a responsive framework like Bootstrap. Go to Extensions → Templates → Your Template and verify responsive CSS is enabled.
  2. In WordPress, check that your theme is mobile-responsive. Go to Appearance → Themes and confirm your active theme lists "responsive" as a feature.

CSS Fixes

  1. Remove fixed widths from your main content containers:

    /* Replace this */
.main-content { width: 1200px; }

/* With this */
.main-content { max-width: 1200px; width: 100%; }

  2. Ensure images are responsive:

    img { max-width: 100%; height: auto; }

  3. Use flexible units instead of fixed pixels:

    /* Replace px with % or em/rem */
.sidebar { width: 25%; }

Testing Your Fix

  1. Open your site in Chrome DevTools (F12).
  2. Click the device simulation icon (phone/tablet icon).
  3. Set width to 320px and height to 568px.
  4. Navigate through your site — no horizontal scrollbar should appear.
  5. Test with browser zoom at 400% (Ctrl/Cmd + plus sign four times).

Fix: Content Editor

If the issue appears on specific pages:

  1. Check for oversized images:

    • Edit the page in your CMS
    • Look for images wider than 300px
    • Replace with smaller versions or ensure responsive image settings are enabled

  2. Remove fixed-width tables:

    • Convert wide data tables to a responsive format
    • Consider using a "scroll within table" approach for essential tabular data

  3. Check embedded content:

    • Ensure videos use responsive embed codes
    • Verify maps and other iframes have responsive wrappers

Standard Reference

WCAG 2.1 Success Criterion 1.4.10 — Reflow, Level AA

Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for: vertical scrolling content at a width equivalent to 320 CSS pixels; horizontal scrolling content at a height equivalent to 256 CSS pixels.

Except for parts of the content which require two-dimensional layout for usage or meaning.

Helpful Tools

Check if your government website has this issue

OctoComply scans your website and documents for WCAG 2.1 AA violations. The free tier covers up to 10 pages.

Run a Free Scan