-
Notifications
You must be signed in to change notification settings - Fork 230
/
target-padding.html
113 lines (105 loc) · 4.91 KB
/
target-padding.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!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>
<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>
<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 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>
</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>
<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>
<figure id="pointer-spacing-block">
<img src="img/pointer-spacing-1.png" alt="A horizontal pagination component immediately above the search results." />
<figcaption>Example of using CSS to ensure enough spacing around targets</figcaption>
</figure>
<p>Given the following HTML:</p>
<pre><code><nav class="pag" aria-label="pagination menu">
<ol class="pagination-1">
<li><span>previous</span></li>
<li><strong>1</strong></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">next</a></li>
</ol>
</nav></code></pre>
<p>The following CSS would ensure the minumum spacing is applied:</p>
<pre><code>ol.pagination-1 li {
display: inline-block;
min-width: 44px;
min-height: 44px;
}</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>
<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. " />
<figcaption>Example of using CSS to ensure enough spacing within targets</figcaption>
</figure>
<p>Given the following HTML:</p>
<pre><code><nav class="pag" aria-label="pagination menu">
<ol class="pagination-2">
<li><span>previous</span></li>
<li><strong>1</strong></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">next</a></li>
</ol>
</nav></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;
}</code></pre>
</section>
</section>
<section id="tests">
<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>
<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>
</section>
<section class="test-results">
<h3>Expected Results</h3>
<ul>
<li>Check #1 is true</li>
</ul>
</section>
</section>
<section id="related">
<h2>Related Techniques</h2>
</section>
<section id="resources">
<h2>Resources</h2>
</section>
</body>
</html>