Skip to content

Commit

Permalink
Typos
Browse files Browse the repository at this point in the history
  • Loading branch information
patrickhlauke committed Apr 14, 2023
1 parent 5c98491 commit 01c7f67
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions understanding/22/target-size-minimum.html
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ <h3>Spacing</h3>

<p>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.</p>

<p>When a target is smaller than 24 by 24 CSS pixels, it is <em>undersized</em>. In this case, we check if it at least has sufficient <em>spacing</em> by are drawing a 24 CSS pixel diameter circle over the undersized target, centered on the target's <a>bounding box</a>. 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 <em>not</em> 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.</p>
<p>When a target is smaller than 24 by 24 CSS pixels, it is <em>undersized</em>. In this case, we check if it at least has sufficient <em>spacing</em> by drawing a 24 CSS pixel diameter circle over the undersized target, centered on the target's <a>bounding box</a>. 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 <em>not</em> 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.</p>

<figure id="target-size-bounding-boxes">
<img src="img/target-size-bounding-boxes.svg" width="395" height="100" alt="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" />
Expand All @@ -121,7 +121,7 @@ <h3>Spacing</h3>
</figure>

<figure id="target-text-buttons-two-rows">
<img src="img/target-text-buttons-two-rows.svg" widht="785" height="105" alt="Two rows of buttons only 16 CSS pixels high, with no spacing between them." />
<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>
</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>
Expand Down

0 comments on commit 01c7f67

Please sign in to comment.