Expand 1.4.10 Reflow note about 200% and breakpoints, add matching note to 1.4.4 Resize Text (#2630)

- Updates the wording in the Reflow Understanding document which
discusses the connection between Reflow and Resize Text in attempt to
make it clearer
- Adds similar reciprocal language into the Resize Text Understanding
document

Closes #1839

Related: #2101
#704

---------

Co-authored-by: Scott O'Hara <[email protected]>

Author: patrickhlauke

understanding/20/resize-text.html

@@ -91,6 +91,11 @@ <h2>Intent of Resize Text</h2>
          </p>
 
       </div>
+
+      <div class="note">
+         <p>As with most other Success Criteria, this criterion applies to each variation of the page that is automatically presented for various screen sizes (e.g. media query variations in a responsive site). 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 criterion.</p>
+         <p>For example, if at the default browser setting of 100% zoom, text is set at 20px when the window is 1280 CSS pixels wide, at 200% zoom it will visually appear at twice the size. After zooming by 400% the page reflows to fit within the 320 CSS pixel viewport, the author may decide to set the page's text size to 10px. The text is now half the original size in CSS pixels, but as it has been enlarged to 400%, it is still displayed at twice the size compared to the default browser setting at 100% zoom. It is not required to achieve 200% text enlargement while remaining inside a specific breakpoint (as zooming may result in the variation for a new breakpoint becoming active), but it should still be possible to get 200% text enlargement in some way compared to the default 100% zoom.</p>
+      </div>
 
       <p>See also 
          <a href="visual-presentation">1.4.3: Visual Presentation</a>.

understanding/21/reflow.html

@@ -61,7 +61,7 @@ <h3>Avoiding scrolling in horizontally and vertically written languages</h3>
       <section>
  <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. <a href="resize-text" class="sc">Success Criterion 1.4.4 Resize Text</a> 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.</p>
-        <p>For example, if at the default browser setting of 100% zoom, text is set at 20px when the window is 1280px wide, the same 20px at 200% zoom would mean a text size of 200%. At 400% zoom, the author may decide to set the text size to 10px: the text would now still be enlarged to 200% compared to the default browser setting of 100% zoom. It is not required to achieve 200% text enlargement at every breakpoint, but it should be possible to get 200% text enlargement in some way.</p>
+        <p>For example, if at the default browser setting of 100% zoom, text is set at 20px when the window is 1280 CSS pixels wide, at 200% zoom it will visually appear at twice the size. After zooming by 400% the page reflows to fit within the 320 CSS pixel viewport, the author may decide to set the page's text size to 10px. The text is now half the original size in CSS pixels, but as it has been enlarged to 400%, it is still displayed at twice the size compared to the default browser setting at 100% zoom. It is not required to achieve 200% text enlargement while remaining inside a specific breakpoint (as zooming may result in the variation for a new breakpoint becoming active), but it should still be possible to get 200% text enlargement in some way compared to the default 100% zoom.</p>
       </section>
              <section>
       <h3>Browsers on mobile operating systems</h3>