Skip to content

Commit 064bca6

Browse files
alastcalastc
committed
Adding technique for pointer spacing
1 parent e9fb5cd commit 064bca6

File tree

4 files changed

+252
-14
lines changed

4 files changed

+252
-14
lines changed

‎techniques/css/img/pointer-spacing-1.png

84.1 KB
Loading

‎techniques/css/img/pointer-spacing-2.png

84.2 KB
Loading

‎techniques/css/target-padding.html

Lines changed: 64 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
>
22
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
33
<head>
4-
<title>Padding targets to make them easier to activatetitle>
4+
<title>Using min-height and min-width to ensure sufficient target spacingtitle>
55
<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>
66
head>
77
<body>
8-
<h1>Padding targets to make them easier to activateh1>
8+
<h1>Using min-height and min-width to ensure sufficient target spacingh1>
99
<section id="meta">
1010
<h2>Metadatah2>
1111
<p id="id">p>
@@ -14,23 +14,72 @@

Metadata

1414
section>
1515
<section id="applicability">
1616
<h2>When to Useh2>
17-
<p>All technologies that support CSS.p>
17+
<p>All technologies that support CSS and pointer input.p>
1818
section>
1919
<section id="description">
2020
<h2>Descriptionh2>
21-
<p>The objective of this technique is to ensure that links in a menu have a reasonable size to support hitting the correct target.p>
22-
23-
21+
<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>
2422

2523
section>
2624
<section id="examples">
2725
<h2>Examplesh2>
2826
<p>p>
2927

3028
<section class="example">
31-
<h3>Exampleh3>
32-
33-
29+
<h3>Using a display value of inline-block and min-height / widthh3>
30+
<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>
31+
<figure>
32+
<img src="img/pointer-spacing-1.png" alt="A horizontal pagination component immediately above the search results." />
33+
<figcaption>Example of using CSS to ensure enough spacing around targetsfigcaption>
34+
figure>
35+
<p>Given the following HTML:p>
36+
<pre><code><nav class="pag" aria-label="pagination menu">
37+
<ol class="pagination-1">
38+
<li><span>previous</span></li>
39+
<li><strong>1</strong></li>
40+
<li><a href="#">2</a></li>
41+
<li><a href="#">3</a></li>
42+
<li><a href="#">4</a></li>
43+
<li><a href="#">5</a></li>
44+
<li><a href="#">next</a></li>
45+
</ol>
46+
</nav>code>pre>
47+
<p>The following CSS would ensure the minumum spacing is applied:p>
48+
<pre><code>ol.pagination-1 li {
49+
display: inline-block;
50+
min-width: 44px;
51+
min-height: 44px;
52+
}code>pre>
53+
54+
section>
55+
<section class="example">
56+
<h3>Using a display value of flex and min-height / widthh3>
57+
<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>
58+
<figure>
59+
<img src="img/pointer-spacing-1.png" alt="A horizontal pagination component immediately above the search results. It looks identical to the previous example. " />
60+
<figcaption>Example of using CSS to ensure enough spacing within targetsfigcaption>
61+
figure>
62+
<p>Given the following HTML:p>
63+
<pre><code><nav class="pag" aria-label="pagination menu">
64+
<ol class="pagination-2">
65+
<li><span>previous</span></li>
66+
<li><strong>1</strong></li>
67+
<li><a href="#">2</a></li>
68+
<li><a href="#">3</a></li>
69+
<li><a href="#">4</a></li>
70+
<li><a href="#">5</a></li>
71+
<li><a href="#">next</a></li>
72+
</ol>
73+
</nav>code>pre>
74+
<p>The following CSS ensures the minimum size is applied:p>
75+
<pre><code>ol.pagination-2 a,
76+
ol.pagination-2 strong,
77+
ol.pagination-2 span {
78+
display: block;
79+
line-height:44px;
80+
min-height:44px;
81+
min-width: 44px;
82+
}code>pre>
3483
section>
3584

3685
section>
@@ -39,15 +88,16 @@

Tests

3988

4089
<section class="test-procedure">
4190
<h3>Procedureh3>
42-
<p>For each ... : p>
43-
<ol>
44-
<li>li>
45-
ol>
91+
92+
<p>For each target that cannot be enlarged by a mechanism, is not inline, and is not covered by the essential exception:p>
93+
<ul>
94+
<li>Check that the target has enough spacing so that the space around it measures at least 44px width and 44px height.li>
95+
ul>
4696
section>
4797
<section class="test-results">
4898
<h3>Expected Resultsh3>
4999
<ul>
50-
<li># true.li>
100+
<li>Check #1 is trueli>
51101
ul>
52102
section>
53103
section>

