Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Aligning target size SCs #3097

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions guidelines/sc/21/target-size-enhanced.html
Expand Up @@ -4,10 +4,10 @@ <h4>Target Size (Enhanced)</h4>

<p class="conformance-level">AAA</p>

<p>The size of the <a>target</a> for <a>pointer inputs</a> is at least 44 by 44 <a>CSS pixels</a> except when:</p>
<p>The size of the <a>target</a> for <a>pointer inputs</a> is at least 44 by 44 <a>CSS pixels</a> except where:</p>
<dl>
<dt>Equivalent</dt>
<dd>The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels;</dd>
<dd>The function can be achieved through a different control on the same page that meets this criterion.</dd>
<dt>Inline</dt>
<dd>The target is in a sentence or block of text;</dd>
<dt>User Agent Control</dt>
Expand Down
19 changes: 12 additions & 7 deletions guidelines/sc/22/target-size-minimum.html
Expand Up @@ -6,13 +6,18 @@ <h4>Target Size (Minimum)</h4>
<p class="change">New</p>

<p>The size of the <a>target</a> for <a>pointer inputs</a> is at least 24 by 24 <a>CSS pixels</a>, except where:</p>
<ul>
<li><strong>Spacing:</strong> The target does not overlap any other target and has a <a>target offset</a> of at least 24 CSS pixels to every adjacent target;</li>
<li><strong>Equivalent:</strong> The function can be achieved through a different control on the same page that meets this criterion.</li>
<li><strong>Inline:</strong> The target is in a sentence, or is in a bulleted or numbered list, or its size is otherwise constrained by the line-height of non-target text;</li>
<li><strong>User agent control:</strong> The size of the target is determined by the user agent and is not modified by the author;</li>
<li><strong>Essential:</strong> A particular presentation of the target is <a>essential</a> or is legally required for the information being conveyed;</li>
</ul>
<dl>
<dt>Spacing:</dt>
<dd>The target does not overlap any other target and has a <a>target offset</a> of at least 24 CSS pixels to every adjacent target;</dd>
<dt>Equivalent:</dt>
<dd>The function can be achieved through a different control on the same page that meets this criterion.</dd>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

change . at the end of this to ;

<dt>Inline:</dt>
<dd>The target is in a sentence, or is in a bulleted or numbered list, or its size is otherwise constrained by the line-height of non-target text;</dd>
<dt>User agent control:</dt>
<dd>The size of the target is determined by the user agent and is not modified by the author;</dd>
<dt>Essential:</dt>
<dd>A particular presentation of the target is <a>essential</a> or is legally required for the information being conveyed;</dd>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

change the ; at the end of this to .

</dl>
<p class="note">Targets that allow for values to be selected spatially based on position within the target are considered one target for the purpose of the success criterion. Examples include sliders with granular values, color pickers displaying a gradient of colors, or editable areas where you position the cursor.</p>
<p class="note">For inline targets the line-height should be interpreted as perpendicular to the flow of text. For example, in a language displayed vertically, the line-height would be horizontal.</p>

Expand Down