Meeting SC 1.4.10 Reflow With Wide Data Tables

SC 1.4.10 Reflow (Level AA) requires that content can be presented without scrolling in two dimensions at a width equivalent to 320 CSS pixels — which is what a 1280-pixel window looks like at 400% zoom. It then carves out an exception for “parts of the content which require two-dimensional layout for usage or meaning”, naming data tables specifically. Teams misread this in both directions: some treat any page with a table as exempt, others reflow every table into cards and destroy the comparisons the table exists for.

This page sets out precisely what the exception covers, what it does not, and how to test the rest of the page. It belongs to responsive data tables.

Spec reference

The normative text: 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, except for parts of the content which require two-dimensional layout for usage or meaning. The understanding document lists data tables, maps, diagrams, video, games and toolbars among the examples.

Three details matter in practice:

  • The exception is for the part, not the page. The table may scroll horizontally; the page heading, the filter panel, the pagination and the explanatory text around it may not.
  • Scrolling must stay within the part. A wide table that pushes the whole page wider — so the body scrolls horizontally — has let the exception leak into content that is not exempt.
  • “Without loss of information or functionality” applies to everything. Controls cropped off-screen, overlapping text, or a toolbar whose buttons disappear at 320 px are failures regardless of the table.

Related: SC 1.4.4 Resize Text (200%, text only), SC 1.4.12 Text Spacing, and SC 2.1.1 Keyboard for the scroll container.

What must reflow and what may scroll Layers of a data page at 320 CSS pixels wide: page chrome and headings, filters and toolbar, the table in its own scroll container, and pagination below — marking which must reflow. What must reflow and what may scrollHeader, heading, intro textmust reflow — wraps to the viewport, no horizontal scrollFilters and toolbarmust reflow — controls wrap or collapse into a menuThe data tablemay scroll in two dimensions — inside its own focusable containerPagination and summarymust reflow — wraps below the table
Only the table layer is exempt; every layer around it must fit 320 px wide.

When the exception applies — and when not

It applies when the table’s meaning depends on reading across rows and down columns: a statement where each row is a transaction and each column a field; a comparison of plans; a metrics grid by period. Reflowing those into one column destroys the relationships.

It does not apply to layout that merely uses a table, to a list of records that reads just as well as stacked cards, or to anything outside the table. A two-column form in a <table> is not exempt. A record list where users read one row at a time can reflow, and often should — see stacked card layouts that keep table semantics.

The misapplication to name is setting min-width: 1200px on the page’s main wrapper “so the table fits”. That makes the whole page scroll horizontally at 400% zoom — every paragraph, every control — and fails the criterion outright.

Annotated code example

/* 1. The page reflows: nothing forces a minimum width */
main { max-inline-size: 100%; }

/* 2. The table's width stays inside its own container (SC 1.4.10 exception) */
.table-scroll { overflow-x: auto; max-inline-size: 100%; }
.table-scroll table { min-inline-size: 48rem; }   /* the table may be wide… */
                                                  /* …the page may not */

/* 3. Controls around the table wrap instead of overflowing */
.table-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.table-toolbar > * { min-inline-size: 0; }

/* 4. Long unbreakable values do not push the container wider than the viewport */
.table-scroll td { overflow-wrap: anywhere; }
<!-- SC 2.1.1: the exempted scrolling is still keyboard-operable -->
<div class="table-scroll" role="region" aria-labelledby="stmt-cap" tabindex="0">
  <table>
    <caption id="stmt-cap">Account statement, March 2026</caption>
    <!-- … -->
  </table>
</div>

A useful sanity test while developing: in DevTools, set the responsive viewport to 320 × 256 CSS pixels (the 400% equivalent of 1280 × 1024) and check document.documentElement.scrollWidth <= 320. If the document is wider than the viewport, something outside the exempt container is overflowing.

// Quick check in the console or a Playwright test
const docWide = document.documentElement.scrollWidth > window.innerWidth;
console.assert(!docWide, 'Page scrolls horizontally outside the exempt table');

Keyboard & AT behaviour

Condition at 320 px Expected Failure indicator
Page scroll Vertical only Horizontal scrollbar on body
Table scroll Horizontal within its container, keyboard reachable Container not focusable; columns unreachable
Toolbar Wraps or collapses into a menu Buttons clipped off the right edge
Pagination Wraps below the table Page links overlap each other
Screen magnifier users Can follow a row across with the scroll container Must scroll the whole page sideways per line of text
Is this table exempt from reflow? Decision tree for whether a table may scroll horizontally under SC 1.4.10, based on whether its meaning needs rows and columns together. Is this table exempt from reflow?Does understanding the table require reading acrossrows and down columns?YesExemptscroll inside a focusable containerNo, record listNot exemptreflow to cards or fewer columnsLayout onlyNot exemptit should not be a table at all
Exempt means "may scroll inside its own container" — never "the page may scroll".

Integration context

Auditors test Reflow by zooming, not by resizing, because zoom also scales fixed-size elements such as sticky headers. The procedure is in zoom and reflow testing at 400 percent. Sticky parts that consume most of a zoomed viewport are a common secondary finding; see sticky headers and first columns.

Offering users a way to reduce width themselves — a column chooser — is not required by the criterion, but it turns a table that must be scrolled into one that often need not be; see column visibility menus and column choosers.

Common 320 px findings on data pages Matrix of frequent reflow findings on pages with data tables, whether each is covered by the table exception, and the fix. Common 320 px findings on data pagesFindingExempt?FixTable scrolls inside itscontainerYesMake the container focusableBody scrolls horizontallyNoRemove page min-widthToolbar buttons clippedNoflex-wrap or overflow menuLong IDs push containerwiderNooverflow-wrap: anywhere
Most reflow failures on data pages are not in the table at all.

Gotchas

Charts beside tables. A chart with fixed pixel width is also a two-dimensional part, but its labels and legend are text that should wrap. Scale the chart with its container.

Modal dialogs containing tables. A dialog with a fixed width wider than 320 px forces two-dimensional scrolling of everything inside it, including the dialog’s buttons. The dialog must reflow; only the table inside it may scroll.

white-space: nowrap on cells. Useful for numbers, harmful for descriptive text columns. Apply it per column, not per table.

Testing checklist

FAQ

Are data tables exempt from SC 1.4.10 Reflow?

The table itself may require two-dimensional scrolling, because its meaning depends on rows and columns. Everything around it — headings, text, filters, toolbars, pagination — must still reflow to 320 CSS pixels without horizontal scrolling.

How do I contain a wide table so it does not break reflow?

Put it in its own container with overflow-x auto and a max width of 100 percent, make that container focusable and named, and make sure no wrapper around it sets a minimum width wider than the viewport.

Does converting a table to cards satisfy Reflow?

It removes the need for the exception, but only use cards for tables that read one record at a time. Converting a comparison table to cards satisfies the letter of the criterion while making the data harder to use.

What viewport should I test reflow at?

320 by 256 CSS pixels, which corresponds to a 1280 by 1024 window at 400 percent zoom. Test by zooming the browser, because zoom also scales fixed elements such as sticky headers.

← Back to Responsive Data Tables