w3c · scottaohara · Sep 5, 2024 · Sep 5, 2024 · Sep 6, 2024 · Sep 6, 2024
diff --git a/techniques/general/g301.html b/techniques/general/g301.html
@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>Accounting for meaningful text indentation and Reflow</title>
+    <link rel="stylesheet" href="../../css/sources.css" class="remove"/>
+  </head>
+  <body>
+    <h1>Accounting for meaningful text indentation and Reflow</h1>
+    <section class="meta"><p class="id">ID: G301</p><p class="technology">Technology: general</p><p class="type">Type: Technique</p></section>
+    <section id="applicability">
+      <h2>When to Use</h2>
+      <p>All technologies that support style switching</p>
+    </section>
+
+    <section id="description">
+      <h2>Description</h2>
+      <p>There can be instances where indentation of text is considered important to the presentation and understandability of the text content. If the indentations were to be removed, then meaning or functionality could suffer. For instance, the nesting of unordered lists can be harder to notice if indentations are removed. Additionally, maintaining indentations can be important to help understand code patterns, if not even necessary for the code to function.</p>
+      <p>Since maintaining indentation is important for these instances of text, two-dimensional scrolling of these distinct sections of content could be necessary. However, there are still styling modifications that could be made to help ensure the indentation was maintained, but as much text was made visible within the viewport as possible. Making such adjustments could limit, if not mitigate any two-dimensional scrolling from occurring, making the content easier for people to read.</p>
+      </div>
+   </section>
+
+    <section id="examples">
+      <h2>Examples</h2>
+      <section class="example">
+        <p>A website conveys information in a nested list format. The understandability of the list hierarchy is supported by the indentation of the list content. While it is important for the individual list item text to reflow, the list hierarchy would suffer if flattened so that all content would fit within a 320 CSS pixel wide viewport.</p>  
+        <p>The following example list contains additional nested lists to provide more context for each of the parent list item's text. To maintain the visual hierarchy, the indentation of each list level remains present, but modified once an author defined CSS breakpoint is met. Additional styles are set for different breakpoints to mitigate against the potential for content to extend beyond a 320px wide viewport, while accounting for visual spacing against the borders of the viewport, to attempt to make the content not feel cramped. At the smallest breakpoint, the content of list items receive a minimum width to mitigate against potentially "squished" content lists with many nested levels. At this breakpoint, each nested list level can be horizontally scrolled into view, and once a nested list is visible within the viewport, only vertical scrolling will be necessary to read the content of the nested list's items.</p>
+<pre>
+&lt;div class="example">
+	&lt;ul>
+		&lt;li>
+			&lt;p>Make a list using one of the HTML list elements, or even an ARIA <code>role=list</code> container.&lt;/p>
+			&lt;ul>
+				&lt;li>
+					&lt;p>There are three types of lists in HTML which can contain list items (<code>li</code> elements.&lt;/p>
+					&lt;ul>
+						&lt;li>&lt;p>the <code>ul</code> element&lt;/li>
+						&lt;li>&lt;p>the <code>ol</code> element&lt;/li>
+						&lt;li>&lt;p>the <code>menu</code> element&lt;/li>
+					&lt;/ul>
+				&lt;/li>
+				&lt;li>
+					&lt;p>Another type of list, description lists, exist as well - but they do not contain list items (<code>li</code> elements).&lt;/p>
+				&lt;/li>
+        ...
+			&lt;/ul>
+		&lt;/li>
+		&lt;li>
+			&lt;p>Neither the start or end tags of any of the HTML list elements are omissible.&lt;/p>
+			&lt;ul>
+				&lt;li>&lt;p>The end tags of <code>li</code> elements can be omitted if the <code>li</code> element is immeditely followed by another <code>li</code> element or there is no more content in the parent list element.&lt;/p>
+				&lt;/li>
+				...
+			&lt;/ul>
+		&lt;/li>
+		...
+	&lt;/ul>
+&lt;/div>
+</pre>
+<pre>
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+body, html {
+    font-family: arial;
+}
+@media screen and ( max-width: 640px ) {
+    .example {
+        overflow: auto;
+        max-width: 640px;
+    }
+    ul {
+        padding-inline-start: 1.25em;
+    }
+    li p {
+        padding: .25em;
+        margin: .5em 0 .5em -.25em;
+        max-width: 300px; /* saftey net for max-width */
+    }
+}
+@media screen and ( max-width: 400px ) {
+    ul { padding-inline-start: 1em; }
+    li p { min-width: 300px } {
+        min-width: 300px;
+    }
+}
+</pre>
+        <p>A working example of <a href="../../working-examples/reflow-nested-lists">a list where nested levels can be read within a 320px wide viewport</a>.</p>
+      </section>
+
+      <section class="example">
+        <p>A website providing code snippets needs to maintain line indentations, as the indentations are meaningful not only to the structure of the code, but in some languages - such as with Python, are requirements when defining blocks of code.</p>
+        <p>As a user zooms in the web page, the CSS of the indentation can be adjusted to maintain this necessary structure, while also allowing more text to be visible on a single line.</p>
+
+        <p>The following represents a Python code example. The indentation of each line of text is necessary to create a group of statements that are executed as a block.</p>
+<pre>
+def complex_function(x):
+    if x > 0:
+        for i in range(x):
+            if i % 2 == 0:
+                print(f"{i} is even")
+                for a in range(i):
+                    if a % 5 == 0:
+                        print(f"  {a} can be divided by 5")
+                    else:
+                        print(f"  {a} cannot be divided by 5")
+            else:
+                print(f"{i} is odd")
+                for a in range(i):
+                    if a % 2 == 0:
+                        print(f"  {a} is even")
+                    else:
+                        print(f"  {a} is odd")
+    else:
+        print("x is not a positive number")
+</pre>
+        <p>The following code example demonstrates the use of indentation to convey the nesting of elements in an HTML document:</p>
+<pre>
+&lt;html lang=en>
+	&lt;head>...&lt;/head>
+	&lt;body>
+		&lt;div>
+			&lt;!-- ... keep indenting as necessary  -->
+		&lt;/div>
+	&lt;/body>
+&lt;/html>
+</pre>     
+        <p>The indentation of code blocks like these could be adjusted at different viewport sizies, via a CSS Media Query.</p>
+<pre>
+@media screen and ( min-width: 320px ) {
+	pre {
+		tab-size: 8px;
+	}
+}
+
+@media screen and ( min-width: 640px ) {
+	pre {
+		tab-size: 16px;
+	}
+}
+
+@media screen and ( min-width: 1280px ) {
+	pre {
+		tab-size: 32px;
+	}
+}
+</pre>
+        <p>A working example of <a href="../../working-examples/reflow-indenting.html">code snippets using CSS to modigy indentation width at different breakpoints</a>.
+        </section>
+    </section>
+
+    <section id="tests">
+      <h2>Tests</h2>
+      <section class="procedure"><h3>Procedure for list example</h3>
+         <ol>
+            <li>Display the web page in a user agent where the page can be zoomed, or the user agent can be resized.</li>
+            <li>Zoom in or resize the browser window so that the viewport is equivallent to 320 CSS pixels wide.</li>
+            <li>The list content fits within the width so that it is only necessary so scroll vertically to read the list.</li>
+            <li>Or, each nested list can be horizontally scrolled into view. Only vertical scrolling is necessary to read the content of list items within each specific nested list level.</li>
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <ul>
+            <li>Checks 3 or 4 are true.</li>
+         </ul>
+      </section>
+
+      <section class="procedure"><h3>Procedure for code snippets</h3>
+         <ol>
+            <li>Display the web page in a user agent where the page can be zoomed, or the user agent can be resized.</li>
+            <li>Zoom in or resize the browser window so that the viewport is equivallent to 320 CSS pixels wide.</li>
+            <li>The code snippets fits within the width so that it is only necessary so scroll vertically to read each line of code.</li>
+            <li>Or, for code where non-wrapping lines are not essential, the code wraps or a mechanism is provided to allow line wrapping.</li>
+            <li>Or, the indentation and linebreaks are meaningful to the code language. 
+         </ol>
+      </section>
+      <section class="results"><h3>Expected Results</h3>
+         <ul>
+            <li>Checks #3, #4 or #5 are true.</li>
+         </ul>
+      </section>
+    </section>
+    <section id="related">
+      <h2>Related Techniques</h2>
+      <ul>
+      <li><a href="../css/C20">C20</a></li>
+      </ul>
+    </section>
+  </body>
+</html>
diff --git a/techniques/general/g302.html b/techniques/general/g302.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+   <head>
+      <title>Section panels that scroll horizontally are designed to fit within a width of 320 CSS pixels on a vertically scrolling page</title>
+      <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
+   </head>
+   <body>
+      <h1>Section panels that scroll horizontally are designed to fit within a width of 320 CSS pixels on a vertically scrolling page</h1>
+      <section class="meta">
+         <p class="id">ID: </p>
+         <p class="technology">Technology: general</p>
+         <p class="type">Type: Technique</p>
+      </section>
+      <section id="applicability">
+         <h2>When to Use</h2>
+         <p>All technologies.</p>
+      </section>
+      <section id="description">
+         <h2>Description</h2>
+         <p>The objective of this technique is to ensure that users can zoom in on text within a horizontally scrolling section, while not requiring horizontal scrolling to read the content of each individual panel. Although the entire section requires horizontal scrolling to navigate between panels, each panel is designed to fit within a fixed width of 320 CSS pixels. This ensures that when a 320 CSS pixel wide viewport is used, and the card is in the viewport, each card will remain fully visible without the need for additional horizontal scrolling to read its content.</p>
+      </section>
+      <section id="examples">
+         <h2>Examples</h2>
+         <section class="example">
+             <h3>A product carousel</h3>
+             <p>The homepage of an online retail website includes several informational sections, some of which feature carousels showcasing highlighted products. These carousels require horizontal scrolling and have a computed height greater than 256 CSS pixels. Each panel is 320 CSS pixels wide, allowing users to see the full width of the card without horizontal scrolling. Consequently, users only need to scroll vertically to view the entire card, ensuring compliance with success criterion 1.4.10 Reflow for that section.</p>
+             <p>Working example: <a href="../../working-examples/reflow-carousel-panel-horizontal-scroll/">Carousel panels that scroll horizontally are designed to fit within a width of 320 CSS pixels on a vertically scrolling page</a>.
+         </section>
+      </section>
+      <section id="tests">
+         <h2>Tests</h2>
+         <section class="procedure">
+            <h3>Procedure</h3>
+            <ol>
+              <li>Check that the layout includes sections of content that scroll horizontally within a vertically scrolling page.</li>
+              <li>Check that each horizontally scrolling section is divided into distinct panels.</li>
+              <li>Open the webpage in a user agent that supports 400% zoom, setting the viewport dimensions to 1280 CSS pixels in width.</li>
+              <li>Activate the zoom function to enlarge the view by 400%.</li>
+              <li>Check that the content of each individual panel within the horizontally scrolling sections is fully readable without the need for additional horizontal scrolling.</li>
+            </ol>
+            <div class="note">
+               <p class="note-title marker">Note</p>
+               <div>
+                  <p>The native browser scrollbar is not included in the viewport dimensions. Therefore, when setting the view to 1280 CSS pixels wide for a vertically scrolling page, make sure to exclude the scrollbar width.</p>
+               </div>
+            </div>
+         </section>
+         <section class="results">
+            <h3>Expected Results</h3>
+            <ul>
+              <li>All checks above are true.</li>
+            </ul>
+         </section>
+      </section>
+      <section id="related">
+         <h2>Related Techniques</h2>
+         <ul>
+            <li><a href="../general/G206">G206</a></li>
+            <li><a href="../client-side-script/SCR34">SCR34</a></li>
+         </ul>
+      </section>
+   </body>
+</html>
diff --git a/understanding/21/img/carousel-large-screen.png b/understanding/21/img/carousel-large-screen.png
diff --git a/understanding/21/img/code-diff.gif b/understanding/21/img/code-diff.gif
diff --git a/understanding/21/img/exception-does-not-extend.jpg b/understanding/21/img/exception-does-not-extend.jpg
diff --git a/understanding/21/img/max-width-video.jpg b/understanding/21/img/max-width-video.jpg
diff --git a/understanding/21/img/news-large-screen.png b/understanding/21/img/news-large-screen.png
diff --git a/understanding/21/img/news-reflow.png b/understanding/21/img/news-reflow.png
diff --git a/understanding/21/img/reflow-400zoom-1280x1024.jpg b/understanding/21/img/reflow-400zoom-1280x1024.jpg
diff --git a/understanding/21/img/reflow-no-sticky-ad.png b/understanding/21/img/reflow-no-sticky-ad.png
diff --git a/understanding/21/img/reflow-sticky-ad.png b/understanding/21/img/reflow-sticky-ad.png
diff --git a/understanding/21/img/rich-document-with-comment.png b/understanding/21/img/rich-document-with-comment.png
diff --git a/understanding/21/img/single-carousel-panel.png b/understanding/21/img/single-carousel-panel.png
diff --git a/understanding/21/img/table-exception.jpg b/understanding/21/img/table-exception.jpg
diff --git a/understanding/21/img/unnecessary-horizontal-scrollbar.jpg b/understanding/21/img/unnecessary-horizontal-scrollbar.jpg