Reflow
Tier 1 · The normative floor
Baseline compliance
What the normative text of WCAG 2.2 requires, and nothing more. Only a failure of this tier is a WCAG failure.
The bare minimum
Content can be presented without losing information or functionality, and without scrolling in two directions, at a width of 320 CSS pixels (for vertically scrolling content) or a height of 256 CSS pixels (for horizontally scrolling content). Parts of the content that need a two-dimensional layout for their use or meaning are exempt.
Normative text
Verbatim from WCAG 2.2, W3C Recommendation 12 December 2024. Underlined terms are defined below.
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;
- Horizontal scrolling content at a height equivalent to 256 CSS pixels.
Except for parts of the content which require two-dimensional layout for usage or meaning.
Not required by the normative text
Common claims that this criterion does not support. Don't log these as WCAG failures.
- A design that matches your mobile site. Any layout works, as long as nothing is lost and there's no two-way scrolling.
- Reflowing parts that need two-dimensional layout. W3C's informative note gives maps, diagrams, video, games, data tables and toolbars as examples.
Definitions used (2)
Glossary definitions are normative. Their notes are informative.
- CSS pixel
-
visual angle of about 0.0213 degrees
A CSS pixel is the canonical unit of measure for all lengths and measurements in CSS. This unit is density-independent, and distinct from actual hardware pixels present in a display. User agents and operating systems should ensure that a CSS pixel is set as closely as possible to the CSS Values and Units Module Level 3 reference pixel [[css3-values]], which takes into account the physical dimensions of the display and the assumed viewing distance (factors that cannot be determined by content authors).
- viewport
-
object in which the user agent presents content
Informative notes (2)
The user agent presents content through one or more viewports. Viewports include windows, frames, loudspeakers, and virtual magnifying glasses. A viewport may contain another viewport (e.g., nested frames). Interface components created by the user agent such as prompts, menus, and alerts are not viewports.
This definition is based on User Agent Accessibility Guidelines 1.0 Glossary [[UAAG10]].
Notes in the criterion Informative
WCAG 2.2 lists notes among its informative material, which "does not create requirements that impact a conformance claim." They help interpret the criterion but are not part of the floor.
320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom. For web content which is designed to scroll horizontally (e.g., with vertical text), 256 CSS pixels is equivalent to a starting viewport height of 1024 CSS pixels at 400% zoom.
Examples of content which requires two-dimensional layout are images required for understanding (such as maps and diagrams), video, games, presentations, data tables (not individual cells), and interfaces where it is necessary to keep toolbars in view while manipulating content. It is acceptable to provide two-dimensional scrolling for such parts of the content.
Tier 2 · The gap
Usability & user impact
Where content can meet this criterion and still make things harder for people with disabilities. These are not failures of SC 1.4.10, so raise them as usability defects. Known failures, including failures of related criteria, are listed in Tier 1.
A page can reflow while hiding key actions behind menus, or by covering much of the small viewport with sticky headers. People using 400% zoom then see very little content at once.
Tier 3 · The golden path
Recommended best practice
The pattern that meets the floor, closes the gap, and avoids audit disputes. A recommendation, not a requirement.
Design mobile-first, keep fixed or sticky elements small at narrow widths, and test at 1280px wide with 400% zoom.
W3C's Understanding document and techniques for SC 1.4.10 ↗ are informative: sufficient techniques show ways to pass, and documented failures show common ways to fail, but neither changes what the criterion requires.
How SC 1.4.10 maps to the WCAG 3 draft
From this site's reviewed map to the WCAG 3 editor's draft. It's an interpretation: W3C has not published a mapping.
Successor provisions
From WCAG 2.2, section 5.1: “The main content of WCAG 2.2 is normative and defines requirements that impact conformance claims. Introductory material, appendices, sections marked as "non-normative", diagrams, examples, and notes are informative (non-normative). Non-normative material provides advisory information to help interpret the guidelines but does not create requirements that impact a conformance claim.”