alastc · Nov 30, 2021 · Oct 24, 2021 · Oct 27, 2021 · Oct 29, 2021 · Oct 31, 2021
diff --git a/understanding/22/img/target-size-minimum-diagram.png b/understanding/22/img/target-size-minimum-diagram.png
diff --git a/understanding/22/img/target-size-minimum.png b/understanding/22/img/target-size-minimum.png
diff --git a/understanding/22/target-size-minimum.html b/understanding/22/target-size-minimum.html
@@ -7,22 +7,23 @@
 </head>
 <body>
    <h1>Understanding Target Size (Minimum)</h1>
-   
+
     <section id="status" class="advisement">
         <h2>Status</h2>
         <p>This understanding document is part of the <a href="https://w3c.github.io/wcag/guidelines/22/"><strong>draft</strong> WCAG 2.2 content</a>. It may change or be removed before the final WCAG 2.2 is published.</p>
-    </section> 
+    </section>
 
     <section class="remove">
-   
+
         <h2>Target Size (Minimum) Success Criterion text</h2>
         <blockquote>
             <h4>Target Size (Minimum)</h4>
-    
+
             <p class="conformance-level">AA</p>
              <p class="change">New</p>
-            
+
              <p>The size of the <a>target</a> for <a>pointer inputs</a> is at least 24 by 24 CSS pixels, except where:</p>
+
             <ul>
                 <li><strong>Spacing:</strong> The <a>target offset</a> is at least 24 CSS pixels to every adjacent target;</li>
                 <li><strong>Inline:</strong> The target is in a sentence or block of text;</li>
@@ -34,12 +35,12 @@ <h4>Target Size (Minimum)</h4>
             <p class="note">Are there issues with pop-over content overlapping targets triggering failures?</p>
             <dl><dt class="new"><dfn data-lt="target offsets">target offset</dfn></dt>
             <dd class="new">
-                <p class="change">New</p>	
+                <p class="change">New</p>
             <p>the distance measured from the farthest point of a target, to the nearest point of the second target. Offset includes the target and spacing around the target. The offset from A to B may be different then the offset from B to A, if the size of these targets differs.</p>
             </dd></dl>
         </blockquote>
     </section>
-   
+
     <section id="intent">
         <h2>Intent of Target Size (Minimum)</h2>
 
@@ -81,36 +82,49 @@ <h3>Spacing versus size</h3>
             <img src="img/pointer-target-example3-v2.png" alt="A row of buttons which are more that 44px wide and 20 CSS pixels high. There are no targets above or below." />
             <figcaption>The widths of the buttons with adjacent neighbors is above 24 CSS pixels, while the height is only 20 CSS pixels. However, the lack of adjacent targets above and below means that the targets pass this Success Criterion.</figcaption>
         </figure>
-      
+
         <figure id="pointer-target-44-20-nospace">
-            <img src="img/pointer-target-example4-v2.png" alt="Two rows of buttons only 20 CSS pixels high, with no spacing between them." />   
+            <img src="img/pointer-target-example4-v2.png" alt="Two rows of buttons only 20 CSS pixels high, with no spacing between them." />
             <figcaption><strong>Fail:</strong> Two rows of buttons, both with a height of only 20 CSS pixels. The rows are flush, with no gap between them, which means that the offset from the top of the targets in the top row to the top of targets in the row below is below 24px, thus failing the Success Criterion.</figcaption>
         </figure>
       <p>The following two illustrations show how menu items can be adjusted to properly meet this requirement. In the first illustration, the <q>About us</q> menu has been activated, showing that each of the menu item targets (text and padding) has a 24 CSS pixel height. In the second illustration, the same menu is expanded, but the menu items only achieve 20 CSS pixels in height.</p>
         <figure id="pointer-target-dropdown">
-            <img src="img/pointer-target-example4.jpg" alt="A dropdown menu - a pass example with menu items 24 CSS pixels high, and a fail example with menu items only 20 CSS pixels high." />   
+            <img src="img/pointer-target-example4.jpg" alt="A dropdown menu - a pass example with menu items 24 CSS pixels high, and a fail example with menu items only 20 CSS pixels high." />
             <figcaption>A dropdown menu is shown. The PASS example has menu items which are 24 CSS pixels high. In the FAIL example, the menu items are only 20 CSS pixels high.</figcaption>
         </figure>
 <p>The following three examples illustrate how a target's position relative to another target affects the offset. Each illustration shows a person's profile image, which is a target leading to the profile page, as well as a magnifying glass icon, which opens a lightbox view of the profile image. In the first example, the magnifying icon is outside of the picture. Its horizontal dimension is 24 CSS pixels. The vertical dimension is below 24 CSS pixels but since there are no adjacent targets above and below, the target meets the Success Criterion. In the second example, the icon overlaps with the top-left corner of the image. The image, itself a target, is immediately adjacent to the magnifying glass icon. Measuring from the top of the magnifying glass icon to the nearest point of the image target shows that that the offset is only 20 CSS pixels. The second example therefore fails the Success Criterion. In the third example, the magnifying glass icon sits inside the linked image. Since it is surrounded by a larger target, the offset to the surrounding and immediately adjacent image target is only 20 CSS pixels at top and bottom. The icon target fails. </p>
-        <figure id="pointer=target-embedded">
+        <figure id="pointer-target-embedded">
             <img src="img/pointer-target-example5-revised.png" alt="Three examples of a target adjacent to, or nested within, another target (see legend below)" />
           <figcaption>Three illustrations showing the offsets between two targets when they abut and overlap.</figcaption>
       </figure>
