Skip to content

Update C42 to address issue 2433 #3231

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

Closed
wants to merge 28 commits into from
Closed

Update C42 to address issue 2433 #3231

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
8a7dc2f
Update C42 to add example for target size (minimum)
fstrr Jun 6, 2023
1a61706
Added link to C42 to Target Size Enhanced
fstrr Jun 6, 2023
4eb5a5f
Updated C42 link name in Target Size Minimum
fstrr Jun 6, 2023
1b0aaa1
Updated the working examples for C42, fixed broken link
fstrr Jun 6, 2023
da577ee
Fix page heading text
fstrr Jun 6, 2023
4f75ae5
update c42 working examples
fstrr Jun 6, 2023
8643d8d
Delete SVGs as now using a sprite
fstrr Jun 6, 2023
49b92f5
Tweak URLs in working examples
fstrr Jun 6, 2023
156aeaf
Fixed least least typo
fstrr Jun 9, 2023
e1ebe46
Add abbr tag
fstrr Jun 9, 2023
161d0df
Split (Min) technique from (Enhanced) technique
fstrr Jun 14, 2023
cf86d36
Edits to C42
fstrr Jun 23, 2023
3fb4239
Update c42 working examples to use px instead of rem
fstrr Jun 23, 2023
3fa1eae
Delete un-needed screen grab
fstrr Jun 28, 2023
289d696
Rename working example to use “size” and not “spacing”
fstrr Jun 28, 2023
fcc3b82
Replace “spacing” with “size”, remove example 1
fstrr Jun 28, 2023
b258646
Updated procedure, change spacing to size
fstrr Jun 28, 2023
3cfc5cb
examples → example
fstrr Jun 28, 2023
f632d50
Update references to C42 and new technique
fstrr Jun 28, 2023
51aa663
Update text
fstrr Jun 28, 2023
509a09d
Removed “that cannot be enlarged by a mechanism”
fstrr Jun 28, 2023
c5c3369
Shorten description
fstrr Jun 28, 2023
933f663
Update description
fstrr Jun 28, 2023
c5aeeee
Merge branch 'main' into issue-2433
alastc Jul 13, 2023
b6e5446
Renaming the second technique
alastc Jul 13, 2023
cfcd92f
Update techniques/css/C44.html
fstrr Oct 11, 2025
0b59134
Update techniques/css/C44.html
fstrr Oct 11, 2025
62b6e23
Update techniques/css/C44.html
fstrr Oct 11, 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
130 changes: 76 additions & 54 deletions techniques/css/C42.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Using min-height and min-width to ensure sufficient target spacing</title>
<title>Using CSS to ensure sufficient target spacing</title>
<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
</head>
<body>
<h1>Using min-height and min-width to ensure sufficient target spacing</h1>
<h1>Using <abbr title="Cascading Style Sheets">CSS</abbr> to ensure sufficient target spacing</h1>
<section id="meta">
<h2>Metadata</h2>
<p id="id"></p>
Expand All @@ -18,67 +18,87 @@ <h2>When to Use</h2>
</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 x 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 navigation or pagination links 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>
</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 examples can be seen as <a href="../../working-examples/css-sufficient-target-spacing/">working examples</a>.</p>

