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.

Sign up for GitHub

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

Restore Target Size (Enhanced) Understanding Doc content #3638

Merged
merged 5 commits into from
May 14, 2024
Merged

Restore Target Size (Enhanced) Understanding Doc content #3638

Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4cf0929
Update target-size-enhanced.html
giacomo-petri Jan 15, 2024
80ed26f
Update target-size-enhanced.html
giacomo-petri Jan 16, 2024
e581dea
Merge branch 'main' into giacomo-petri-target-size-enhanced-patch
bruce-usab Apr 12, 2024
1a0fad0
Update target-size-enhanced.html removing last sentence from Example 3.
bruce-usab May 13, 2024
b3c079a
Update understanding/21/target-size-enhanced.html
mbgower May 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
178 changes: 97 additions & 81 deletions understanding/21/target-size-enhanced.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,87 +7,103 @@
</head>
<body>
<h1>Understanding SC 2.5.5 Target Size (Enhanced)</h1>

<section id="brief">
<h2>In brief</h2>
<dl>
<dt>Goal</dt><dd>Controls can be operated more easily, especially on touch screens.</dd>
<dt>What to do</dt><dd>Make custom targets at least 44 by 44 pixels.</dd>
<dt>Why it's important</dt><dd>Some people cannot tap small objects.</dd>
</dl>

</section>

<section id="intent">
<h2>Intent</h2>
<p>The intent of this success criterion is to help users who may have trouble activating a small target because of hand tremors, limited dexterity or other reasons. If the target is too small, it may be difficult to aim at the target. Mice and similar pointing devices can be hard to use for these users, and a larger target will help them greatly in having positive outcomes on the web page.</p>
<p>Touch is particularly problematic as it is an input mechanism with coarse precision. Users lack the same level of fine control as on inputs such as a mouse or stylus. A finger is larger than a mouse pointer, and generally obstructs the user's view of the precise location on the screen that is being touched/activated.</p>
<p>The issue can be further complicated for responsive/mobile sites which need to accommodate different types of fine and coarse inputs (e.g. a site that can be accessed both on a traditional desktop/laptop with a mouse, as well as on a tablet or mobile phone with a touch screen).</p>
<p>While this criterion defines a minimum target size, it is recommended that larger sizes are used to reduce the possibility of unintentional actions. This is particularly relevant if any of the following are true:</p>
<ul>
<li>the control is used frequently;</li>
<li>the result of the interaction cannot be easily undone;</li>
<li>the control is positioned where it will be difficult to reach, or is near the edge of the screen;</li>
<li>the control is part of a sequential task.</li>
</ul>
<section id="benefits">
<h3>Benefits</h3>
<ul>
<li>Users who use a mobile device where touch screen is the primary mode of interaction</li>
<li>Users with mobility impairments, such as hand tremors</li>
<li>Users who find fine motor movements difficult</li>
<li>Users who access a device using one hand</li>
<li>Users with large fingers, or who are operating the device with only a part of their finger or knuckle</li>
<li>Users who have low vision may better see the target</li>
</ul>
</section>
<section id="brief">
<h2>In brief</h2>
<dl>
<dt>Goal</dt><dd>Controls can be operated more easily, especially on touch screens.</dd>
<dt>What to do</dt><dd>Make custom targets at least 44 by 44 pixels.</dd>
<dt>Why it's important</dt><dd>Some people cannot tap small objects.</dd>
</dl>
</section>
<section id="intent">
<h2>Intent</h2>
<p>The intent of this success criterion is to help users who may have trouble activating a small target because of hand tremors, limited dexterity or other reasons. If the target is too small, it may be difficult to aim at the target. Mice and similar pointing devices can be hard to use for these users, and a larger target will help them greatly in having positive outcomes on the web page.</p>
Copy link

Choose a reason for hiding this comment

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

Line 20: Add Oxford comma after "dexterity".

<p>Touch is particularly problematic as it is an input mechanism with coarse precision. Users lack the same level of fine control as on inputs such as a mouse or stylus. A finger is larger than a mouse pointer, and generally obstructs the user's view of the precise location on the screen that is being touched/activated.</p>
<p>The issue can be further complicated for responsive/mobile sites which need to accommodate different types of fine and coarse inputs (e.g. a site that can be accessed both on a traditional desktop/laptop with a mouse, as well as on a tablet or mobile phone with a touch screen).</p>
Copy link

Choose a reason for hiding this comment

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

