Under WCAG 2.2, how do SC 1.4.4 Resize Text and SC 1.4.10 Reflow differ, and what does each require of a design system's layouts?
answer
- one is about size, one about width
- 200 percent without loss
- a narrow width, no sideways scrolling
- 1280 wide at 400 percent zoom
- tables and maps are excepted
basics
~20 s1.4.4 Resize Text (AA): text can be enlarged to 200 percent without assistive technology and without loss. 1.4.10 Reflow (AA): content works at a width equivalent to 320 pixels without two-dimensional scrolling, except content that needs two-dimensional layout.
solid answer
~40 s**1.4.4 Resize Text** (Level AA) says that, except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. **1.4.10 Reflow** (Level AA) says content can be presented without loss and without scrolling in two dimensions at a width equivalent to 320 pixels for vertically scrolling content, or a height of 256 for horizontally scrolling content; 320 wide is a 1280-wide window at 400 percent zoom. Parts that need two-dimensional layout for meaning, such as maps, diagrams, video and data tables, are excepted, but the text around them is not. For a design system, 1.4.4 means text styles and containers grow without clipping; 1.4.10 means every component and template has a narrow, single-direction arrangement, with two-dimensional content in its own scroll area.
go deeper
Recall the numbers and levels: 1.4.4 is 200 percent text without loss, 1.4.10 is a 320-wide viewport without two-dimensional scrolling, and both are Level AA.
Explain what each criterion stresses, what the Reflow exception covers section by section, and why 320 wide equals a 1280-wide window at 400 percent zoom.
Show how you would turn both criteria into component and template rules, such as a narrow arrangement per component, scroll containers for tables and unpinned bars at narrow widths.
Weigh complex two-dimensional interfaces against Reflow, and decide how the system documents excepted patterns so teams do not claim the exception for whole pages.
## Two criteria, two failure modes Both criteria serve people with low vision who enlarge content to read it, and both are **Level AA** in WCAG 2.2, so they sit inside the usual conformance target. They test different things: | | 1.4.4 Resize Text | 1.4.10 Reflow | |---|---|---| | What changes | The size of the text | The width (or height) available to the content | | Threshold | Up to 200 percent | A width equivalent to 320 pixels for vertically scrolling content; a height equivalent to 256 for horizontally scrolling content | | What must hold | No loss of content or functionality | No loss, and no scrolling in two dimensions to read | | Excepted | Captions and images of text | Parts that need two-dimensional layout for usage or meaning | | Typical failure | Clipped, overlapping or hidden text | Readers scroll sideways to read each line | ## 1.4.4 Resize Text The criterion asks that text can be resized **without assistive technology** up to 200 percent without losing content or functionality. The enlargement can come from the platform's features; the Understanding document for Reflow adds that it should be possible to get 200 percent text enlargement in some way compared with the default zoom. Captions and images of text are excepted, which is one more reason not to render headlines as images. For a design system this is mostly about **components that assume a text size**: fixed-height buttons, single-line labels that cut off, overlays pinned over images. ## 1.4.10 Reflow The criterion asks that content can be presented without loss and **without scrolling in two dimensions** at a width equivalent to 320 pixels (measured in the web's device-independent reference pixel) for content that scrolls vertically. Its note explains the number: 320 is what a 1280-wide window becomes at 400 percent zoom. For languages written vertically, which scroll horizontally, the equivalent is a height of 256 (1024 at 400 percent). The Understanding document describes the most common way to meet it for article-style pages: the layout adjusts to a **single column** that scrolls in one direction, with navigation collapsed behind a menu button. ## What is excepted, and what is not The exception is narrow and applies **section by section**: - **Excepted**: maps, diagrams and other images needed for understanding, video, games, presentations, data tables (but not the individual cells), and interfaces that must keep a toolbar in view while editing. - **Not excepted**: the heading that introduces a table, the search field and pagination that control it, and the paragraphs after it. They must still reflow. - **Carousel-like widgets** can scroll sideways as long as each panel fits within the 320-wide viewport. - The best practice is to give excepted content **its own scroll container**, so the page as a whole scrolls in one direction. ## How the two interact The Understanding document for Reflow states the overlap directly: it should be possible to enlarge all text to at least 200 percent while also meeting Reflow. Reflow itself does not demand any particular text enlargement; an author may even reduce a size at a narrow breakpoint, as long as 200 percent enlargement compared with the default is still reachable. And if zooming to 200 percent produces a viewport smaller than Reflow's reference size, two-dimensional scrolling there is not a Reflow failure. ## What a design system does about it 1. **Every component has a narrow arrangement** that works at 320 wide: horizontal groups wrap or stack, side-by-side label and value pairs stack, and nothing has a minimum width wider than the reference size. 2. **Page templates collapse to a single column**, with sidebars moved below the main content and navigation collapsed. 3. **Two-dimensional content gets a container**: data tables and wide charts scroll inside their own region, never forcing the whole page sideways. 4. **Pinned elements stop being pinned at narrow widths**, or can be toggled, as the Understanding document suggests, because at high zoom a sticky bar can eat most of the viewport. 5. **Text containers grow** instead of clipping, which serves 1.4.4 and also the text-spacing criterion. 6. **The test matrix includes both**: a 1280-wide window at 400 percent zoom for Reflow, and 200 percent text for Resize Text. Native apps are not web content, but they meet the same design pressure through the operating system's text-size setting, so the same component rules serve both platforms.
- A campaign report page has a wide data table. Does the whole page get an exception from Reflow?No. The exception applies only to the part that needs two-dimensional layout, the table itself, and not to its cells, its heading, the search field and pagination around it, or the paragraphs after it. Put the table in its own scrollable container so the rest of the page still reflows to a single column and scrolls in one direction.
- Does meeting Reflow at 400 percent zoom mean the text is automatically 400 percent larger?Not necessarily. Reflow does not require any particular text enlargement, and an author may use a smaller text size at the narrow breakpoint the zoomed window triggers. What must still be true, under 1.4.4, is that text can reach 200 percent enlargement compared with the default in some way.
- Why does 320 appear in 1.4.10 and 256 alongside it?320 wide applies to content that scrolls vertically, as most horizontal writing does; it equals a 1280-wide window at 400 percent zoom. 256 high applies to content designed to scroll horizontally, such as vertical writing; it equals a 1024-high window at 400 percent zoom.
saying these in an interview costs you the question
- 1.4.10 Reflow requires text to become 400 percent larger.
- A data table on the page exempts the whole page from Reflow.
- 1.4.4 Resize Text is Level AAA, so AA products can skip it.
- Sideways scrolling to read long lines is fine if the text is large enough.
- Resize Text and Reflow are the same requirement stated twice.