-      
-        <figure id="pointer=target-inline-links">
+
+        <figure id="pointer-target-inline-links">
             <img src="img/pointer-target-example6-inline-links.png" alt="Inline links in a block of text and in an ordered list (see legend below)" />
           <figcaption>Two examples show inline text links. The first example has various links in a block of text. The font size is 14px, line height is 16.8px. Depending on the position of links in the text, the vertical offset of links is smaller than 24 CSS pixels. For linked footnote numbers, the horizontal offset is also below 24 CSS pixels. The inline exception allows inline targets to have an offset below the requirement of 24 by 24 CSS pixels.</figcaption>
       </figure>
-      
-        <figure id="pointer=target-stacked-links">
-            <img src="img/pointer-target-example7-stacked-links.png" alt="A  bulleted list of stacked links with sufficient and insufficient offset (see legend below)" />
+
+        <figure id="pointer-target-stacked-links">
+            <img src="img/pointer-target-example7-stacked-links.png" alt="A bulleted list of stacked links with sufficient and insufficient offset (see legend below)" />
           <figcaption>The two examples show lists of stacked links as used in navigation, for example in a list of contents of a longer text page. In both cases, the font size is 14px. In the first example, the line height is 25.8px, exceeding the requirement of 24 CSS pixels. In the second example, the stacked links have a line height of just 16.8px. They do not meet the vertical offset requirement of 24 CSS pixels.</figcaption>
       </figure>
 
         <p>Users with different disabilities have different needs for control sizes. It can be beneficial to provide an option to increase the active target area without increasing the visible target size. Another option is to provide a mechanism to control the density of layout and thereby change target size or spacing, or both. This can be beneficial for a wide range of users. For example, users with visual field loss may prefer a more condensed layout with smaller sized controls while users with other forms of low vision may prefer large controls.</p>
-
-
+
+        <p>The aim of this Success Criterion is that targets are ideally at least 24 by 24 CSS pixels. However, the offset exception allows for smaller targets if there is sufficient spacing around them. Authors should be aware that using smaller targets can have an impact on layouts, as the combined space of the smaller target and the required spacing around it will generally require an overall area that is larger than 24 by 24 CSS pixels.</p>
+
+        <figure id="target-size-minimum">
+          <img src="img/target-size-minimum-diagram.png"
+            alt="Illustration showing four 24 by 24 pixel buttons ('play', 'previous', 'next', 'settings') arranged side by side in a row. Another row shows the same buttons, now reduced to a target size of 10 by 10 pixels, with spacing of 14 pixels on all sides of each button." />
+            <figcaption>Targets that are 24 by 24 pixels or larger can be arranged closely together. Reducing the target size to 10 by 10 pixels requires spacing/clearance of 14 pixels around each target, meaning that the overall space occupied by the four targets is bigger.</figcaption>
+        </figure>
+
+        <figure id="target-size-minimum-redux">
+          <img src="img/target-size-minimum.png"
+            alt="First diagram: five 24 by 24 pixel targets, arranged in a cross (one target at the center, one target above, one to the right, one below, and one to the left), with no gaps. This passes. Second diagram: reducing the size of the central target to 10 by 10 pixels, while leaving the outer targets unchanged, leads to spacing of only 7 pixels between the central target and the outer targets. This fails. Third diagram: to pass, the outer targets need to be moved further away from the central target 10 by 10 pixel target, with spacing of 14 pixels." />
+          <figcaption>In this (hypothetical) cross arrangement of five 24 by 24 pixel targets, shrinking the central target to 10 by 10 pixels, with spacing of only 7 pixels to the other targets, will fail the Success Criterion. To pass, the outer targets will need to be moved further out, to achieve a spacing of 14 pixels - leading to an increase of the overall space occupied by the five targets.</figcaption>
+        </figure>
     </section>
+
     <section id="benefits">
       <h2>Benefits of Target Size (Minimum)</h2>
       <p>Having targets with sufficient size - or failing that, sufficient target spacing - can help all users who may have difficulty in confidently targeting or operating small controls. Users who benefit include, but are not limited to:</p>
@@ -122,9 +136,9 @@ <h2>Benefits of Target Size (Minimum)</h2>
        <li>People who access a device using one hand;</li>
        <li>People with large fingers, or who are operating the device with only a part of their finger or knuckle.</li>
      </ul>
-      
+
    </section>
-   
+
    <section id="examples">
         <h2>Examples of Target Size (Minimum)</h2>
 
@@ -134,7 +148,7 @@ <h2>Examples of Target Size (Minimum)</h2>
             <li>Links within a paragraph of text have varying target dimensions. Links within paragraphs of text do not need to meet the 24 by 24 CSS pixels requirements, so the Success Criterion passes.</li>
         </ul>
    </section>
-   
+
    <section id="resources">
 
         <h2>Resources</h2>
@@ -145,31 +159,31 @@ <h2>Resources</h2>
 
    <section id="techniques">
       <h2>Techniques for Target Size (Minimum)</h2>
-      
-      
+
+
       <section id="sufficient">
          <h3>Sufficient Techniques for Target Size (Minimum)</h3>
-         
-         
+
+
          <ol>
             <li>
                 <a href="../../techniques/css/C42" class="css">Using min-height and min-width to ensure sufficient target spacing</a>
             </li>
          </ol>
-         
+
       </section>
-      
+
       <section id="advisory">
          <h3>Additional Techniques (Advisory) for Target Size (Minimum)</h3>
-         
+
       </section>
-      
+
       <section id="failure">
          <h3>Failures for Target Size (Minimum)</h3>
 
       </section>
-      
+
    </section>
-   
+
 </body>
 </html>