Improve readability of Understanding 2.5.8 - target size minimum text (…

…#3699)

Closes #3473 

The aim of this PR is to adjust the wording and formatting of the
understanding page for 2.5.8. I've tried to introduce more simplified,
self-contained sentences in order to improve the readability and flow of
the page. This includes:

- Introducing more punctuation for natural breaks
- Removing some repetition of information to reduce the length of
sentences; and
- Introducing unordered lists for blocks of text that discuss more than
two different examples.

Based on online tests, this has improved the readability of the
document.

---------

Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
Co-authored-by: Mike Gower <mikegower@gmail.com>
Co-authored-by: Hidde de Vries <160571138+hidde-logius@users.noreply.github.com>
Co-authored-by: DJ Chase <u9000@posteo.mx>

understanding/22/target-size-minimum.html

@@ -31,7 +31,7 @@ <h3>Exceptions</h3>
             <ul>
                 <li><strong>Spacing:</strong> Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the <a>bounding box</a> of each, the circles do not intersect another target or the circle for another undersized target.</li>
                 <li><strong>Equivalent:</strong> In cases where a target does not have a size equivalent to 24 by 24 CSS pixels, but there is another control that can achieve the underlying function that <em>does</em> meet the minimum size, the target can be excepted based on the "Equivalent" exception.</li>
-                <li><strong>Inline:</strong> The Success Criterion does not apply to inline targets in sentences, or where the size of the target is constrained by the line-height of non-target text. 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, guaranteeing that undersized links in adjacent lines of text fulfill the spacing exception (their 24 CSS pixel diameter circle don't intersect any other links or their circles) would require a large line height which can be undesirable in many design contexts.</li>
+                <li><strong>Inline:</strong> The success criterion does not apply to inline targets in sentences, or where the size of the target is constrained by the line-height of non-target text. 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. Applying this success criterion when multiple links are embedded in blocks of smaller text often results in an undesirable design. It is more important to set the line height to a value that improves readability.</li>
                 <li><strong>User agent control:</strong> Browsers have default renderings of some controls, such as the days of the month calendar in an <code>&lt;input type="date"&gt;</code>. As long as the author has not modified the user agent default, the target size for a <q>User agent control</q> is excepted.</li>
                 <li><strong>Essential:</strong> If the size and spacing of the targets is fundamental to the information being conveyed, the <q>Essential</q> 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 spacing 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. A similar example is an interactive data visualization where targets are necessarily dense. Another example is where jurisdictions legally require online forms to replicate paper forms, which can impose constraints on the size of targets. In such jurisdictions, any legal requirement to replicate small targets can be considered essential. When the essential exception is applicable, authors are strongly encouraged to provide equivalent functionality through alternative means to the extent practical.</li>
             </ul>
@@ -61,7 +61,7 @@ <h3>Size requirement</h3>
                 <figcaption>The rounded corners do not leave sufficient space to draw a 24 by 24px square inside the target, making the target <em>undersized</em>. Depending on the spacing to other targets, it may still pass if it has sufficient clearance (image shown at 1:1 and 2:1 scale - <a href="img/target-size-undersized-rounded.svg">see the scalable original version</a>)</figcaption>
             </figure>
 
-            <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>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>The requirement does not apply to targets while they are obscured by content displayed as a result of a user interaction or scripted behavior of content, for example:</p>
 
@@ -90,7 +90,12 @@ <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 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>
+            <p>The following example shows three versions of a horizontal row of six icon-based buttons:</p>
+            <ul>
+                <li>In the top row, the dimensions of each target are 24 by 24 CSS pixels, passing this Success Criterion.</li>
+                <li>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.</li>
+                <li>In the last row, the targets are again 20 by 20 CSS pixels, but have no space between them – these fail the spacing exception. This is because, when drawing the 24 CSS pixel diameter circles over the targets, the circles intersect.</li>
+            </ul>
 
             <figure id="target-spacing-toolbar">
                 <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." />
@@ -104,15 +109,16 @@ <h3>Spacing</h3>
 
             <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. 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>
+                <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. This means that the 24 CSS pixel spacing circles of the targets in one row will <em>intersect</em> 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>
+            <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 has a 24 CSS pixel height (text and padding), and so passes. In the second illustration, the same menu is expanded, but the menu items only achieve 18 CSS pixels in height, and so fail.</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 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>
+            <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).</p>
+            <p>In the top row, the small target overlaps - or, to be more technically accurate, <em>clips</em> - 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" />