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:
+
+
Enlarge: A mechanism is available to change the CSS pixel size of each target, or its spacing, so there is an area with a width and height of at least 44 CSS pixels that includes it, and no other targets;
+
Inline: The target is in a sentence or block of text;
+
User agent: The size of the target is controlled by the user agent and is not modified by the author;
+
Essential: A particular presentation of the target is essential to the information being conveyed.
+
+
This criterion 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.
+
Are there issues with internationalization when describing inline links?
+
Are there issues with pop-over content overlapping targets triggering failures?
+
+
diff --git a/techniques/css/C42.html b/techniques/css/C42.html
new file mode 100644
index 0000000000..a5ba9c3e07
--- /dev/null
+++ b/techniques/css/C42.html
@@ -0,0 +1,113 @@
+
+
+
+ Using min-height and min-width to ensure sufficient target spacing
+
+
+
+
Using min-height and min-width to ensure sufficient target spacing
+
+
Metadata
+
+
CSS
+
+
+
+
When to Use
+
All technologies that support CSS and pointer input.
+
+
+
Description
+
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.
+
+
+
+
Examples
+
The following examples can be seen as rendered versions in the working examples.
+
+
+
Using a display value of inline-block and min-height / width
+
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.
+
+
+ Example of using CSS to ensure enough spacing around targets
+
+
Using a display value of flex and min-height / width
+
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.
+
+
+ Example of using CSS to ensure enough spacing within targets
+
+
For each target that cannot be enlarged by a mechanism, is not inline, and is not covered by the essential exception:
+
+
Check that the target has enough spacing so that the space around it measures at least 44px width and 44px height.
+
+
+
+
Expected Results
+
+
Check #1 is true
+
+
+
+
+
Related Techniques
+
+
+
+
Resources
+
+
+
+
diff --git a/techniques/css/img/pointer-spacing-1.png b/techniques/css/img/pointer-spacing-1.png
new file mode 100644
index 0000000000..3297ef987f
Binary files /dev/null and b/techniques/css/img/pointer-spacing-1.png differ
diff --git a/techniques/css/img/pointer-spacing-2.png b/techniques/css/img/pointer-spacing-2.png
new file mode 100644
index 0000000000..e124b426e1
Binary files /dev/null and b/techniques/css/img/pointer-spacing-2.png differ
diff --git a/understanding/22/img/pointer-target-example1.png b/understanding/22/img/pointer-target-example1.png
new file mode 100644
index 0000000000..8b8fff1022
Binary files /dev/null and b/understanding/22/img/pointer-target-example1.png differ
diff --git a/understanding/22/img/pointer-target-example2.png b/understanding/22/img/pointer-target-example2.png
new file mode 100644
index 0000000000..4822923cae
Binary files /dev/null and b/understanding/22/img/pointer-target-example2.png differ
diff --git a/understanding/22/img/pointer-target-example3.png b/understanding/22/img/pointer-target-example3.png
new file mode 100644
index 0000000000..d81f88136f
Binary files /dev/null and b/understanding/22/img/pointer-target-example3.png differ
diff --git a/understanding/22/img/pointer-target-example4.png b/understanding/22/img/pointer-target-example4.png
new file mode 100644
index 0000000000..0342f9c93a
Binary files /dev/null and b/understanding/22/img/pointer-target-example4.png differ
diff --git a/understanding/22/img/pointer-target-example5.png b/understanding/22/img/pointer-target-example5.png
new file mode 100644
index 0000000000..be4456a8a3
Binary files /dev/null and b/understanding/22/img/pointer-target-example5.png differ
diff --git a/understanding/22/pointer-target-spacing.html b/understanding/22/pointer-target-spacing.html
new file mode 100644
index 0000000000..877d5914ce
--- /dev/null
+++ b/understanding/22/pointer-target-spacing.html
@@ -0,0 +1,153 @@
+
+
+
+
+ Understanding Pointer Target Spacing
+
+
+
+
Understanding Pointer Target Spacing
+
+
+
Status
+
This understanding document is part of the draft WCAG 2.2 content. It may change or be removed before the final WCAG 2.2 is published.
+
+
+
+
+
Pointer Target Spacing Success Criterion text
+
+
Pointer Target Spacing
+
+
AA
+
New
+
+
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:
+
+
Enlarge: A mechanism is available to change the CSS pixel size of each target, or its spacing, so there is an area with a width and height of at least 44 CSS pixels that includes it, and no other targets;
+
Inline: The target is in a sentence or block of text;
+
User agent: The size of the target is controlled by the user agent and is not modified by the author;
+
Essential: A particular presentation of the target is essential to the information being conveyed.
+
+
This criterion 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 criterion to better complement the tap-heuristics used.
+
Are there issues with internationalization when describing inline links?
+
Are there issues with pop-over content overlapping targets triggering failures?
+
+
+
+
+
Intent of Pointer Target Spacing
+
+
The intent of this Success Criterion is to ensure targets can easily be activated without accidentally activating an adjacent target. When 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 targets will reduce the likelihood of accidentally activating the wrong control.
+
+
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 applies 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.
+
+
+
There are three exceptions:
+
+
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.
+
If the target is inline within a sentence there doesn’t need to be a minimum target size.
+
If the spacing of the targets is essential to the information being conveyed there doesn’t need to be a minimum target size.
+
+
+
The requirement is independent of the zoom factor of the page, when users zoom in the CSS pixel size of elements does not change. 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.
+
+
The requirement does not apply to the spacing of targets inside unstyled native elements. For example, when a default select element is used, the vertical spacing of option elements inside the select's dropdown list is exempt.
+
+
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.
+
+
As mobile devices generally have internal heuristics to identify which link is closest, spacing can work as effectively as a larger target size.
+
+
+
+ The dimension of each icon target in a row is 44 by 44 CSS pixels, so the targets pass this Success Criterion without additional spacing.
+
+
+
+
+ The dimension of each icon target in a row is 38 by 38 CSS pixels, so a spacing of 6 CSS pixels is required to arrive at 44 CSS pixels for the combined width and spacing of the target. No adjacent targets are present above and below, i.e., there is sufficient vertical spacing for the height of 38 CSS pixels to be sufficient.
+
+
+
+
+ The widths of the button with adjacent neighbors is at least 44 CSS pixels, while the height is only 22 CSS pixels. The target height combined with the vertical spacing above and below exceeds 44 CSS pixels, therefore, the targets pass this Success Criterion.
+
+
+
+
+ Fail: Two rows of buttons, all with a height of only 20 CSS pixels. In the top row, buttons all have a width of more than 44 CSS pixels. For the top row, targets above and below are in close proximity. The top spacing of the first row is 4 px while the bottom spacing is 2 px, which adds up to 26 px for target height and vertical spacing combined. Therefore, the buttons in the top row fail the Success Criterion. The button "Pop" in the second row is only 32px wide with no horizontal spacing, so it also fails the Success Criterion even when there is sufficient space below to meet the vertical spacing requirement.
+
+
+
Where targets are embedded inside other targets, the inner target either needs a size of at least 44 x 44 CSS pixels or must be placed at the edge or corner to make sure that there is sufficient adjacent spacing in each dimension.
+
+
+
+ Three examples of a person's profile image, which is supposed to be a target leading to another page, and a magnifying glass icon, which is supposed to open a lightbox view of the profile image. In the first example, the magnifying icon is outside the picture and passes. In the second example, the icon overlaps with the top-left corner of the image, but passes due to sufficient spacing top and left. In the third example, the icon sits inside the linked image. Since it is surrounded by an active click area, the icon target is not large enough to pass the success criterion.
+
+
+
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.
+
+
Where user-agents control the size of a target, such as the options in a select drop-down, and the author has not tried to change the size of target with size or padding adjustments, the target is exempted from this criterion. It would be beneficial for users if the minimum size & spacing requirement is meet, but where the user-agent has defined the target it is not the authors responsibility.
+
+
+
+
+
Benefits of Pointer Target Spacing
+
Having targets with 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:
+
+
Users who use a mobile device where the touch screen is the primary mode of interaction;
+
Users with mobility impairments such as hand tremors;
+
Users who use a device in environments where they are exposed to shaking such as public transportation;
+
Users who have difficulty with fine motor movements;
+
Users who access a device using one hand;
+
Users with large fingers, or who are operating the device with only a part of their finger or knuckle.
+
+
+
+
+
+
Examples of Pointer Target Spacing
+
+
+
Three buttons are on-screen and the target area of each button is 44 by 44 CSS pixels. Since the target size itself is 44 x 44 px, no additional spacing is required, the Success Criterion passes.
+
A row of buttons, each of which has a horizontal width of more than 44 px, but a height of only 30 px. Since there is sufficient spacing above and below the row of buttons, the Success Criterion passes.
+
Links within a paragraph of text have varying target dimensions. Links within paragraphs of text do not need to meet the 44 by 44 CSS pixels requirements, so the Success Criterion passes.
Example 1 (display: inline-block, min-height: 44px and min-width: 44px set on list items inside pagination menu)
+
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.
1838. Condition: Very Good. Published by Belmont Books, 1969.
+
+
+
+
+
Example 2 (display: flex, min-height: 44px and min-width: 44px set on links inside pagination menu)
+
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 the AAA Success Criterion 2.5.5 Target Size.
+ 
+ 
+ 
+ 
+ 
+