No reflow at 320 CSS pixels

css-overflow-hidden

WCAG success criterion: 1.4.10 (level AA)
Outcome class: Automatic. An automated check that can report a confirmed violation.
Area: Accessibility, Visual Presentation
Default severity: high
axe-core rule: css-overflow-hidden

Why we flag this

Users zooming to 400% must scroll in two directions — content becomes inaccessible.

Fixed widths or overflow:hidden prevent responsive reflow.

What the rule checks

Scope. The page at a 320 x 256 CSS px viewport (run once after the mobile pass), except content that needs two-dimensional layout: data tables, images, maps, diagrams, video, application areas.

Expectation. Fails when the document needs horizontal scrolling at 320 CSS px (scroll width more than 5 px beyond the viewport) because of content that should reflow; the finding names the widest such element. Exactly 320 px wide content passes. A fixed width that only applies above 400 px does not apply at 320 px. A width capped by script after load passes. Overflow caused only by a data table, image or other 2D content is excepted by the criterion and passes; a layout table (role=presentation/none) is not excepted. Overflowing text without a wider element box (an unbroken string) still fails. A page whose only wide content is such 2D content (visual_no_text: one image) has nothing the criterion applies to.

Source. WCAG 2.2 SC 1.4.10 Reflow (320 CSS px width; exception for content requiring two-dimensional layout)

Detection: pipeline; needs geometry, interaction.

Failing example

The check reports a violation here. Corpus case visual_reflow_fixed_width, element div#promo. The page may contain further findings for other rules.

visual_reflow_fixed_width.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Promotion box with a fixed width</title>
<style>
  body { color: #111111; background: #ffffff; }
  #promo { width: 600px; border: 1px solid #111111; padding: 8px; }
</style>
</head>
<body>
<header>
  <a href="#main" style="display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; padding: 0 8px">Skip to main content</a>
  <p>Shop</p>
  <nav aria-label="Main"><a href="#main" aria-current="page" style="display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; padding: 0 8px">Overview</a></nav>
</header>
<main id="main">
  <h1>Autumn offers</h1>
  <div id="promo"><p>All garden furniture is twenty percent off until Sunday.</p></div>
</main>
<footer><p>Footer text</p></footer>
</body>
</html>

Passing example

The check passes here and reports nothing. Corpus case visual_reflow_ok. The page may contain further findings for other rules.

visual_reflow_ok.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive page with a wide data table</title>
<style>
  body { margin: 0; color: #111111; background: #ffffff; }
  main, header, footer { padding: 0; }
  /* Threshold: exactly the 320px viewport. */
  #exact { width: 320px; box-sizing: border-box; border: 1px solid #111111; }
  /* Responsive: only wide screens get the fixed width. */
  @media (min-width: 400px) { #wide-desktop { width: 900px; } }
  /* Dynamic: capped by a script after load. */
  #capped-late { width: 600px; }
  #prices { width: 700px; border-collapse: collapse; }
</style>
</head>
<body>
<header>
  <a href="#main" style="display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; padding: 0 8px">Skip to main content</a>
  <p>Shop</p>
  <nav aria-label="Main"><a href="#main" aria-current="page" style="display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; padding: 0 8px">Overview</a></nav>
</header>
<main id="main">
  <h1>Price list</h1>
  <div id="exact"><p>Prices valid from October.</p></div>
  <div id="wide-desktop"><p>Compare all models below.</p></div>
  <div id="capped-late"><p>Delivery within five working days.</p></div>
  <!-- A data table needs two-dimensional layout: 1.4.10 excepts it. -->
  <table id="prices">
    <caption>Prices per model and size</caption>
    <tr><th scope="col">Model</th><th scope="col">Small</th><th scope="col">Medium</th><th scope="col">Large</th><th scope="col">Extra large</th></tr>
    <tr><th scope="row">Larch</th><td>120 euros</td><td>150 euros</td><td>180 euros</td><td>210 euros</td></tr>
  </table>
</main>
<footer><p>Footer text</p></footer>
<script>
  window.addEventListener('load', function () {
    document.getElementById('capped-late').style.maxWidth = '100%';
  });
</script>
</body>
</html>

This page is generated from the rule catalogue and the rule contracts; see therule overview for how the outcome classes are derived.