thedaviddias/front-end-checklist/horizontal-scroll

Prevent horizontal scrolling

Low-vision users who cannot read at standard zoom levels increase browser zoom to 200–400%. At these zoom levels, a 1280px-wide page becomes effectively 320px wide. If elements overflow the viewport, users must scroll both vertically and horizontally to read content — this is exhausting and error-prone with a screen magnifier. WCAG 2.1 SC 1.4.10 (Reflow) specifically addresses this, requiring that all content is available without two-dimensional scrolling at 400% zoom.

Quick Reference

• Pages must not produce horizontal scrollbars at viewport widths of 320px and above — WCAG 2.1 SC 1.4.10 (Reflow)
• WCAG 2.1 SC 1.4.10 requires content to reflow at 400% zoom (equivalent to 320px CSS width) without horizontal scroll
• Common causes: fixed-width elements wider than the viewport, width: 100vw not accounting for scrollbar width, long unbreakable strings, white-space: nowrap
• Use max-width: 100% on images and media, overflow-wrap: break-word on text containers, and fluid layout units

Check

Test the page at a 320px CSS viewport width (equivalent to 400% browser zoom on a 1280px screen). Look for horizontal scrollbars or content overflowing outside the viewport. Specifically check: (1) elements with fixed width values in px that exceed the viewport; (2) min-width values that prevent shrinking; (3) images or media without max-width: 100%; (4) white-space: nowrap on text that causes overflow; (5) width: 100vw on elements (scrollbar width causes overflow); (6) long URLs or unbreakable strings in content areas.

Fix

(1) Replace fixed width: Npx on layout containers with max-width: Npx plus width: 100%. (2) Add max-width: 100% and height: auto to all images and media. (3) Apply overflow-wrap: break-word (with fallback word-wrap: break-word) to text containers that may contain long strings. (4) Replace width: 100vw with width: 100% on full-width elements (avoid scrollbar overflow). (5) Use CSS Grid or Flexbox with flex-wrap: wrap for multi-column layouts. (6) For data tables, wrap in a scrollable container: overflow-x: auto on the table wrapper, not the page body.

Explain

WCAG 2.1 SC 1.4.10 (Reflow, Level AA) requires that content does not require two-dimensional scrolling when displayed at a width of 320 CSS pixels or a height of 256 CSS pixels. This corresponds to 400% zoom on a 1280×1024 display. Exceptions are made for content that requires two-dimensional layout for usage (e.g., data tables, map interfaces, video). For all other content — body text, navigation, forms, images — horizontal scrolling is a barrier for screen magnification users who cannot see the full page width.

Code Review

Review stylesheets, component styles, and responsive states related to Prevent horizontal scrolling. Flag exact selectors, declarations, or breakpoints that violate the rule in the rendered UI.

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/rules/css/horizontal-scroll