Line 22:

  1. Replace the slashes with the word "or" to improve readability
  2. Replace "which" with "that" (since it's followed by a restrictive clause)
  3. Replace "e.g." with "for example" for plainer language
  4. Consider rewriting this as two sentences to decrease the cognitive load

As one sentence:
"The issue can be further complicated for responsive and mobile sites that need to accommodate different types of fine and coarse inputs (for example, a site that can be accessed on a traditional desktop or laptop with a mouse, as well as on a tablet or mobile phone with a touch screen)."

Copy link
Contributor

@mbgower mbgower May 15, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Thanks, @frankie-wolf.
The purpose of this PR was just to restore accidentally deleted material, not to alter that content.
There have been a number of suggestions by people of ways to improve the content, and our intention is to create a second PR which improves the information, not just restores it!

Incidentally, as a complete aside, I know Gregg is a big advocate of always swapping out "that" for "which" in restrictive clauses, but there is fairly good support for a versatile use of which with the real determinant being whether or not there are commas. For a fairly succinct history, please see https://www.merriam-webster.com/grammar/when-to-use-that-and-which#:~:text=However%2C%20if%20the%20source%20of,to%20introduce%20a%20nonrestrictive%20clause.

<p>While this criterion defines a minimum target size, it is recommended that larger sizes are used to reduce the possibility of unintentional actions. This is particularly relevant if any of the following are true:</p>
<ul>
<li>the control is used frequently;</li>
<li>the result of the interaction cannot be easily undone;</li>
<li>the control is positioned where it will be difficult to reach, or is near the edge of the screen;</li>
<li>the control is part of a sequential task.</li>
</ul>
<p>The targets on a screen can have different purposes and uses, and this Success Criterion specifies how each is to be handled.</p>
bruce-usab marked this conversation as resolved.
Show resolved Hide resolved
<p><strong>Equivalent targets:</strong> If there is more than one target on a screen that performs the same action, only one of the targets need to meet the target size of 44 by 44 CSS pixels.</p>
<p><strong>Inline:</strong> Content displayed can often be reflowed based on the screen width available. This is known as responsive design and makes it easier to read since you do not need to scroll both horizontally and vertically. In reflowed content, the targets can appear anywhere on a line and can change position based on the width of the available screen. Since targets can appear anywhere on the line, the size cannot be larger than the available text and spacing between the sentences or paragraphs, otherwise the targets could overlap. It is for this reason targets which are contained within one or more sentences are excluded from the target size requirements.</p>
bruce-usab marked this conversation as resolved.
Show resolved Hide resolved
<div class="note">
<div role="heading" class="note-title marker" aria-level="3">Note</div>
<p>If the target is the full sentence and the sentence is not in a block of text, then the target needs to be at least 44 by 44 CSS pixels.</p>
</div>
<div class="note">
<div role="heading" class="note-title marker" aria-level="3">Note</div>
<p>A footnote or an icon within or at the end of a sentence is considered to be part of a sentence and therefore are excluded from the minimum target size.</p>
</div>
<p><strong>User Agent Control:</strong> If the size of the target is not modified by the author through CSS or other size properties, then the target does not need to meet the target size of 44 by 44 CSS pixels.</p>
<p><strong>Essential:</strong> If the target is required to be a particular target size and cannot be provided in another way, while changing it would essentially change the information or functionality of the content, then the target does not need to meet the target size of 44 by 44 CSS pixels.</p>
</section>
<section id="examples">
<h2>Examples</h2>
<ul>
<li><strong>Example 1: Buttons</strong><br/>
Three buttons are on-screen and the target area of each button is 44 by 44 CSS pixels.</li>
<section id="benefits">
<h3>Benefits</h3>
<ul>
<li>Users who use a mobile device where touch screen is the primary mode of interaction</li>
<li>Users with mobility impairments, such as hand tremors</li>
<li>Users who use a mobile device in environments where they are exposed to shaking such as public transportation</li>
<li>Users who find fine motor movements difficult</li>
<li>Users who access a device using one hand</li>
<li>Users with large fingers, or who are operating the device with only a part of their finger or knuckle</li>
<li>Users who have low vision may better see the target</li>
</ul>
</section>
<section id="resources">
<h2>Resources</h2>
<p class="instructions"></p>
<ul>
<li><a href="https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/">Apple touch target size recommendations</a></li>
<li><a href="https://docs.microsoft.com/en-us/windows/apps/design/input/guidelines-for-targeting">Windows UWP Guidelines for touch targets</a></li>
<li><a href="https://material.io/design/layout/spacing-methods.html#touch-targets">Google Material Design Touch targets</a></li>
<li><a href="https://web.dev/accessible-tap-targets/">web.dev Accessible tap targets</a></li>
<li><a href="http://touchlab.mit.edu/publications/2003_009.pdf">Human Fingertips to Investigate the Mechanics of Tactile Sense (PDF)</a></li>
<li><a href="https://www.cs.umd.edu/hcil/trs/2006-11/2006-11.htm">One-Handed Thumb Use on Small Touchscreen Devices</a></li>
</ul>
</section>
<section id="techniques">
<h2>Techniques</h2>
<p>Each numbered item in this section represents a technique or combination of techniques that the <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> Working Group deems sufficient for meeting this Success Criterion. However, it is not necessary to use these particular techniques. For information on using other techniques, see <a href="understanding-techniques" class="understanding">Understanding Techniques for WCAG Success Criteria</a>, particularly the "Other Techniques" section.</p>
<section id="sufficient">
<h3>Sufficient</h3>
<p class="instructions">Techniques that are sufficient to meet the Guideline or Success Criterion.</p>
<section class="situation">
<ul>
<li>Ensuring that targets are at least 44 by 44 CSS pixels.</li>
<li>Ensuring inline links provide sufficiently large activation target.</li>
</ul>
</section>
</section>
<section id="advisory">
<h2>Advisory</h2>
<p class="instructions">Although not required for conformance, the following additional techniques should be considered in order to make content more accessible. Not all techniques can be used or would be effective in all situations.</p>
<ul>
<li>none documented</li>
</ul>
</section>
<section id="failure">
<h2>Failure</h2>
<p class="instructions">The following are common mistakes that are considered failures of Success Criterion 2.5.5 by the <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> Working Group.</p>
<ul>
<li>Failure of success criterion 2.5.5 due to target being less than 44 by 44 CSS pixels.</li>
</ul>
</section>
</section>
</body>
</section>
<section id="examples">
<h2>Examples</h2>
<ul>
<li><strong>Example 1: Buttons</strong><br> Three buttons are on-screen and the touch target area of each button is 44 by 44 CSS pixels.</li>
<li><strong>Example 2: Equivalent target</strong><br> Multiple targets are provided on the page that perform the same function. One of the targets is 44 by 44 CSS pixels. The other targets do not have a minimum touch target of 44 by 44 CSS pixels.</li>
bruce-usab marked this conversation as resolved.
Show resolved Hide resolved
<li><strong>Example 3: Anchor Link</strong><br> The target is an in-page link and the target is less than 44 by 44 CSS pixels. Users can scroll the screen using browser functions so target size does not need to be met.</li>
bruce-usab marked this conversation as resolved.
Show resolved Hide resolved
<li><strong>Example 4: Text Link in a paragraph</strong><br> Links within a paragraph of text have varying touch target dimensions. Links within
paragraphs of text do no need to meet the 44 by 44 CSS pixels requirements.</li>
<li><strong>Example 5: Text Link in a sentence</strong><br> A text link that is in a sentence is excluded and does not need to meet the 44 by 44 CSS pixel requirement. If the text link is the full sentence, then the text link target touch area does need to meet the 44 by 44 CSS pixels.</li>
<li><strong>Example 6: Footnote</strong><br> A footnote link at the end of a sentence does not need to meet the 44 by 44 CSS pixels requirements. The footnote at the end of the sentence is considered to be part of the sentence.</li>
<li><strong>Example 7: Help icon</strong><br> A help icon within or at the end of a sentence does not need to meet the 44 by 44 CSS pixels requirements. The icon at the end of the sentence is considered to be part of the sentence.</li>
</ul>
</section>
<section id="resources">
<h2>Resources</h2>
<p class="instructions"></p>
<ul>
<li><a href="https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/">Apple touch target size recommendations</a></li>
<li><a href="https://docs.microsoft.com/en-us/windows/apps/design/input/guidelines-for-targeting">Windows UWP Guidelines for touch targets</a></li>
<li><a href="https://material.io/design/layout/spacing-methods.html#touch-targets">Google Material Design Touch targets</a></li>
<li><a href="https://web.dev/accessible-tap-targets/">web.dev Accessible tap targets</a></li>
<li><a href="http://touchlab.mit.edu/publications/2003_009.pdf">Human Fingertips to Investigate the Mechanics of Tactile Sense (PDF)</a></li>
<li><a href="https://www.cs.umd.edu/hcil/trs/2006-11/2006-11.htm">One-Handed Thumb Use on Small Touchscreen Devices</a></li>
</ul>
</section>
<section id="techniques">
<h2>Techniques</h2>
<p>Each numbered item in this section represents a technique or combination of techniques that the <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> Working Group deems sufficient for meeting this Success Criterion. However, it is not necessary to use these particular techniques. For information on using other techniques, see <a href="understanding-techniques" class="understanding">Understanding Techniques for WCAG Success Criteria</a>, particularly the "Other Techniques" section.</p>
<section id="sufficient">
<h3>Sufficient</h3>
<p class="instructions">Techniques that are sufficient to meet the Guideline or Success Criterion.</p>
<section class="situation">
<ul>
<li>Ensuring that targets are at least 44 by 44 CSS pixels.</li>
</ul>
</section>
</section>
<section id="advisory">
<h2>Advisory</h2>
<p class="instructions">Although not required for conformance, the following additional techniques should be considered in order to make content more accessible. Not all techniques can be used or would be effective in all situations.</p>
<ul>
<li>Ensuring inline links provide sufficiently large activation target.</li>
</ul>
</section>
<section id="failure">
<h2>Failure</h2>
<p class="instructions">The following are common mistakes that are considered failures of Success Criterion 2.5.5 by the <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> Working Group.</p>
<ul>
<li>Failure of success criterion 2.5.5 due to target being less than 44 by 44 CSS pixels.</li>
mbgower marked this conversation as resolved.
Show resolved Hide resolved
</ul>
</section>
</section>
</body>
</html>