w3c · detlevhfischer · Apr 12, 2018 · Apr 24, 2018 · Apr 24, 2018 · Apr 24, 2018
diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html
@@ -14,61 +14,72 @@
 <body>
     <h1>Understanding Reflow</h1>
     <section id="intent">
-        <h2>Intent</h2>
-        <p>The intent of this Success Criterion is to help people with low vision by allowing the browser zoom function to increase the size of most content to 400% without requiring scrolling in more than one direction.</p> 
-        <p>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. The impact of horizontal scrolling can <a href="http://nosetothepage.org/Fitz/2dScroll.html">increase the effort required to read by 40-100 times</a>, so avoiding scrolling should be the aim whenever feasible. It is also important that content is not hidden off-screen, for example zooming on a vertically scrolling page should not cause content to be hidden to one side.</p>
-        <p>Zoom functionality in browsers allows users to increase the size of all content. When appropriately authored, the content can reflow (wrap) to stay within the windows boundaries (viewport). Spatial relationships can vary, but all information and functionality should continue to be available.</p>
-        <p>The value of &quot;320 CSS pixels&quot; was chosen as a reasonable minimum size that authors can acheive as it lines up with small displays on mobile devices. A browser on a desktop or laptop at 1280px wide and then zoomed in to 400% means the view is then &quot;equivelent to&quot; 320px wide. Many sites currently cater to that range of sizes, and that number will only increase as more sites update to be small-screen friendly.</p>
-      <p>Certain content cannot be reflowed without losing meaning so there is an exception for that type of content. For example, graphics and video are by their nature two dimensional. Cutting up an image and stacking the blocks would render the content unusable so that is out of scope.</p>
-<p>Complex data tables have a two-dimensional relationship between the headings and data cells. As that relationship is essential to convey the content, this success criteria does not apply to data tables. Lastly, interfaces which provide toolbars to edit content need to show both the content, and the toolbar in the viewport. Given enough buttons, that toolbar may need to scroll in the direction of text (e.g. horizontally in a vertically scrolling page).</p>
-        <p>User agents for technologies such as HTML/CSS, PDF and ePub have methods of reflowing content to fit the width of the window (viewport).</p>
+        <h2>Intent of this Success Criterion</h2>
+        <p>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.</p>
+      <p>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 signiicantly 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.</p>
+      <h3>How reflow works</h3>
+     <hP>User agents for technologies such as HTML/CSS, PDF and ePub have methods for reflowing content to fit the width of the window (viewport). When appropriately authored, page content can reflow (wrap) to stay within the window's boundaries (viewport) when users zoom in to enlarge the size of content. Spatial relationships of content may change when users zoom, but all information and functionality should continue to be available.</p>
+      <p>Supporting the reflow of content is also known as 'Responsive Web Design'. It is enabled by CSS media queries which reformat the web content for different viewport widths (at particular break points) in order to provide optimised layouts for mobile devices such as tablets or smartphones. Importantly, these breakpoints are not only triggered by narrower viewports, but also when users employ the browser zoom function to zoom into the page.</p>
+      <p>In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Zooming in will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content.</p>
+      <h3>Viewing distance and display resolution</h3>
+        <p>The value of 320 CSS pixels was chosen as a reasonable minimum size that authors can achieve. This value lines up with the reported viewport width of small displays of common mobile devices. The width of 320 CSS pixels exactly corresponds to a desktop browser window set to a width of 1280px and zoomed in to 400%. It should be noted that 400% applies to the dimension, not the area. It means four times the default width and four times the default height.</p> 
+      <figure><img src="https://www.tsbvi.edu/web/wcag21/css-pixel-by-device.png" width="462" height="198" alt="image showing the size of character needed by viewing distance to make the same image on the retina">
+        <figcaption>Fig. 1: A letter of the same CSS pixel size on different displays with different resolutions</figcaption>
+      </figure>
+        <p>Different types of display are typically used at different viewing distances. What counts is not the absolute size of text, but the relative size depending on the viewing distance and display resolution. In Fig. 1 above, each vertical line shall represent a 16px letter. The letter projected onto the retina remains the same size even though the absolute size of the letter on different displays (phone, tablet, laptop and desktop) is quite different. Each of the devices has a different recommended resolution, but all should cast the same image height on the retina of the eye at the intended viewing distance. When users enlarge content on the laptop or desktop, the resolution goes down. By the same token, the absolute size of the letter will go up, causing the 16px letter to cast a bigger image on the retina at the same distance.</p>
+      <h3>Visibility and availability of content</h3> 
+      <p>How much of the content is visible may change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button (the 'hamburger' icon pattern) so they take up less screen space.</p>
+      <p>The Success Criterion is met as long as all content and functionality are still fully available -  either directly, or revealed via accessible controls, or accessible via direct links.</p>
+
+
+      <h3>Content exceptions for reflow</h3>
+      <p>Content which requires two-dimensional layout for usage or meaning cannot reflow without losing meaning, and is therefore out of scope of this Success Criterion. For example, graphics and video are by their nature two-dimensional. Cutting up an image and stacking the blocks would render the content unusable so that is out of scope. However, it is possible to have these elements stay within the bounds of viewport at zoom levels to 400% (see advisory techniques).</p>
+<p>Complex data tables have a two-dimensional relationship between the headings and data cells. This relationship is essential to convey the content. This Success Criterion therefore does not apply to data tables.</p>
+      <p>Interfaces which provide toolbars to edit content need to show both the content and the toolbar in the viewport. Depending on the number of toolbar buttons, the toolbar may need to scroll in the direction of text (e.g., horizontally in a vertically scrolling page). This Success Criterion therefore does not apply to interfaces which provide toolbars.</p>
+
+      <h3>Browsers in mobile operating systems</h3>
+      <p>The layout method of most common browsers in mobile operating systems does not offer reflow in the same way as on desktop browsers. In these browsers, content can be magnified in different ways, for example, by using a pinch gesture to scale up content, or a double tap on a particular column to make it fill the viewport width. This means that currently, mobile browsers usually exhibit horizontal scrolling regardless of what an author does.</p>
+      <p>In principle, mobile user agents can equally offer reflow when users zoom into content, as evidenced by the Dolphin browser for Android. The lack of reflow support in mobile operating systems can therefore be regarded as a user agent support issue.</p>
+      <h3>Responsive web design and other ways to meet this Success Criterion</h3>
+      <p>Using the responsive web design approach is the most effective method of achieving the goal of allowing people to zoom in to 400%. Each variation (CSS break point) of the page at the same URL should conform (compare <a href="https://www.w3.org/TR/WCAG21/#h-note-27">Conformance for WCAG 2.1</a>).</p>
+      <p>For organisations which are using legacy systems or are not able to update their layout methods for some reason, an alternative conforming version could be a mobile site which has a fixed 320px wide layout. The user should be able to find that version from the default website.</p>
+ <h3>Avoiding scrolling in horizontally and vertically written languages</h3>
+        <p>The success Criterion applies to both horizontally and verticaly 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.</p>
+
+ <h3>The relation of Reflow to the Success Criterion 1.4.4 Resize Text</h3>
+        <p>The focus of the Reflow Success Criterion is to enable users to zoom in without having to scroll in two directions. The Resize Text (<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Success criterion 1.4.4</a>) also applies, so it should be possible to increase the size of all text by at least 200% <em>as well</em>. If text is reduced in size when people zoom in (or for small-screen usage), it should still be possible to get to 200% bigger. For example, if text is set at 20px when the window is 1280px wide, at 200% zoom it should be at least 20px (so 200% larger), but at 400% zoom it could be set to 10px (therefore still 200% larger than the 100% view. It is not required to be 200% larger at every breakpoint, but it should be possible to get 200% large text in some way.</p>
     </section>
+
     <section id="benefits">
-        <h3>Benefits</h3>
-        <p>The benefits are primarily for people with low vision. Of the 285 million people worldwide who are visually impaired, 14% are blind and 86% have low vision <a href="http://www.who.int/mediacentre/factsheets/fs282/en/">according to the World Health Organization (WHO)</a>. A significant proportion of people with low vision need more than a 200% increase in the size of content. From the <a href="http://webaim.org/projects/lowvisionsurvey/#magnification">WebAIM survey</a> 25% of low vision users indicated needing magnification to 400% or more.</p>
+        <h3>Specific Benefits of Success Criterion 1.4.10</h3>
         <ul>
-            <li>A site uses responsive design and when a person zooms-in by over 300% the layout is reflowed to one column. The user can read the content easily and does not have to scroll sideways to read.</li>
-            <li>A PDF is created that conforms to PDF/Universal Accessibility (ISO 14289), the content can be reflowed and zoomed in to make reading possible for someone with low-vision.</li>
+            <li><strong>One column view in responsive design</strong><br />A site uses responsive design. When a person zooms in to over 300%, the layout is reflowed to one column. The user can read the content easily and does not have to scroll sideways to read.</li>
+              <li><strong>PDF offering reflow</strong><br />In a PDF created to conform to PDF/Universal Accessibility (ISO 14289), the content can be reflowed and zoomed in to make reading possible for someone with low-vision.</li>
         </ul>
     </section>
-    <section id="faq">
-        <h2>FAQ</h2>
-        <h3>Mobile devices start smaller, how does that work?</h3>
-        <p>The main principle here is that the web content must be capable of resizing. It is not a device-specific issue. Starting with a desktop browser at 1280px wide and zooming 400% provides a mobile view of 320 px. This works in desktop/laptop browsers.</p>
-        <p>The whole concept is enabled by media queries (in CSS), which were designed to enable reformatting for mobile devices. However, the physics of the smaller screens means that expanding text and/or other content is more constrained. The layout method browsers use on small screen devices does not reflow in the same way, it magnifies (e.g. with pinch-zoom) and causes horizontal scrolling regardless of what an author does.</p>
-        <p>Note that the Resize Text (<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Success criterion 1.4.4</a>) still applies so there should still be a method of increasing the text-size on smaller screen devices, even if it causes scrolling.</p>
-        <p>For content that is of a fixed ratio (video, images etc) they come under the "require two-dimensional layout" exception. In practice they can expand up to the width (and/or height) of the viewport, and be limited to that.</p>
-        <h3>Is the 400% by area or dimension?</h3>
-        <p>It is by dimension, in the same way that Resize Text (<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Success criterion 1.4.4</a>) is by dimension. Zooming 200% means the width is 200% wider and height is 200% taller.</p>
-        <h3>Does this mean web sites have to be responsive?</h3>
-        <p>Using responsive design is the most effective method of achieving the goal of allowing people to zoom in to 400%. For organisations which are using legacy systems or are not able to update their layout methods for some reason, an alternative conforming version could be a mobile site which has a fixed 320px wide layout.</p>
-        <h3>What happens if sites move/change things at smaller sizes?</h3>
-        <p>So long as the information and functionality are still <em>available</em> that is ok. If some content is hidden behind a show/hide button, or navigation is moved into a drop-down it is still available. (Like the 'hamburger' icon pattern for navigation).</p>
-        <p>It is possible people might get confused if things move or get hidden, however, the physics demands that something has to move down or be hidden, you cannot make things bigger and fit them in the same space. Also, the people who need it most would typically be zoomed-in when arriving, so may not notice the difference.</p>
-        <p>However, if content or functionality is removed that would fail this success criteria.</p>
-        <h3>What is the relation to Resize Text?</h3>
-        <p>The focus of the Reflow success criteria is to enable users to zoom in without scrolling in two directions. Resize Text (<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Success criterion 1.4.4</a>) also applies, so it should be possible to increase the size of all text by at least 200% <em>as well</em>. If text is reduced in size when people zoom in (or for small-screen usage), it should still be possible to get to 200% bigger. For example, if text is set at 20px when the window is 1280px wide, at 200% zoom it should be at least 20px (so 200% larger), but at 400% zoom it could be set to 10px (therefore still 200% larger than the 100% view. It is not required to be 200% larger at every breakpoint, but it should be possible to get 200% large text in some way.</p>
+
     </section>
     <section id="examples">
           <h2>Examples</h2>
           <section class="example">
             <h3>Example 1: Responsive Design</h3>
             <p><video controls="controls"><source src="https://alastairc.ac/w3c/reflow-example-1-BBC.mp4" type="video/mp4" /><source src="https://alastairc.ac/w3c/reflow-example-1-BBC.ogv" type="video/ogg" />Animation of zooming in on a responsive site. The content reflows to fit the screen.</video></p>
-            <p>Note that as the zoom percentage increases, the navigation changes first to hide options behind a "More" dropdown menu,  and eventually most navigation options are behind a &quot;hamburger&quot; menu button. All the information and functionality is still available from this web page. There is no horizontal scrolling..</p>
+            <p>Note that as the zoom percentage increases, the navigation changes first to hide options behind a &quot;More&quot; dropdown menu. As zooming continues, most navigation options are eventually behind a &quot;hamburger&quot; menu button. All the information and functionality is still available from this web page. There is no horizontal scrolling.</p>
         </section>
 </section>
 <section id="resources">
     <h2>Resources </h2>
     <ul>
-        <li><a href="http://w3c.github.io/low-vision-a11y-tf/requirements.html#size-of-all-elements">Accessibility Requirements for People with Low Vision</a>.</li>
-        <li><a href="https://developer.mozilla.org/en-US/Apps/Progressive/Responsive">Responsive design resources</a> from MDN Web docs.</li>
-        <li><a href="https://developers.google.com/web/fundamentals/design-and-ux/responsive/">Responsive web design basics</a> tutorial from Google.</li>
+      <li><a href="http://nosetothepage.org/Fitz/2dScroll.html">Operational Overhead Caused by Horizontal Scrolling Text</a> by Wayne Dick, 2017. The study shows the impact of horizontal scrolling on reading effort</li>
+        <li><a href="https://www.w3.org/TR/low-vision-needs/">Accessibility Requirements for People with Low Vision</a>. W3C First Public Working Draft 17 March 2016</li>
+        <li><a href="https://developer.mozilla.org/en-US/Apps/Progressive/Responsive">Responsive design resources</a> from MDN Web docs</li>
+        <li><a href="https://developers.google.com/web/fundamentals/design-and-ux/responsive/">Responsive web design basics</a> tutorial from Google</li>
     </ul>
 </section>
 <section id="techniques">
-    <h2>Techniques</h2>
+    <h2>Techniques for Success Criterion 1.4.10: Reflow</h2>
     <section id="sufficient">
-        <h3>Sufficient</h3>
+        <h3>Sufficient Techniques</h3>
         <ul>
             <li> Using media queries (CSS). Ref: <a href="http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/"> em based media queries</a> AND</li>
             <li>@@ New: Using CSS grids to reflow content (CSS). Ref: <a href="http://alistapart.com/article/fluidgrids"> fluid grids</a> OR</li>
@@ -79,7 +90,7 @@ <h3>Sufficient</h3>
         </ul>
     </section>
     <section id="advisory">
-        <h2>Advisory</h2>
+        <h2>Advisory Techniques</h2>
        <ul>
          <li>CSS, Fitting images to the viewport;</li>
          <li>CSS, Reflowing simple data tables.</li>
@@ -89,7 +100,7 @@ <h2>Advisory</h2>
 
     </section>
     <section id="failure">
-        <h2>Failure</h2>
+        <h2>Failures</h2>
         <ul>
             <li>@@ Using fixed sized containers and fixed position content (CSS)</li>
             <li> @@ "Interfering with a user agent's ability to zoom" i.e., author using: maximum-scale or minimum-scale or user-scalable=no or user-scalable=0 in the meta element ?? @@ Note: In <a href="https://lists.w3.org/Archives/Public/w3c-wai-gl/2016AprJun/0502.html"> Pinch zoom thread on the WCAG list</a> people did not seem to be in favor of this as a failure.</li>