<section class="example">
<h3>Using a display value of inline-block and min-height / width</h3>
<p>The first example shows a situation where the targets (in this case, the linked numbers in th pagination menu) are smaller than 44 x 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>Making pagination list-item elements at least 44px wide and 44px high</h3>
<p>This 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 CSS pixels, so that sufficient target spacing is assured.</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/sufficient-spacing-pagination-1.png" alt="a pagination control with links for the previous page, pages 1 - 5, and the next page. Page 1 is visually highlighted." height="63" width="499">
<figcaption>Example of using CSS to ensure enough spacing around targets</figcaption>
</figure>
<p>Given the following HTML:</p>
<pre><code>&lt;nav class=&quot;pag&quot; aria-label=&quot;pagination menu&quot;&gt;
&lt;ol class=&quot;pagination-1&quot;&gt;
&lt;li&gt;&lt;span&gt;previous&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;1&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;5&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;next&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
<h4>The HTML</h4>
<pre><code class="language-html">&lt;nav aria-label="pagination"&gt;
&lt;ol class="pagination-list--1"&gt;
&lt;li&gt;&lt;a&gt;previous&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a aria-current="page"&gt;&lt;span class="visually-hidden"&gt;page &lt;/span&gt;1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="/page-2"&gt;&lt;span class="visually-hidden"&gt;page &lt;/span&gt;2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="/page-3"&gt;&lt;span class="visually-hidden"&gt;page &lt;/span&gt;3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="/page-4"&gt;&lt;span class="visually-hidden"&gt;page &lt;/span&gt;4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="/page-5"&gt;&lt;span class="visually-hidden"&gt;page &lt;/span&gt;5&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="/page-2"&gt;next&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;/nav&gt;</code></pre>
<p>The following CSS would ensure the minimum spacing is applied:</p>
<pre><code>ol.pagination-1 li {
display: inline-block;
min-width: 44px;
min-height: 44px;
<h4>The CSS</h4>
<pre><code class="language-css">.pagination-list--1{
display: flex;
flex-wrap: wrap;
gap: 0.5em;
list-style: none;
padding: 0;
}

.pagination-list--1 li{
display: flex;
min-height: 44px;
min-width: 44px;
padding: 0.5em;
}</code></pre>

</section>
<section class="example">
<h3>Using a display value of flex and min-height / width</h3>
<p>The second example uses min-width and min-height 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>
<h3>Making pagination links at least 44px wide and 44px high</h3>
<p>This example uses <code class="language-css">min-width</code> and <code class="language-css">min-height</code> on the targets (the linked numbers in the pagination menu) and not on the list items.</p>
<figure id="pointer-spacing-flex">
<img src="img/pointer-spacing-1.png" alt="A horizontal pagination component immediately above the search results. It looks identical to the previous example. " />
<img src="img/sufficient-spacing-pagination-2.png" alt="a pagination control with links for the previous page, pages 1 - 5, and the next page. Page 1 is visually highlighted." height="66" width="481">
<figcaption>Example of using CSS to ensure enough spacing within targets</figcaption>
</figure>
<p>Given the following HTML:</p>
<pre><code>&lt;nav class=&quot;pag&quot; aria-label=&quot;pagination menu&quot;&gt;
&lt;ol class=&quot;pagination-2&quot;&gt;
&lt;li&gt;&lt;span&gt;previous&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;1&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;5&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;next&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;/nav&gt;</code></pre>
<p>The following CSS ensures the minimum size is applied:</p>
<pre><code>ol.pagination-2 a,
ol.pagination-2 strong,
ol.pagination-2 span {
display: block;
line-height:44px;
min-height:44px;
min-width: 44px;
<h4>The HTML</h4>
<pre><code class="language-html">&lt;nav aria-label="pagination"&gt;
&lt;ol class="pagination-list--2"&gt;
&lt;li&gt;&lt;a&gt;previous&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a aria-current="page"&gt;&lt;span class="visually-hidden"&gt;page &lt;/span&gt;1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="/page-2"&gt;&lt;span class="visually-hidden"&gt;page &lt;/span&gt;2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="/page-3"&gt;&lt;span class="visually-hidden"&gt;page &lt;/span&gt;3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="/page-4"&gt;&lt;span class="visually-hidden"&gt;page &lt;/span&gt;4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="/page-5"&gt;&lt;span class="visually-hidden"&gt;page &lt;/span&gt;5&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="/page-2"&gt;next&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;/nav&gt;</code></pre>
<h4>The CSS</h4>
<pre><code class="language-css">.pagination-list--2{
display: flex;
gap: 0.5em;
list-style: none;
padding: 0;
}

.pagination-list--2 li{
padding: 0.25em;
}

.pagination-list--2 a{
align-items: center;
display: flex;
justify-content: center;
min-height: 44px;
min-width: 44px;
padding: 0.5em;
}</code></pre>
</section>

Expand All @@ -90,24 +110,26 @@ <h2>Tests</h2>
<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>
<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>
<ol>
<li>Check that the target measures at least 44px width and 44px height.</li>
</ol>
</section>
<section class="test-results">
<h3>Expected Results</h3>
<ul>
<li>Check #1 is true</li>
<li>#1 is true.</li>
</ul>
</section>
</section>
<section id="related">
<h2>Related Techniques</h2>
<ul>
<li><a href="adding-spacing-to-undersized-targets.html">CXXXXXX</a></li>
Copy link
Contributor

@dbjorge dbjorge Jul 13, 2023

Choose a reason for hiding this comment

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

Suggested change
<li><a href="adding-spacing-to-undersized-targets.html">CXXXXXX</a></li>
<li><a href="C44">C44</a></li>

</ul>

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

</section>
</section> -->
</body>
</html>
92 changes: 92 additions & 0 deletions techniques/css/adding-spacing-to-undersized-targets.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Using CSS to add spacing to undersized targets</title>
<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
</head>
<body>
<h1>Using <abbr title="Cascading Style Sheets">CSS</abbr> to add spacing to undersized targets</h1>
<section id="meta">
<h2>Metadata</h2>
<p id="id"></p>
<p id="technology">CSS</p>
<p id="type"></p>
</section>
<section id="applicability">
<h2>When to Use</h2>
<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 menus have enough spacing around them so each link measures at least 24px width and 24px height. The aim is to provide an adequate target clearance to prevent accidental pointer activation of adjacent targets.</p>
</section>

<section id="examples">
<h2>Examples</h2>
<p>The following example can be seen as a <a href="../../working-examples/css-undersized-target-spacing/">working example</a>.</p>

<section class="example">
<h3>Adding spacing to undersized targets</h3>
<p>This example shows a situation where targets are smaller than 24 CSS pixels wide and 24 CSS pixels high. To meet Success Criterion 2.5.8, Target Size (Minimum), when a 24 CSS pixel diameter circle is centered on the bounding box of each target, the circles do not intersect another target or the circle for another undersized target. In this example, each target is 20 &#215; 20 CSS pixels, and a 4 CSS pixel gap is added between each target's parent container to create the minimum required spacing.</p>
<figure>
<img src="img/adding-spacing-undersized-targets.png" alt="a line of four interactive icons: back, forwards, email, home." height="21" width="102">
<figcaption>An example of inline undersized targets</figcaption>
</figure>
<h4>The <abbr title="HyperText Markup Language">HTML</abbr></h4>
<pre><code class="language-html">&lt;nav aria-label="controls"&gt;
&lt;ol class="navigation-controls"&gt;
&lt;li&gt;&lt;a href="/previous-page/"&gt;&lt;img alt="Back" src="arrow-back.svg"&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="/next-page/"&gt;&lt;img alt="Forward" src="arrow-forward.svg"&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;a href="mailto:[email protected]?subject=WCAG%20C42%20Technique"&gt;
&lt;img alt="Email" src="email.svg"&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="/"&gt;&lt;img alt="Home" src="home.svg"&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;/nav&gt;</code></pre>
<h4>The CSS</h4>
<pre><code class="language-css">.navigation-controls{
display: flex;
gap: 4px;
line-height: 0;
list-style: none;
padding: 0;
}

.navigation-controls a{
display: inline-block;
line-height: 0;
}</code></pre>

</section>
</section>
<section id="tests">
<h2>Tests</h2>

<section class="test-procedure">
<h3>Procedure</h3>
<p>For each undersized target that has no equivalent, that isn't inline or otherwise constrained by the line-height of non-target text, that hasn't had its size modified by the author, and whose presentation isn't essential:</p>
<ol>
<li>Check that the target has enough spacing so that the space around it measures at least 24px width and 24px height.</li>
</ol>
</section>
<section class="test-results">
<h3>Expected Results</h3>
<ul>
<li>#1 is true.</li>
</ul>
</section>
</section>
<section id="related">
<h2>Related Techniques</h2>
<ul>
<li><a href="C42.html">Using CSS to ensure sufficient target spacing</a></li>
</ul>

</section>
<!-- <section id="resources">
<h2>Resources</h2>
</section> -->
</body>
</html>
Binary file added techniques/css/img/adding-spacing-undersized-targets.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed techniques/css/img/pointer-spacing-1.png
View file
Open in desktop
Binary file not shown.
Binary file removed techniques/css/img/pointer-spacing-2.png
View file
Open in desktop
Binary file not shown.
Binary file added techniques/css/img/sufficient-spacing-pagination-1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added techniques/css/img/sufficient-spacing-pagination-2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions understanding/21/target-size-enhanced.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<title>Understanding Target Size (Enhanced)</title>
<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove" />
<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove" />
</head>
<body>
<h1>Understanding SC 2.5.5 Target Size (Enhanced)</h1>
Expand Down Expand Up @@ -55,12 +55,12 @@ <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>
<p class="instructions">Techniques that are sufficient to meet the Guideline or Success Criterion. See examples in <a href="../../techniques/css/C42.html">C42, Using CSS to ensure sufficient target spacing.</a></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>
</ul>
</section>
</section>
<section id="advisory">
Expand Down
3 changes: 1 addition & 2 deletions understanding/22/target-size-minimum.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,13 +192,12 @@ <h2>Resources</h2>
<section id="techniques">
<h2>Techniques for Target Size (Minimum)</h2>


<section id="sufficient">
<h3>Sufficient Techniques for Target Size (Minimum)</h3>

<ol>
<li>
<a href="../../techniques/css/C42" class="css">Using min-height and min-width to ensure sufficient target spacing</a>
<a href="../../techniques/css/C42" class="css">Using CSS to ensure sufficient target spacing</a>
</li>
</ol>

Expand Down
Loading