w3c · alastc · Jul 21, 2020 · Jun 15, 2020 · Jun 25, 2020 · Jun 25, 2020
diff --git a/guidelines/index.html b/guidelines/index.html
@@ -288,6 +288,8 @@ <h3>Input Modalities</h3>
                 <section data-include="sc/21/concurrent-input-mechanisms.html" data-include-replace="true"></section>
 
                 <section data-include="sc/22/dragging.html" data-include-replace="true"></section>
+
+                <section data-include="sc/22/pointer-target-spacing.html" data-include-replace="true"></section>
 
             </section>
 

diff --git a/guidelines/sc/22/pointer-target-spacing.html b/guidelines/sc/22/pointer-target-spacing.html
@@ -0,0 +1,18 @@
+<section class="sc new">
+
+    <h4>Pointer Target Spacing</h4>
+
+    <p class="conformance-level">AA</p>
+	<p class="change">New</p>
+
+    <p>For each target, there is an area with a width and height of at least 44 CSS pixels that includes it, and no other targets, except when:</p>
+    <ul>
+        <li><strong>Enlarge:</strong> A mechanism is available to change the CSS pixel size of all targets so that the width and height are each at least 44 CSS pixels;</li>
+        <li><strong>Inline:</strong> The target is in a sentence or block of text;</li>
+        <li><strong>Essential:</strong> A particular presentation of the target is essential to the information being conveyed.</li>
+    </ul>
+    <p class="note">This criteria has been formulated to increase the hit-area of small targets, but the group would like feedback from providers of touch-screen devices if there is another way of forming the criteria to better complement the tap-heuristics used.</p>
+    <p class="note">Are there issues with internationalization when describing inline links?</p>
+    <p class="note">Are there issues with pop-over content overlapping targets triggering failures?</p>
+
+ </section>
diff --git a/techniques/css/img/pointer-spacing-1.png b/techniques/css/img/pointer-spacing-1.png
diff --git a/techniques/css/img/pointer-spacing-2.png b/techniques/css/img/pointer-spacing-2.png
diff --git a/techniques/css/target-padding.html b/techniques/css/target-padding.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+	<head>
+		<title>Using min-height and min-width to ensure sufficient target spacing</title>
+		<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
+	</head>
+	<body>
+		<h1>Using min-height and min-width to ensure sufficient target spacing</h1>
+		<section id="meta">
+			<h2>Metadata</h2>
+			<p id="id"></p>
+			<p id="technology">CSS</p>
+			<p id="type"></p>
+		</section>
+		<section id="applicability">
+			<h2>When to Use</h2>
+			<p>All technologies that support CSS and pointer input.</p>
+		</section>
+		<section id="description">
+			<h2>Description</h2>
+			<p>The objective of this technique is to ensure that links in navigation or pagination menus will be spaced so that they fall within an area that measures at least 44 x 44 CSS pixels if the target area itself is smaller than that. The aim is to provide an adequate target clearance so the offset to adjacent targets is sufficient to prevent accidental pointer activation of adjacent targets.</p>	
+
+		</section>
+		<section id="examples">
+			<h2>Examples</h2>
+			<p>The following examples can be seen as rendered versions in the <a href="../../working-examples/css-pointer-spacing/">working examples</a>.</p>
+
+			<section class="example">
+				<h3>Using a display value of inline-block and min-height / width</h3>
+				<p>The first example shows a situation where the targets (in this case, the linked numbers in th pagination menu) are smaller than 44 x 44 CSS pixels. However, the list items that contain them have a minimum height and width of 44 px set, so that sufficient target spacing is assured.</p>
+				<figure id="pointer-spacing-block">
+					<img src="img/pointer-spacing-1.png" alt="A horizontal pagination component immediately above the search results." />
+					<figcaption>Example of using CSS to ensure enough spacing around targets</figcaption>
+				</figure>
+				<p>Given the following HTML:</p>
+				<pre><code>&lt;nav class=&quot;pag&quot; aria-label=&quot;pagination menu&quot;&gt;
+	&lt;ol class=&quot;pagination-1&quot;&gt;
+		&lt;li&gt;&lt;span&gt;previous&lt;/span&gt;&lt;/li&gt;
+		&lt;li&gt;&lt;strong&gt;1&lt;/strong&gt;&lt;/li&gt;
+		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
+		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;3&lt;/a&gt;&lt;/li&gt;
+		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;4&lt;/a&gt;&lt;/li&gt;
+		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;5&lt;/a&gt;&lt;/li&gt;
+		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;next&lt;/a&gt;&lt;/li&gt;
+	&lt;/ol&gt;
+&lt;/nav&gt;</code></pre>
+				<p>The following CSS would ensure the minumum spacing is applied:</p>
+				<pre><code>ol.pagination-1 li {
+	display: inline-block; 
+	min-width: 44px;
+	min-height: 44px;
+}</code></pre>
+
+			</section>
+			<section class="example">
+				<h3>Using a display value of flex and min-height / width</h3>
+				<p>The second example uses min-width and min-height on the targets (the linked numbers in the pagination menu) and not on the parent container, thereby meeting this target spacing Success Criterion and incidentally also the AAA Success Criterion 2.5.5 Target Size.</p>
+				<figure id="pointer-spacing-flex">
+					<img src="img/pointer-spacing-1.png" alt="A horizontal pagination component immediately above the search results. It looks identical to the previous example. " />
+					<figcaption>Example of using CSS to ensure enough spacing within targets</figcaption>
+				</figure>
+				<p>Given the following HTML:</p>
+				<pre><code>&lt;nav class=&quot;pag&quot; aria-label=&quot;pagination menu&quot;&gt;
+	&lt;ol class=&quot;pagination-2&quot;&gt;
+		&lt;li&gt;&lt;span&gt;previous&lt;/span&gt;&lt;/li&gt;
+		&lt;li&gt;&lt;strong&gt;1&lt;/strong&gt;&lt;/li&gt;
+		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
+		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;3&lt;/a&gt;&lt;/li&gt;
+		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;4&lt;/a&gt;&lt;/li&gt;
+		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;5&lt;/a&gt;&lt;/li&gt;
+		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;next&lt;/a&gt;&lt;/li&gt;
+	&lt;/ol&gt;
+  &lt;/nav&gt;</code></pre>
+					<p>The following CSS ensures the minimum size is applied:</p>
+					<pre><code>ol.pagination-2 a,
+ol.pagination-2 strong,
+ol.pagination-2 span {
+	display: block;
+	line-height:44px;
+	min-height:44px;
+	min-width: 44px;
+}</code></pre>
+			</section>
+
+		</section>
+		<section id="tests">
+			<h2>Tests</h2>
+
+			<section class="test-procedure">
+				<h3>Procedure</h3>
+
+				<p>For each target that cannot be enlarged by a mechanism, is not inline, and is not covered by the essential exception:</p>
+				<ul>
+					<li>Check that the target has enough spacing so that the space around it measures at least 44px width and 44px height.</li>
+				</ul>
+			</section>
+			<section class="test-results">
+				<h3>Expected Results</h3>
+				<ul>
+					<li>Check #1 is true</li>
+				</ul>
+			</section>
+		</section>
+		<section id="related">
+			<h2>Related Techniques</h2>
+
+		</section>
+		<section id="resources">
+			<h2>Resources</h2>
+
+		</section>
+	</body>
+</html>
diff --git a/understanding/22/img/pointer-target-example1.png b/understanding/22/img/pointer-target-example1.png
diff --git a/understanding/22/img/pointer-target-example2.png b/understanding/22/img/pointer-target-example2.png
diff --git a/understanding/22/img/pointer-target-example3.png b/understanding/22/img/pointer-target-example3.png
diff --git a/understanding/22/img/pointer-target-example4.png b/understanding/22/img/pointer-target-example4.png
diff --git a/understanding/22/img/pointer-target-example5.png b/understanding/22/img/pointer-target-example5.png
diff --git a/understanding/22/pointer-target-spacing.html b/understanding/22/pointer-target-spacing.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+   <meta charset="UTF-8"></meta>
+   <title>Understanding Pointer Target Spacing</title>
+   <link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></link>
+</head>
+<body>
+   <h1>Understanding Pointer Target Spacing</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 class="remove">
+
+        <h2>Pointer Target Spacing Success Criteria text</h2>
+        <blockquote>
+            <h4>Pointer Target Spacing</h4>
+
+            <p class="conformance-level">AA</p>
+            <p class="change">New</p>
+
+            <p>For each target, there is an area with a width and height of at least 44 CSS pixels that includes it, and no other targets, except when:</p>
+            <ul>
+                <li><strong>Enlarge:</strong> A mechanism is available to change the CSS pixel size of all targets so that the width and height are each at least 44 CSS pixels;</li>
+                <li><strong>Inline:</strong> The target is in a sentence or block of text;</li>
+                <li><strong>Essential:</strong> A particular presentation of the target is essential to the information being conveyed.</li>
+            </ul>
+            <p class="note">This criteria has been formulated to increase the hit-area of small targets, but the group would like feedback from providers of touch-screen devices if there is another way of forming the criteria to better complement the tap-heuristics used.</p>
+            <p class="note">Are there issues with internationalization when describing inline links?</p>
+            <p class="note">Are there issues with pop-over content overlapping targets triggering failures?</p>
+        </blockquote>
+    </section>
+
+    <section id="intent">
+        <h2>Intent of Pointer Target Spacing</h2>
+
+        <p>The intent of this success criteria is to ensure targets can easily be activated without accidentally activating an adjacent target. When touch targets are small, it is difficult for users with hand tremors and those who have difficulty with fine motor movement to activate them accurately. Providing spacing between touch targets will reduce the likelihood of accidentally activating the wrong control.</p>
+
+        <p>The requirement is for targets that are smaller than 44 x 44px to be included in an area with a width and height of at least 44px each. For the horizontal dimension, this means that the total width of 44px is composed of the width of the target and the width of the spacing that separates it from adjacent targets. The same apllies to the height. For example, a target of 24 x 24px would meet the requirement if it had a spacing of 10 px on all sides. If the target is 44 x 44px or larger, no spacing between it and adjacent targets would be required.</p>
+
+
+        <p>There are three exceptions:</p>
+        <ol>
+            <li>If there is a mechanism to change the target sizes or spacing to meet the minimum, such as a button to change the sizes and layout of the targets.</li>
+            <li>If the target is inline within a sentence there doesn’t need to be a minimum target size.</li>
+            <li>If the spacing of the targets is essential to the information being conveyed there doesn’t need to be a minimum target size.</li>
+        </ol>
+
+      <h3>Scope and applicability</h3>
+      <ul>
+        <li>The requirement holds independently of the zoom factor of the page. This means that authors cannot meet it by claiming that the target will have enough spacing or sufficient size if the user zooms into the page.</li>
+      <li>The requirement holds for all interactive elements that do not fall under the inline exception (including native elements like selects, buttons or inputs of type radio or checkbox).</li>
+        <li>While the Success Criterion primarily helps touch users by ensuring that activation with the 'fat finger' will not accidentally trigger adjacent targets, it is also useful for mouse or pen users. It reduces the chances of erroneous activation due to a tremor or some other input imprecision.</li>
+      </ul>
+
+        <p>As mobile devices generally have internal heuristics to identify which link is closest, spacing can work as effectively as a larger target size.</p>
+
+        <figure id="pointer-target-44x44">
+            <img src="img/pointer-target-example1.png" alt="A series of icons with measures showing they are each 44 by 44 pixels wide and high." />
+            <figcaption>When links are 44 by 44 CSS pixels they pass this success criteria</figcaption>
+        </figure>
+
+        <figure id="pointer-target-38x38-spacing">
+            <img src="img/pointer-target-example2.png" alt="A series of icons with measures showing they are each 38 by 38 pixels wide and high, with 6 pixel spacing between them." />
+            <figcaption>The top edge of a control and the top edge of the control below it are at least 44 CSS pixels apart so they pass this success criteria.</figcaption>
+        </figure>
+
+        <p>Another example is where targets may be different shapes which can be impacted by other targets nearby.</p>
+
+        <figure id="pointer-target-44x20-spacing">
+            <img src="img/pointer-target-example3.png" alt="A series of icons which are 44px wide and 20px high. There are no targets above or below." />
+            <figcaption>Each target has sufficient size and space to pass this criteria.</figcaption>
+        </figure>
+
+        <figure id="pointer-target-44-20-nospace">
+            <img src="img/pointer-target-example4.png" alt="A series of icons which are 44px wide and 20px high, with other targets above and below with only 2px spacing. One of the horizontally aligned links is also too small at only 32px wide with no spacing." />
+            <figcaption><strong>Fail:</strong> The small targets with other links in close proximity do not pass this success criteria.</figcaption>
+        </figure>
+
+        <p>Where targets are embedded inside another target, having it on the edge of the target so that it has spacing is a method of passing this criteria.</p>
+
+        <figure id="pointer=target-embedded">
+            <img src="img/pointer-target-example5.png" alt="Three examples of a picture, which is a target, and an magnifying glass icon. In the first example it is outside the picture and passes. The second example it overlaps with the picture and passes. The third example the icon is within the picture and it is not large enough to pass." />
+            <figcaption>@@@ Redo the images. Targets that are smaller than 44 x 44px meet the Success Criterion if they have enough adjacent spacing even if they are flush with a larger target or even overlap it. If the small target sits on top of the larger target, it is surrounded by an active click area and therefore needs to be at least 44px in width and height to meet the success criterion.</figcaption>
+        </figure>
+        <p>Users with different disabilities may have different needs for control sizes.  Changing the control size is one way but not the only way to increase space between controls.  It can be beneficial to provide an option to increase target area without increasing control size or provide a mechanism to control the density of layout and thus potentially change the target size of controls can be beneficial to a wider 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>
+
+
+    </section>
+    <section id="benefits">
+      <h2>Benefits of Pointer Target Spacing</h2>
+
+      <ul>
+        <li>Users who use a mobile device where touch screen is the primary mode of interaction;
+           Users with mobility impairments such as hand tremors;</li>
+       <li>Users who use a mobile device in environments where they are exposed to shaking such as public transportation;</li>
+       <li>Users who have difficulty with fine motor movements;</li>
+       <li>Users who access a device using one hand;</li>
+       <li>Users 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 Pointer Target Spacing</h2>
+
+        <ul>
+            <li>Three buttons are on-screen and the touch target area of each button is 44 by 44 CSS pixels.</li>
+            <li>Links within a paragraph of text have varying touch target dimensions. Links within paragraphs of text do not need to meet the 44 by 44 CSS pixels requirements.</li>
+        </ul>
+   </section>
+
+
+   <section id="techniques">
+      <h2>Techniques for Pointer Target Spacing</h2>
+
+
+      <section id="sufficient">
+         <h3>Sufficient Techniques for Pointer Target Spacing</h3>
+
+
+         <ol>
+            <li>
+                <a href="../../techniques/css/target-padding.html" class="css">Adding padding around links</a>
+            </li>
+         </ol>
+
+      </section>
+
+      <section id="advisory">
+         <h3>Additional Techniques (Advisory) for Pointer Target Spacing</h3>
+
+      </section>
+
+      <section id="failure">
+         <h3>Failures for Pointer Target Spacing</h3>
+
+      </section>
+
+   </section>
+   <section id="resources">
+        <h2>Resources</h2>
+
+
+    </section>
+
+</body>
+</html>