Skip to content

Target Size techniques update #4685

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

Open
wants to merge 33 commits into
base: main
Choose a base branch
from
Open

Target Size techniques update #4685

Show file tree
Hide file tree
Changes from 20 commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
cf5419d
New technique for target size enhanced
fstrr Oct 11, 2025
20e41bd
re-title working example
fstrr Oct 11, 2025
665a306
reflow!
fstrr Oct 11, 2025
fe10026
re-title c42 working example file
fstrr Oct 11, 2025
1addbf8
replace PNGs with SVGs, update c42 nav example
fstrr Oct 11, 2025
55aeeb9
update img path
fstrr Oct 11, 2025
48217e1
Update C42
fstrr Oct 11, 2025
01ad4f9
link to new technique
fstrr Oct 11, 2025
5271419
re-title c42 image
fstrr Oct 11, 2025
dbd0a9f
Update test procedure for C42 as well
patrickhlauke Oct 12, 2025
49f8fe6
Reset base.css to main
patrickhlauke Oct 12, 2025
5f24632
Swap test procedure/expected results for C42 and new technique
patrickhlauke Oct 12, 2025
27b9a97
Update techniques/css/technique-using-css-to-ensure-targets-are-at-le…
patrickhlauke Oct 12, 2025
c3ea650
Update techniques/css/C42.html
fstrr Oct 12, 2025
bfec7e3
Update techniques/css/C42.html
fstrr Oct 12, 2025
2f16655
Update techniques/css/C42.html
fstrr Oct 12, 2025
31a5a85
Update techniques/css/C42.html
fstrr Oct 12, 2025
32ad743
Update working-examples/css-24px-target-size/index.html
fstrr Oct 12, 2025
686b2c3
Update working-examples/css-24px-target-size/index.html
fstrr Oct 12, 2025
1e3498b
update c42 example to use 24px instead of 36px
fstrr Oct 12, 2025
b855799
border color
fstrr Oct 12, 2025
affe42d
Update techniques/css/C42.html
patrickhlauke Oct 14, 2025
19a317c
Update techniques/css/C42.html
fstrr Oct 14, 2025
e775a4d
Update techniques/css/C42.html
fstrr Oct 14, 2025
7c47d56
Update techniques/css/C42.html
fstrr Oct 14, 2025
93bee90
Merge branch 'main' into technique-using-css-to-ensure-sufficient-tar…
bruce-usab Oct 31, 2025
0abeb4b
fix position of border around links
fstrr Oct 31, 2025
d1bb507
delete old png that’s been replaced
fstrr Oct 31, 2025
b92615f
Apply suggestion from @adampage
fstrr Nov 5, 2025
1d0d449
Apply suggestion from @adampage
fstrr Nov 5, 2025
5d469a7
Apply suggestion from @adampage
fstrr Nov 5, 2025
2460d54
Apply suggestion from @adampage
fstrr Nov 5, 2025
200a0dc
Various updates
fstrr Nov 5, 2025
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
93 changes: 32 additions & 61 deletions techniques/css/C42.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,71 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Using min-height and min-width to ensure sufficient target spacing</title>
<link rel="stylesheet" type="text/css" href="../../css/editors.css">
<meta charset="utf-8">
<title>Using min-height and min-width on target container to ensure sufficient target spacing</title>
</head>
<body>
<h1>Using <code>min-height</code> and <code>min-width</code> to ensure sufficient target spacing</h1>
<section id="meta">
<h2>Metadata</h2>
<p id="id"></p>
<p id="technology">CSS</p>
<p id="type"></p>
</section>
<h1>Using <code>min-height</code> and <code>min-width</code> on target container to ensure sufficient target spacing</h1>
<section id="applicability">
<h2>When to Use</h2>
<p>All technologies that support <abbr title="Cascading Style Sheets">CSS</abbr> and pointer input.</p>
<p>All technologies that support CSS and pointer input.</p>
</section>
<section id="description">
<h2>Description</h2>
<p>The objective of this technique is to ensure that links in navigation or pagination menus will be spaced so that they fall within an area that measures at least 44 &#215; 44 CSS pixels if the target area itself is smaller than that. The aim is to provide an adequate target clearance so the offset to adjacent targets is sufficient to prevent accidental pointer activation of adjacent targets.</p>
<p>The objective of this technique is to ensure that links in navigation or pagination menus will be spaced so that they fall within an area that measures at least 24 by 24 CSS pixels if the target area itself is smaller than that. The aim is to provide an adequate target clearance so the offset to adjacent targets is sufficient to prevent accidental pointer activation of adjacent targets.</p>

</section>
<section id="examples">
<h2>Examples</h2>
<p>The following examples can be seen as rendered versions in the <a href="../../working-examples/css-pointer-spacing/">working examples</a>.</p>
<p>The following example can be seen in the <a href="../../working-examples/css-24px-target-size/">working example</a>.</p>

