Skip to content

Commit cf5419d

Browse files
fstrrfstrr
committed
New technique for target size enhanced
Revisiting [PR 3231](#3231), which was left in a “this could still be useful but has loads of merge conflicts” state.
1 parent 78d0533 commit cf5419d

File tree

3 files changed

+213
-0
lines changed

3 files changed

+213
-0
lines changed

‎techniques/css/img/sufficient-target-size-pagination-navigation.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎techniques/css/technique-using-css-to-ensure-targets-are-at-least-44-by-44-css-pixels.html‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Using CSS to ensure targets are at least 44 by 44 CSS pixels</title>
6+
</head>
7+
<body>
8+
<h1>Using CSS to ensure targets are at least 44 by 44 CSS pixels</h1>
9+
<section id="applicability">
10+
<h2>When to Use</h2>
11+
<p>All technologies that support CSS and pointer input.</p>
12+
</section>
13+
<section id="description">
14+
<h2>Description</h2>
15+
<p>The objective of this technique is to ensure that links in pagination components have enough spacing around them to meet the requirements of <a href="../../understanding/21/target-size-enhanced.html">Success Criterion 2.5.5, Target Size (Enhanced)</a>. The aim is to provide an adequate target clearance to prevent accidental pointer activation of adjacent targets.</p>
16+
</section>
17+
18+
<section id="examples">
19+
<h2>Examples</h2>
20+
<p>The following example can be seen as a <a href="../../working-examples/css-sufficient-target-size/">working example</a>.</p>
21+
<section class="example">
22+
<h3>Making pagination links at least 44px wide and 44px high</h3>
23+
<p>This example uses <code>min-width</code> and <code>min-height</code> on the targets.</p>
24+
<figure id="pointer-spacing-flex">
25+
<img src="img/sufficient-target-size-pagination-navigation.svg" alt="a pagination control with links for the previous page, pages 1 - 5, and the next page. Page 1 is visually highlighted." height="56" width="514">
26+
<figcaption>Example of using CSS to ensure sufficiently large target size</figcaption>
27+
</figure>
28+
<h4>The HTML</h4>
29+
<pre><code class="language-html">&lt;nav aria-label="pagination"&gt;
30+
&lt;ol class="pagination-list"&gt;
31+
&lt;li&gt;&lt;a&gt;previous&lt;/a&gt;&lt;/li&gt;
32+
&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;
33+
&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;
34+
&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;
35+
&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;
36+
&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;
37+
&lt;li&gt;&lt;a href="/page-2"&gt;next&lt;/a&gt;&lt;/li&gt;
38+
&lt;/ol&gt;
39+
&lt;/nav&gt;</code></pre>
40+
<h4>The CSS</h4>
41+
<pre><code class="language-css">.pagination-list{
42+
display: flex;
43+
gap: 0.5em;
44+
list-style: none;
45+
padding: 0;
46+
}
47+
48+
.pagination-list li{
49+
padding: 0.25em;
50+
}
51+
52+
.pagination-list a{
53+
align-items: center;
54+
display: flex;
55+
justify-content: center;
56+
min-height: 44px;
57+
min-width: 44px;
58+
padding: 0.5em;
59+
}</code></pre>
60+
</section>
61+
62+
</section>
63+
<section id="tests">
64+
<h2>Tests</h2>
65+
66+
<section class="test-procedure">
67+
<h3>Procedure</h3>
68+
69+
<p>For each undersized target that has no equivalent, that isn't in a sentence 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>
70+
<ol>
71+
<li>Draw a 24px diameter circle centered on the target's bounding box.</li>
72+
<li>Check that the circle from #1 does not intersect any other target.</li>
73+
<li>Check that the circle from #1 does not intersect any other undersized target's circle.</li>
74+
</ol>
75+
</section>
76+
<section class="test-results">
77+
<h3>Expected Results</h3>
78+
<ul>
79+
<li>#2 and #3 are true.</li>
80+
</ul>
81+
</section>
82+
</section>
83+
<section id="related">
84+
<h2>Related Techniques</h2>
85+
<ul>
86+
<li><a href="C42">C42</a></li>
87+
</ul>
88+
89+
</section>
90+
<!-- <section id="resources">
91+
<h2>Resources</h2>
92+
</section> -->
93+
</body>
94+
</html>

0 commit comments

Comments
 (0)