Reflow
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 and for horizontal scrolling content at a height equivalent to 256 CSS pixels. Exceptions apply for content requiring two-dimensional layout.
What it means
The intent of this success criterion is to let users enlarge text and other related content without having to scroll in two dimensions to read. When lines of text extend beyond the edge of a viewport , users will be forced to scroll back-and-forth to read line by line. This can cause them to lose their place and can significantly increase both physical and cognitive effort. Therefore, most sections of content are expected to reflow within the appropriate sizing requirement defined by this success criterion. A section of content that requires two-dimensional layout for understanding or functionality, such as a table or map, has an exception to this success criterion. However, sections of content within the two-dimensional layout, such as each cell within a table, would still need to meet this success criterion. Although there is an exception for sections of content that require two-dimensional layout for understanding or functionality, authors can improve the user's experience by making efforts to reduce scrolling for that type of content.
Failing example
/* Fails: fixed-width table forces horizontal scroll */
table { width: 1200px; }How to fix it
/* Pass: responsive table with horizontal scroll
contained within the component, not the viewport */
.table-wrapper { overflow-x: auto; max-width: 100%; }
table { min-width: 600px; width: 100%; }How A11yRisk detects this
A11yRisk detects this criterion automatically.
Scan your site for this violation →