two-dimensional-scrolling

Many people with low vision zoom the page to make text larger. As the text grows, content should reflow into a single column, so users can read it by scrolling in one direction only. When content keeps a fixed width, users must scroll horizontally to read each line, and then vertically to reach the next one. Moving back and forth in two directions makes it hard to keep track of your place, and it slows reading down. This usually happens when elements have fixed widths, minimum widths, or layout constraints that stop them from reflowing. It can happen on the page itself, or inside a container that scrolls on its own:

• A container that must be scrolled both horizontally and vertically.
• A horizontally scrolling container inside a vertically scrolling page.
• A vertically scrolling container inside a horizontally scrolling area.

Use flexible layouts, relative units, and max-width instead of fixed widths, so content fits within 320 CSS pixels. At a desktop window width of 1280 pixels, this equals zooming to 400%.

Pass Patterns

Content that reflows to the viewport width

The cards wrap onto new lines as the viewport gets narrower, so they always fit the available width.

<style>
  .cards { display: flex; flex-wrap: wrap; gap: 1rem; }
  .card { flex: 1 1 15rem; max-width: 100%; }
</style>


<div class="cards">
  <article class="card">Spring collection</article>
  <article class="card">Summer collection</article>
  <article class="card">Autumn collection</article>
</div>

Long strings that wrap

A long URL is allowed to break onto a new line, so it doesn't push the page wider than the viewport.

<p style="overflow-wrap: anywhere;">
  Download the report: https://example.com/reports/2026/annual-accessibility-report-final.pdf
</p>

A data table that scrolls horizontally on its own

A data table needs its rows and columns to keep their meaning, so it is exempt. Only the table scrolls horizontally, while the rest of the page reflows. The scrollable region has a name and can receive keyboard focus.

<div role="region" aria-labelledby="sales-caption" tabindex="0" style="overflow-x: auto;">
  <table>
    <caption id="sales-caption">Quarterly sales by region</caption>
    <!-- table rows -->
  </table>
</div>

Fail Patterns

Text in a container that scrolls in both directions

The panel has a fixed height and contains a paragraph wider than the viewport, so users must scroll it both horizontally and vertically to read the text.

<div style="height: 20rem; overflow: auto;">
  <p style="width: 60rem;">
    Terms and conditions text that continues for many lines...
  </p>
</div>

Horizontally scrolling text inside a vertically scrolling page

The section keeps a minimum width of 960 pixels. At 320 pixels, users must scroll horizontally to read each line, while they scroll the page vertically.

<section style="overflow-x: auto;">
  <div style="min-width: 960px;">
    <p>Product description text that does not wrap to the viewport width...</p>
  </div>
</section>

Vertically scrolling text inside a horizontally scrolling area

The stories sit in a row that scrolls horizontally, and each story scrolls vertically on its own. Users must scroll in one direction to reach a story, and in the other to read it.

<div style="display: flex; overflow-x: auto;">
  <article style="flex: 0 0 25rem; height: 15rem; overflow-y: auto;">
    News story text...
  </article>
  <article style="flex: 0 0 25rem; height: 15rem; overflow-y: auto;">
    News story text...
  </article>
</div>

WCAG techniques

Sufficient techniques

• C32: Using media queries and grid CSS to reflow columns
• C31: Using CSS Flexbox to reflow content
• C33: Allowing for Reflow with Long URLs and Strings of Text
• C38: Using CSS width, max-width and flexbox to fit labels and inputs
• SCR34: Calculating size and position in a way that scales with text size
• G206: Providing options within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text
• G224: Accounting for meaningful text indentation and Reflow
• G225: Section panels that scroll horizontally are designed to fit within a width of 320 CSS pixels on a vertically scrolling page

Advisory techniques

• C34: Using media queries to un-fixing sticky headers / footers
• C37: Using CSS max-width and height to fit images

Failure techniques

• F102: Failure of Success Criterion 1.4.10 due to content disappearing and not being available when content has reflowed

ACT Rules

• Meta viewport allows for zoom

Try It Yourself

Using browser zoom

1. Set the browser window to 1280 pixels wide.
2. Zoom the page to 400%.
3. Read through the page, including panels, cards, and other areas that scroll on their own.

Expected results: You can read all the content by scrolling vertically only. Only content that needs a two-dimensional layout, such as a data table or a map, scrolls horizontally.

Actual results: To read some of the content, you must scroll both horizontally and vertically, on the page or inside a container.

Inspecting the browser dev-tools

1. Open your browser's responsive design mode, and set the viewport width to 320 pixels.
2. Check whether the page, or any container on it, shows a horizontal scrollbar.
3. Inspect the elements that overflow, and look for fixed width or min-width values larger than 320 pixels.

Expected results: Content fits within the 320-pixel viewport, and no text container needs scrolling in two directions.

Actual results: Fixed widths or minimum widths make text overflow the viewport or its container, so users must scroll in two directions to read it.

FAQ

Standards and Regulations

Personas impacted by this issue

• Low Vision
• Cognitive
• Attention and Focus

Learn More

• Understanding SC 1.4.10 Reflow

Related Issues

• meta-viewport
• meta-viewport-large
• scrollable-region-focusable
• avoid-inline-spacing