Merge pull request #3190 from w3c/patrickhlauke-tweak-target-size-min…

…imum-understanding

Update text alternative for target size (minimum) understanding illustrations

understanding/22/target-size-minimum.html

@@ -119,33 +119,33 @@ <h3>Spacing</h3>
 
             <p>We repeat this process for all adjacent undersized targets. To determine if an undersized target has sufficient spacing (to pass this Success Criterion's spacing exception), we check that the 24 CSS pixel diameter circle of the target does not intersect another target or the circle of any other adjacent undersized targets.</p>
 
-            <p>The following example shows a horizontal row of icon-based buttons. In the top row, the dimensions of each target are 24 by 24 CSS pixels, passing this Success Criterion. In the second row, the same targets are only 20 by 20 CSS pixels, but have a 4 CSS pixel space between them – as the target size is below 24 by 24 CSS pixels, these need to be evaluated against the Success Criterion's spacing exception, and they pass. In the last row, the targets are again 20 by 20 CSS pixels, but have no space between them – these fail the spacing exception, because when drawing the 24 CSS pixel diameter circles over the targets, the circles intersect.</p>
+            <p>The following example shows three versions of a horizontal row of six icon-based buttons. In the top row, the dimensions of each target are 24 by 24 CSS pixels, passing this Success Criterion. In the second row, the same targets are only 20 by 20 CSS pixels, but have a 4 CSS pixel space between them – as the target size is below 24 by 24 CSS pixels, these need to be evaluated against the Success Criterion's spacing exception, and they pass. In the last row, the targets are again 20 by 20 CSS pixels, but have no space between them – these fail the spacing exception, because when drawing the 24 CSS pixel diameter circles over the targets, the circles intersect.</p>
 
             <figure id="target-spacing-toolbar">
-                <img src="img/target-spacing-toolbar.svg" width="560" height="265" alt="Three rows showing a horizontal toolbar of icon-based controls with measurements. In the first row, the targets have a dimension of 24 by 24 CSS pixels, so pass. In the second row, the same toolbar is shown again, but overlaid with the 24 CSS pixel circles – the circles don't intersect, so pass. In the last row, the toolbar is shown again with the circles, but the circles intersect, so fail." />
+                <img src="img/target-spacing-toolbar.svg" width="560" height="265" alt="The first toolbar's targets have a dimension of 24 by 24 CSS pixels, so pass. The second toolbar, with smaller targets, shows 24 CSS pixel circles drawn on each target for assessment. The circles do not intersect and so the targets have enough space to pass. The third toolbar shows similar circles on the targets, but the circles intersect due to the lack of spacing between targets, so the toolbar fails." />
                 <figcaption>Three rows of targets, illustrating two ways of meeting this Success Criterion and one way of failing it (image shown to scale - <a href="img/target-spacing-toolbar.svg">see the scalable original version</a>)</figcaption>
             </figure>
             <p>The next two illustrations show sets of buttons which are only 16 CSS pixels tall. In the first set, there are no targets immediately above or below the buttons, so they pass. In the second illustration, there are further buttons, and they have been stacked on top of one another, resulting in a fail.</p>
             <figure id="target-text-buttons-one-row">
-                <img src="img/target-text-buttons-single-row.svg" width="785" height="105" alt="A row of buttons which are more that 44px wide and 16 CSS pixels high. There are no close targets above or below." />
-                <figcaption>The widths of the buttons with adjacent neighbors is above 24 CSS pixels, while the height is only 16 CSS pixels. However, the lack of adjacent targets above and below means that the targets pass this Success Criterion (image shown to scale - <a href="img/target-text-buttons-single-row.svg">see the scalable original version</a>)</figcaption>
+                <img src="img/target-text-buttons-single-row.svg" width="785" height="105" alt="A row of buttons which are more that 44px wide and 16 CSS pixels high. There are no close targets above or below. The buttons are overlaid with the 24 CSS pixel diameter circles, and do not intersect each other nor any other targets." />
+                <figcaption>While the height of the targets is only 16 CSS pixels, the lack of adjacent targets above and below means that the targets pass this Success Criterion (image shown to scale - <a href="img/target-text-buttons-single-row.svg">see the scalable original version</a>)</figcaption>
             </figure>
 
             <figure id="target-text-buttons-two-rows">
-                <img src="img/target-text-buttons-two-rows.svg" width="785" height="105" alt="Two rows of buttons only 16 CSS pixels high, with no spacing between them." />
-                <figcaption><strong>Fail:</strong> Two rows of buttons, both with a height of only 16 CSS pixels. The rows are close, with only a 1 CSS pixel gap between them, which means that the 24 CSS pixel spacing circles of the targets in one row will intersect the targets (and their circles, depending on their respective widths) in the other line, thus failing the Success Criterion (image shown to scale - <a href="img/target-text-buttons-two-rows.svg">see the scalable original version</a>)</figcaption>
+                <img src="img/target-text-buttons-two-rows.svg" width="785" height="105" alt="Two rows of buttons only 16 CSS pixels high, with no spacing between them. The buttons are overlaid with the 24 CSS pixel diameter circles, and all the circles either overlap another circle, or another target." />
+                <figcaption>Two rows of buttons, both with a height of only 16 CSS pixels. The rows are close, with only a 1 CSS pixel gap between them, which means that the 24 CSS pixel spacing circles of the targets in one row will intersect the targets (and their circles, depending on their respective widths) in the other line, thus failing the Success Criterion (image shown to scale - <a href="img/target-text-buttons-two-rows.svg">see the scalable original version</a>)</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 18 CSS pixels in height.</p>
             <figure id="target-dropdown">
-                <img src="img/target-dropdown.svg" width="690" height="210" alt="Two examples of a dropdown menu - a pass example with menu items 24 CSS pixels high, and a fail example with menu items only 18 CSS pixels high. One item has a 24 CSS pixel circle which intersects adjacent targets." />
-                <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 18 CSS pixels high, meaning that the 24 CSS pixel spacing circles of the targets in one row will intersect the adjacent menu item targets and circles (image shown to scale - <a href="img/target-dropdown.svg">see the scalable original version</a>)</figcaption>
+                <img src="img/target-dropdown.svg" width="690" height="210" alt="Two examples of a dropdown menu - a pass example with menu items 24 CSS pixels high, and a fail example with menu items only 18 CSS pixels high. One item has a 24 CSS pixel diameter circle which intersects adjacent targets." />
+                <figcaption>The menu items with a height of 24 CSS pixels pass. For the menu items that are only 18 CSS pixels high, the 24 CSS pixel spacing circles of the targets in one row will intersect the adjacent menu item targets and circles, and fail (image shown to scale - <a href="img/target-dropdown.svg">see the scalable original version</a>)</figcaption>
             </figure>
 
             <p>The following example has one large target (an image that links to a new page related to that image) and a very small second target (a control with a magnifier icon, to open a zoomed-in preview, possibly in a modal, of the image itself). In the top row, the small target overlaps - or, to be more technically accurate, clips - the large target. The small target itself has a size of 24 by 24 CSS pixels, so passes. In the second row, we see that if the second target is any smaller – in this case 16 by 16 CSS pixels – it fails the criterion, as the circle with a 24 CSS pixel diameter we draw over the small target will intersect the large target itself.</p>
 
             <figure id="target-large-small-clipping">
                 <img src="img/target-large-small-clipping.svg" width="460" height="320" alt="Two rows showing a small target clipping a large target" />
-                <figcaption>Two rows with a small target clipping (overlapping) a large target. In the first row, the 24 by 24 CSS pixel small target passes. In the second row, the 16 by 16 CSS pixel small target fails, since the 24 CSS pixel diameter circle used for undersized targets intersect the large target (image shown to scale - <a href="img/target-large-small-clipping.svg">see the scalable original version</a>)</figcaption>
+                <figcaption>The 24 by 24 CSS pixel small target passes, while the 16 by 16 CSS pixel small target fails, since the 24 CSS pixel diameter circle used for undersized targets intersect the large target (image shown to scale - <a href="img/target-large-small-clipping.svg">see the scalable original version</a>)</figcaption>
             </figure>
 
             <p>In the following example, we have the same two targets – a large target and a small target. This time, the small target touches/abuts the large target. If the small target is smaller than 24 by 24 CSS pixels, the circle with a 24 CSS pixel diameter we draw over the small target will intersect the large target itself, failing the requirement. The undersized target must be spaced further away from the large target until its circle doesn't intersect the large target.</p>