<section class="example">
<h3>Using a display value of <code>inline-block</code>, <code>min-height</code>, and <code>min-width</code></h3>
<p>The first example shows a situation where the targets (in this case, the linked numbers in the pagination navigation) are smaller than 44 &#215; 44 CSS pixels. However, the list items that contain them have a minimum height and width of 44 px set, so that sufficient target spacing is assured.</p>
<h3>Using a <code>display</code> value of <code>flex</code> with <code>min-height</code> and <code>min-height</code></h3>
<p>This example uses <code>min-height</code> and <code>min-width</code> on the list items containing the pagination links. The links don't meet the 24 by 24 CSS pixels size requirement, but the containing list items size ensures that 24 CSS pixel diameter circles won't intersect each other when placed over the links.</p>
<figure id="pointer-spacing-block">
<img src="img/pointer-spacing-1.png" alt="A horizontal pagination component immediately above the search results.">
<img src="img/24px-target-size-pagination-navigation.svg" alt="A horizontal pagination component.">
<figcaption>Example of using CSS to ensure enough spacing around targets</figcaption>
</figure>

<section id="the-html">
<h4>The <abbr title="HyperText Markup Language">HTML</abbr></h4>
<pre xml:space="preserve"><code class="language-html">&lt;nav aria-label="pagination"&gt;
&lt;ol class="pagination-1"&gt;
&lt;li&gt;&lt;a class="previous"&gt;previous&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a aria-current="page"&gt;1&lt;/li&gt;
&lt;li&gt;&lt;a href="/page-2"&gt;2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="/page-3"&gt;3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="/page-4"&gt;4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="/page-5"&gt;5&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="/pages-6-10"&gt;next&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;/nav&gt;</code></pre>
<h4>The CSS</h4>
<pre xml:space="preserve"><code class="language-css">.pagination-1 li {
display: inline-block;
min-height: 44px;
min-width: 44px;
}</code></pre>
</section>

</section>
<section class="example">
<h3>Using a <code>display</code> value of <code>flex</code> and <code>min-height</code> / <code>width</code></h3>
<p>The second example uses <code>min-width</code> and <code>min-height</code> on the targets (the linked numbers in the pagination menu) and not on the parent container, thereby meeting this target spacing success criterion and incidentally also the AAA Success Criterion 2.5.5 Target Size.</p>
<figure id="pointer-spacing-flex">
<img src="img/pointer-spacing-2.png" alt="A horizontal pagination component immediately above the search results.">
<figcaption>Example of using CSS to ensure enough spacing within targets</figcaption>
</figure>
<section id="the-html">
<section>
<h4>The HTML</h4>
<pre xml:space="preserve"><code class="language-html">&lt;nav aria-label="pagination"&gt;
&lt;ol class="pagination-2"&gt;
<pre><code class="language-html">&lt;nav aria-label="pagination"&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a class="previous"&gt;previous&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a aria-current="page"&gt;1&lt;/li&gt;
&lt;li&gt;&lt;a href="/page-2"&gt;2&lt;/a&gt;&lt;/li&gt;
Expand All @@ -77,18 +41,16 @@ <h4>The HTML</h4>
&lt;/nav&gt;</code></pre>
</section>

<section id="the-css">
<section>
<h4>The CSS</h4>
<pre xml:space="preserve"><code class="language-css">.pagination-2 {
<pre><code class="language-css">ol {
display: flex;
flex-wrap: wrap;
}

ol.pagination-2 a {
display: block;
line-height: 44px;
min-height: 44px;
min-width: 44px;
li {
min-height: 24px;
min-width: 24px;
}</code></pre>
</section>
</section>
Expand All @@ -100,22 +62,31 @@ <h2>Tests</h2>
<section class="test-procedure">
<h3>Procedure</h3>

<p>For each target that cannot be enlarged by a mechanism, is not inline, and is not covered by the essential exception:</p>
<p>For each undersized target that has no sufficiently large equivalent, that isn't in a sentence or otherwise
constrained by the line-height of non-target text, that has had its size modified by the author, and whose
presentation isn't essential:</p>
<ul>
<li>Check that the target has enough spacing so that the space around it measures at least 44px width and 44px height.</li>
</ul>
<li>Draw a 24px diameter circle centered on the target's bounding box.</li>
<li>Check that the circle from #1 does not intersect any other target.</li>
<li>Check that the circle from #1 does not intersect any other undersized target's circle.</li>
</ol>
</section>
<section class="test-results">
<h3>Expected Results</h3>
<ul>
<li>Check #1 is true</li>
<li>#2 and #3 are true.</li>
</ul>
</section>
</section>
<!-- <section id="related">
<section id="related">
<h2>Related Techniques</h2>
<ul>
<li>
<a href="technique-using-css-to-ensure-targets-are-at-least-44-by-44-css-pixels">Using CSS to ensure targets are at least 44 by 44 CSS pixels</a>
</li>
</ul>

</section> -->
</section>
<!-- <section id="resources">
<h2>Resources</h2>
</section> -->
Expand Down
Loading
Loading