w3c
diff --git a/‎understanding/22/img/pointer-target-example3-v2.png
14.8 KB b/‎understanding/22/img/pointer-target-example3-v2.png
14.8 KB
diff --git a/‎understanding/22/img/pointer-target-example4-v2.png
13.1 KB b/‎understanding/22/img/pointer-target-example4-v2.png
13.1 KB
diff --git a/‎understanding/22/target-size-minimum.html
Lines changed: 20 additions & 22 deletions b/‎understanding/22/target-size-minimum.html
Lines changed: 20 additions & 22 deletions
@@ -28,7 +28,7 @@ Target Size (Minimum)
                 <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">Targets that allow for values to be selected spatially based on position within the target are considered one target for the purpose of the success criterion. Examples include sliders with granular values, color pickers displaying a gradient of colors, or editable areas where you position the cursor.p>
+            <p class="note">Targets that allow for values to be selected spatially based on position within the target are considered one target for the purpose of the Success Criterion. Examples include sliders with granular values, color pickers displaying a gradient of colors, or editable areas where you position the cursor.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>
             <dl><dt class="new"><dfn data-lt="target offsets">target offsetdfn>dt>
@@ -42,50 +42,48 @@ Target Size (Minimum)
     <section id="intent">
         <h2>Intent of Target Size (Minimum)h2>
 
-        <p>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 sufficient size, or sufficient spacing between targets will reduce the likelihood of accidentally activating the wrong control.p>
+        <p>The intent of this Success Criterion is to help ensure targets can be easily 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 sufficient size, or sufficient spacing between targets, will reduce the likelihood of accidentally activating the wrong control.p>
 
-        <p>This success criterion defines a minimum size, using larger sizes will help many people use targets more easily. Meeting <a href="../21/target-size-enhanced.html">2.5.5 Target Size (Enhanced)a> is recommended whenever possible.p>
+        <p>This Success Criterion defines a <em>minimumem> size; using larger sizes will help many people use targets more easily. Meeting <a href="../21/target-size-enhanced.html">2.5.5 Target Size (Enhanced)a> is recommended whenever possible.p>
 
-        <p>The requirement is for targets to be at least 24 CSS pixels in size, or for their size plus spacing be at least 24 CSS pixels. The <a>target offseta> is the size plus spacing between targets, measured from the farthest point of the target to the nearest point of each adjacent target. For example, a target of 20 by 20 CSS pixels would meet the requirement if it had a spacing of 4 px to any adjacent target. If the target is 24 by 24 CSS pixels or larger, no spacing between it and adjacent targets would be required.p>
+        <p>The requirement is for targets to be at least 24 by 24 CSS pixels in size. There are three exceptions:p>
 
-        
-        <p>There are three exceptions:p>
         <ol>
-            <li>If a target is smaller than 24 by 24 CSS pixels but has sufficient spacing, it passes. The spacing is sufficient if the offset between the farthest edge of the target to the nearest edge of any neighboring target is 24 CSS pixels or greater. What edge of the target is farthest depends on the position of the neighboring target to which the offset is established. For example, if the neighboring target is above it, the farthest edge would be the bottom of the target, and the offset would be measured from this bottom edge to the bottom edge of the neighboring target above.li>
-            <li>The Success Criterion does not apply to inline targets in blocks of text – for example, text links inside a sentence or paragraph. When multiple links are embedded in blocks of texts in smaller text sizes, maintaining a 24 CSS pixels offset between links in adjacent lines of text would require a large line height which can be undesirable in many design contexts. Also, inline links such as footnote numbers common in scientific texts may sometimes have a width of well below 24 CSS pixels. Placed in a sequence, these links often have a horizontal offset of less than 24 CSS pixels. Stacked lists of links, as in navigation structures, do not count as inline links.li>
-            <li>If the spacing of the targets is essential to the information being conveyed, the "Essential" exception applies. For example, in digital maps, the position of pins is analog to the position of places shown on the map. If there are many pins close together, the offset between pins and neighboring pins will often be below 24 CSS pixels. It is essential to show the pins at the correct map location, therefore the Essential exception applies.li>
+            <li>If a target is smaller than 24 by 24 CSS pixels but has sufficient spacing, it passes. The spacing is sufficient if the offset between targets is at least 24 CSS pixels. Target offset measures the distance between targets, measured from the farthest point of one target to the nearest point of the adjacent target, and is assessed for each of the adjacent targets. What edge of the target is <em>farthestem> depends on the relative position of the neighboring target. For example, if considering distance above the target, the farthest edge would be the bottom of the target, and the offset would be measured from this bottom edge to the bottom edge of the neighboring target above. Note that where the targets differ in size or shape, the offset between targets may also differ. The offset distance must be at least 24 CSS pixels in all cases to fall under this exception.li>
+            <li>The Success Criterion does not apply to inline targets in blocks of text – for example, text links inside a sentence or paragraph. This exception is allowed because text reflow based on viewport size makes it impossible for authors to anticipate where links may be positioned relative to one another. When multiple links are embedded in blocks of texts in smaller text sizes, maintaining a 24 CSS pixels offset between links in adjacent lines of text would require a large line height which can be undesirable in many design contexts. Also, inline numeric footnotes common in scientific texts may sometimes have a width well below 24 CSS pixels. Note: Stacked lists of links, as in navigation structures, do not count as inline links. Authors can anticipate the relative position of these links and accommodate sufficient target spacing.li>
+            <li>If the spacing of the targets is essential to the information being conveyed, the "Essential" exception applies. For example, in digital maps, the position of pins is analogous to the position of places shown on the map. If there are many pins close together, the offset between pins and neighboring pins will often be below 24 CSS pixels. It is essential to show the pins at the correct map location, therefore the Essential exception applies.li>
         ol>
 
         <p>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.p>
 
