From acb1448b329b4644323ab5320f6da3bd9faa1982 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 15 Apr 2023 00:41:06 +0100 Subject: [PATCH] Typos --- understanding/22/target-size-minimum.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/understanding/22/target-size-minimum.html b/understanding/22/target-size-minimum.html index d8cc69ac2d..0e34d92c07 100644 --- a/understanding/22/target-size-minimum.html +++ b/understanding/22/target-size-minimum.html @@ -99,11 +99,11 @@

Spacing

When the minimum size for a target is not met, spacing can at least improve the user experience. There is less chance of accidentally activating a neighboring target if a target is not immediately adjacent to another. Touchscreen devices and user agents generally have internal heuristics to identify which link or control is closest to a user's touch interaction - this means that sufficient spacing between targets can work as effectively as a larger target size itself.

-

When a target is smaller than 24 by 24 CSS pixels, it is undersized. In this case, we check if it at least has sufficient spacing by are drawing a 24 CSS pixel diameter circle over the undersized target, centered on the target's bounding box. For rectangular targets, the bounding box coincides with the target itself – thus, the circle is placed on the center of the target. If the target is not rectangular – for instance, if the target has been clipped, given rounded corners, or if it's a more complex clickable SVG shape – we need to first determine the bounding box, and then find the box's center. Note that for concave shapes, the center of the bounding box may be outside of the target itself. Now, we center the circle on the center of the bounding box.

+

When a target is smaller than 24 by 24 CSS pixels, it is undersized. In this case, we check if it at least has sufficient spacing by drawing a 24 CSS pixel diameter circle over the undersized target, centered on the target's bounding box. For rectangular targets, the bounding box coincides with the target itself – thus, the circle is placed on the center of the target. If the target is not rectangular – for instance, if the target is clipped, has rounded corners, or if it's a more complex clickable SVG shape – we need to first determine the bounding box, and then find the box's center. Note that for concave shapes, the center of the bounding box may be outside of the target itself. Now, we center the circle on the center of the bounding box.

Three undersized targets - a square target, a convex target, and a concave target; the concave and convex targets have a bounding box around them; all three targets have a 24 CSS pixel circle centered on the center of their bounding box -
For a square/rectangular target, the 24 CSS pixel diameter circle is centered on the target itself. For convex and concave targets, it is centered on the bounding box of the shape. Note the concave target, where the center of the bounding box is outside of the actual target (image shown to scale - see the scalable original version)
+
For a square/rectangular target, the 24 CSS pixel diameter circle is centered on the target itself. For convex and concave targets, it is centered on the bounding box of the shape. Note the concave target, where in this case the center of the bounding box is outside of the actual target (image shown to scale - see the scalable original version)

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.

@@ -121,7 +121,7 @@

Spacing

- Two rows of buttons only 16 CSS pixels high, with no spacing between them. + Two rows of buttons only 16 CSS pixels high, with no spacing between them.
Fail: 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 - see the scalable original version)

The following two illustrations show how menu items can be adjusted to properly meet this requirement. In the first illustration, the About us 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.