diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 4a5ff2cc3f..c18e1f1542 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -20,7 +20,7 @@

In brief

Intent of this Success Criterion

-

The intent of this Success Criterion is to support people with low vision who need to enlarge text and read it in a single column. When the browser zoom is used to scale content to 400%, it reflows - i.e., it is presented in one column so that scrolling in more than one direction is not necessary.

+

It is important to avoid the need for users to scroll in the direction of reading in order to reveal lines that are cut off by the viewport. Such scrolling significantly increases the effort required to read. It is also important that the act of resizing content (zooming) does not cause some content to be hidden off-screen. For example, zooming into a vertically scrolling page should not cause content to be hidden to one side due to the page horizontal scrolling.

For people with low vision, both enlarging and reflowing text are critical to reading. Enlarging text enables the perception of characters. Reflowing text enables users to track from the end of one line to the beginning of the next line.

Avoiding the need to scroll in the direction of reading in order to reveal lines that are cut off by the viewport is important, because such scrolling significantly increases the effort required to read. It is also important that content is not hidden off-screen. For example, zooming into a vertically scrolling page should not cause content to be hidden to one side.

@@ -58,6 +58,13 @@

Responsive web design and other ways to meet this Success Criterion

Avoiding scrolling in horizontally and vertically written languages

The success Criterion applies to both horizontally and vertically written languages. Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling.

+ +
+

Horizontally and vertically scrolling content

+

Where a vertically scrolling page has sections of content which scroll horizontally (or the other way around), those sections would need to meet either the width/height bullet or the exception to pass this criterion.

+

For example, in a vertically scrolling page, a horizontally scrolling section could be up to 256px tall, or meet the exception “require two-dimensional layout for usage or meaning”. In a horizontally scrolling page a vertically scrolling section could be up to 320px wide, or meet the exception.

+

Where part of the page meets the exception, or has scrolling within the size limit, it does not mean the rest of the content of page can also have scrolling. For example, a data table should use a wrapper element with horizontal scrolling, the rest of the page should not also scroll in 2 directions.

+

The relation of Reflow to the Success Criterion 1.4.4 Resize Text

The focus of the Reflow Success Criterion is to enable users to zoom in without having to scroll in two directions. Success Criterion 1.4.4 Resize Text also applies, so it should be possible to increase the size of all text to at least 200% while simultaneously meeting the reflow requirement. For most implementations, the text is expected to continue to enlarge as the magnification increases, so that users can magnify text up to (and beyond) 400%. In an implementation where text does not consistently increase its size as people zoom in (such as when it is transformed based on a media query to adapt to small-screen usage), it must still be possible to get to 200% enlargement in order to satisfy the Resize Text criterion.