‎working-examples/css-pointer-spacing/index.html

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
>
2+
<html lang="en">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5+
<title>Working example - Using min-height and min-width to ensure sufficient target spacingtitle>
6+
7+
<style>
8+
9+
/* =============== Shared pagination styles =============== */
10+
11+
nav, ol, li, h4 {
12+
margin: 0;
13+
}
14+
15+
nav.pag {
16+
color: black;
17+
background-color: pink;
18+
}
19+
20+
.dis {
21+
color:grey;
22+
background:white
23+
}
24+
25+
h4 {
26+
color: black;
27+
background-color: #fdf; /* just to indicate the heading area adjacent to the pagination menu above */
28+
}
29+
30+
ol.pagination-1,
31+
ol.pagination-2 {
32+
list-style-type: none;
33+
}
34+
35+
ol.results p {
36+
margin: 0 0 1em 0;
37+
}
38+
39+
ol.pagination-1 li span,
40+
ol.pagination-2 li span {
41+
color:grey;
42+
}
43+
44+
/* =============== Example 1 pagination styles =============== */
45+
46+
ol.pagination-1 li {
47+
display: inline-block;
48+
min-width: 44px;
49+
min-height: 44px;
50+
text-align: center;
51+
color:black;
52+
background-color:#fed; /* just to indicate the target spacing area adjacent to the heading below */
53+
}
54+
55+
ol.pagination-1 li + li a {
56+
border-left: 1px solid #bbb;
57+
}
58+
59+
ol.pagination-1 li a,
60+
ol.pagination-1 li strong,
61+
ol.pagination-1 li span {
62+
display: block;
63+
margin: 12px;
64+
padding:4px 8px;
65+
}
66+
67+
ol.pagination-1 li span {
68+
padding:4px 0;
69+
}
70+
71+
ol.pagination-1 li strong {
72+
color: white;
73+
background-color: black;
74+
}
75+
76+
a:hover,
77+
a:focus {
78+
outline: 3px solid #c04;
79+
}
80+
81+
/* =============== Example 2 pagination styles =============== */
82+
83+
ol.pagination-2 {
84+
display:flex;
85+
flex-wrap: wrap;
86+
}
87+
88+
ol.pagination-2 a,
89+
ol.pagination-2 strong,
90+
ol.pagination-2 span {
91+
display: block;
92+
line-height:44px;
93+
border: 2px solid #fff;
94+
text-align: center;
95+
min-height:44px;
96+
min-width: 44px;
97+
padding: 0 0.2em;
98+
}
99+
100+
ol.pagination-2 li {
101+
color:black;
102+
background-color:#fed; /* just to indicate the target spacing area adjacent to the heading below */
103+
}
104+
105+
ol.pagination-2 strong {
106+
border-top: 3px solid black;
107+
}
108+
109+
ol.pagination-2 a:hover,
110+
ol.pagination-2 a:focus {
111+
outline:none;
112+
border: 2px solid #c04;
113+
}
114+
115+
116+
style>
117+
118+
head>
119+
120+
<body>
121+
122+
<h1>Working example of using min-height and min-width to ensure sufficient target spacingh1>
123+
124+
<p>This example relates to technique <a href="../../techniques/css/target-padding.html">C42a>.p>
125+
126+
<h2>Example 1 (display: inline-block, min-height: 44px and min-width: 44px set on list items inside pagination menu)h2>
127+
<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>
128+
<h3>Search results (invented):h3>
129+
<nav class="pag" aria-label="pagination menu">
130+
<ol class="pagination-1">
131+
<li><span>previousspan>li>
132+
<li><strong>1strong>li>
133+
<li><a href="#">2a>li>
134+
<li><a href="#">3a>li>
135+
<li><a href="#">4a>li>
136+
<li><a href="#">5a>li>
137+
<li><a href="#">nexta>li>
138+
ol>
139+
nav>
140+
141+
<ol class="results">
142+
<li>
143+
<h4><a href="#">Garbage Delight by Dennis Lee (2014-05-06) (NoDust) by | HC | Gooda>h4>
144+
<p>HarperCollins, 1800. Condition: Good.p>
145+
li>
146+
<li>
147+
<h4><a href="#">Frederick S Perls: In and out the garbage pail by Frederick S Perls (1969-05-03)a>h4>
148+
<p>Real People Press, 1804. Shows some signs of wear, and may have some markings on the inside.p>
149+
li>
150+
<li>
151+
<h4><a href="#">Lila Karp: The Queen Is in the Garbage (Classic Feminist Writers) by Lila Karp (2007-05-01) a>h4>
152+
<p>1838. Condition: Very Good. Published by Belmont Books, 1969.p>
153+
li>
154+
ol>
155+
156+
157+
<h2>Example 2 (display: flex, min-height: 44px and min-width: 44px set on links inside pagination menu)h2>
158+
<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 <em>andem> the AAA Success Criterion 2.5.5 Target Size.p>
159+
<h3>Search results (invented):h3>
160+
<nav class="pag" aria-label="pagination menu">
161+
<ol class="pagination-2">
162+
<li><span>previousspan>li>
163+
<li><strong>1strong>li>
164+
<li><a href="#">2a>li>
165+
<li><a href="#">3a>li>
166+
<li><a href="#">4a>li>
167+
<li><a href="#">5a>li>
168+
<li><a href="#">nexta>li>
169+
ol>
170+
nav>
171+
172+
<ol class="results">
173+
<li>
174+
<h4><a href="#">Garbage Delight by Dennis Lee (2014-05-06) (NoDust) by | HC | Gooda>h4>
175+
<p>HarperCollins, 1800. Condition: Good.p>
176+
li>
177+
<li>
178+
<h4><a href="#">Frederick S Perls: In and out the garbage pail by Frederick S Perls (1969-05-03)a>h4>
179+
<p>Real People Press, 1804. Shows some signs of wear, and may have some markings on the inside.p>
180+
li>
181+
<li>
182+
<h4><a href="#">Lila Karp: The Queen Is in the Garbage (Classic Feminist Writers) by Lila Karp (2007-05-01) a>h4>
183+
<p>1838. Condition: Very Good. Published by Belmont Books, 1969.p>
184+
li>
185+
ol>
186+
187+
body>
188+
html>

0 commit comments

Comments
 (0)