-        <p>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.p>
-      
-        <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>
+        <p>While the Success Criterion primarily helps touch users by providing target sizing to prevent accidental triggering of adjacent targets, it is also useful for mouse or pen users. It reduces the chances of erroneous activation due to either a tremor or reduced precision, whether because of reduced fine motor control or input imprecision.p>
+           <h3>Spacing versus sizeh3>
+        <p>Spacing, alone and in conjunction with size, can improve user experience. There is less chance of accidentally activating a neighboring target if a target is not immediately adjacent to another. The value of spacing around targets is enhanced by touchscreen devices and user agents, which generally have internal heuristics to identify which link or control is closest to a user's touch interaction.p>
+        <p>The following illustrate a variety of situations using size and spacing of targets. In the top line of icons, the dimensions of each icon target are 44 by 44 CSS pixels with no space in between. This amply passes this Success Criterion and is actually sufficient to meet the AAA requirement for <a href="../21/target-size-enhanced.html">Target Size (Enhanced)a>. In the next row, the dimensions of each icon target are 24 by 24 CSS pixels with no space in between, passing this Success Criterion. In the third row, the the same icon targets are only 20 by 20 CSS pixels but they have a 4 CSS pixel space in between, passing this Success Criterion via the spacing exception. In the last row, the the same icon targets are only 20 by 20 CSS pixels and have no space in between, failing this Success Criterion.p>
 
         <figure id="pointer-target-24x24">
             <img src="img/pointer-target-example1-full.png" alt="Four rows of icons with measurements, the first three passing,the last failing the requirement." />
-            <figcaption>In the top line of icons, the dimension of each icon target is 44 by 44 CSS pixels with no space in between, amply passing this Success Criterion. In the next row, the dimension of each icon target is 24 by 24 CSS pixels with no space in between, passing this Success Criterion. In the next row, the the same icon targets are only 20 by 20 CSS pixels but they have 4px space inbetween, passing this Success Criterion. In the last row, the the same icon targets are only 20 by 20 CSS pixels and have no space inbetween, failing this Success Criterion. figcaption>
+            <figcaption>Four rows of targets, illustrating three ways of meeting this Success Criterion and one way of failing it.figcaption>
         figure>
-
+<p>When targets are not 24 by 24 CSS pixels, it is still possible to meet this Success Criterion. The next two illustrations show sets of buttons which are only 20 CSS pixels tall. In the first set, there are no targets immediately above or below the buttons, so they pass. In the second illustration, the buttons have been stacked on top of one another, resulting in a fail.p>
         <figure id="pointer-target-44x20-spacing">
-            <img src="img/pointer-target-example3a.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 button with adjacent neighbors is above 24 CSS pixels, while the height is only 22 CSS pixels. However, the target height combined with the vertical spacing above and below exceeds 24 CSS pixels, therefore, the targets pass this Success Criterion.figcaption>
+            <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-example4a.png" alt="A row of buttons only 20 CSS pixels high, with other targets flush below, and only 2px spacing above." />   
-            <figcaption><strong>Fail:strong> Two rows of buttons, all with a height of only 20 CSS pixels. In the top row, buttons all have sufficient width (above 24 CSS pixels). For the top row, targets below are flush, with no gap. The gap to the links above is o
-              nly 2px wide. Therefore, the buttons in the top row fail the Success Criterion. figcaption>
+            <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 usq> 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." />   
             <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 loupe icon. Measuring from the top of the magnifying 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 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">
             <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 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. 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 loupe icon. Measuring from the top of the loupe 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 loupe icon sits inside the linked image. Since it is surrounded by a larger target, the icon target fails - the offset to the surrounding and immediately adjacent image target is only 20 CSS pixels at top and bottom.figcaption>
+          <figcaption>Three illustrations showing the offsets between two targets when they abut and overlap.figcaption>
       figure>
 
         <figure id="pointer=target-inline-links">