Skip to content

Commit

Permalink
Change the undersized example
Browse files Browse the repository at this point in the history
no circle, as that then confuses matters with the spacing circles later
  • Loading branch information
patrickhlauke committed Apr 12, 2023
1 parent ba39a40 commit 478c65f
Show file tree
Hide file tree
Showing 5 changed files with 53 additions and 4 deletions.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
49 changes: 49 additions & 0 deletions understanding/22/img/target-size-undersized-rounded.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions understanding/22/target-size-minimum.html
Original file line number Diff line number Diff line change
Expand Up @@ -72,11 +72,11 @@ <h3>Size requirement</h3>
<figcaption>So long as there is a solid 24 by 24px square within the target, it meets the size requirement of the criterion and passes (image shown to scale - <a href="img/target-size-skewed.svg">see the scalable original version</a>)</figcaption>
</figure>

<p>If a target is not large enough to allow for a 24 by 24px square to be drawn inside it, it is considered <strong>undersized</strong>. It does not pass the primary requirement of the Success Criterion, but if it has sufficient space around it without adjacent targets, it may pass the criterion thanks to the Spacing exception (below).</p>
<p>If a target is not large enough to allow for a 24 by 24px square to be drawn inside it, it is considered <em>undersized</em>, and does not pass the size requirement of the Success Criterion. However, if it has sufficient space around it without adjacent targets, it may still pass the criterion thanks to the spacing exception (below).</p>

<figure id="basic-target-size-circle">
<img src="img/target-size-requirement-circle.png" alt="A circle with a diameter of 24px, but not filling up a 24px square." />
<figcaption>The rounded corners of the circle do not fill the 24 by 24px square so the target <strong>does not pass</strong> the size requirement of the criterion. However, depending on the spacing to other targets, it may pass by the spacing exception.</figcaption>
<figure id="target-size-undersized-rounded">
<img src="img/target-size-undersized-rounded.svg" width="250" height="105" alt="A circle with a diameter of 24px, but not filling up a 24px square." />
<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>
Expand Down

0 comments on commit 478c65f

Please sign in to comment.