-
Notifications
You must be signed in to change notification settings - Fork 34
/
index.html
218 lines (193 loc) · 16.8 KB
/
index.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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>
Styled Search Component
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
// remove no-js and add 'js' to the HTML
document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
</script>
<link rel="stylesheet" href="../assets/css/--demo-only--.css">
<link rel="stylesheet" href="../assets/css/--shared--.css">
<link rel="stylesheet" href="../assets/css/search-component.css">
</head>
<body>
<div class="demo-wrap">
<header class="demo-wrap__header">
<p class="demo-wrap__header__title">
Accessible Styled Form Controls
</p>
<nav>
<a href="https://github.com/scottaohara/a11y_styled_form_controls">See source on GitHub</a>,
<a href="/a11y_styled_form_controls">Index of styled form controls</a>
</nav>
</header>
<main aria-label="content">
<article class="demo">
<header>
<h1>Styled Search Component</h1>
<p>Published: <time>July 26, 2018</time></p>
<p>Last updated: <time>July 20, 2019</time></p>
<p>
Cross-browser styling for a search component.
</p>
</header>
<h2>
Pattern Demo
</h2>
<p>Search form example:</p>
<form role="search">
<div class="search-widget">
<input type="search"
id="srch"
name="srch"
aria-label="Search for...">
<button type="submit"
id="srch_btn"
aria-label="Submit Search">
<svg viewBox="50 461 23 23" aria-hidden="true" focusable="false">
<path d="M65.7857143,470.571429 C65.7857143,468.919635 65.1986666,467.506702 64.0245536,466.332589 C62.8504406,465.158476 61.4375083,464.571429 59.7857143,464.571429 C58.1339203,464.571429 56.720988,465.158476 55.546875,466.332589 C54.372762,467.506702 53.7857143,468.919635 53.7857143,470.571429 C53.7857143,472.223223 54.372762,473.636155 55.546875,474.810268 C56.720988,475.984381 58.1339203,476.571429 59.7857143,476.571429 C61.4375083,476.571429 62.8504406,475.984381 64.0245536,474.810268 C65.1986666,473.636155 65.7857143,472.223223 65.7857143,470.571429 Z M72.6428571,481.714286 C72.6428571,482.178574 72.473216,482.580355 72.1339286,482.919643 C71.7946412,483.25893 71.3928595,483.428571 70.9285714,483.428571 C70.4464262,483.428571 70.0446445,483.25893 69.7232143,482.919643 L65.1294643,478.339286 C63.531242,479.446434 61.7500098,480 59.7857143,480 C58.5089222,480 57.2879523,479.752235 56.1227679,479.256696 C54.9575835,478.761158 53.9531292,478.091522 53.109375,477.247768 C52.2656208,476.404014 51.5959846,475.399559 51.1004464,474.234375 C50.6049082,473.069191 50.3571429,471.848221 50.3571429,470.571429 C50.3571429,469.294636 50.6049082,468.073667 51.1004464,466.908482 C51.5959846,465.743298 52.2656208,464.738844 53.109375,463.895089 C53.9531292,463.051335 54.9575835,462.381699 56.1227679,461.886161 C57.2879523,461.390623 58.5089222,461.142857 59.7857143,461.142857 C61.0625064,461.142857 62.2834763,461.390623 63.4486607,461.886161 C64.6138451,462.381699 65.6182994,463.051335 66.4620536,463.895089 C67.3058078,464.738844 67.975444,465.743298 68.4709821,466.908482 C68.9665203,468.073667 69.2142857,469.294636 69.2142857,470.571429 C69.2142857,472.535724 68.6607198,474.316956 67.5535714,475.915179 L72.1473214,480.508929 C72.4776802,480.839287 72.6428571,481.241069 72.6428571,481.714286 Z" id="icon_search" stroke="none" fill-rule="evenodd"></path>
</svg>
</button>
</div>
</form>
<hr>
<p>Search form example:</p>
<form role="search">
<div class="search-widget">
<input type="text"
id="srch_txt"
name="srch_txt"
aria-label="Search for...">
<button type="submit"
id="srch_btn"
aria-label="Submit Search">
<svg viewBox="50 461 23 23" aria-hidden="true" focusable="false">
<path d="M65.7857143,470.571429 C65.7857143,468.919635 65.1986666,467.506702 64.0245536,466.332589 C62.8504406,465.158476 61.4375083,464.571429 59.7857143,464.571429 C58.1339203,464.571429 56.720988,465.158476 55.546875,466.332589 C54.372762,467.506702 53.7857143,468.919635 53.7857143,470.571429 C53.7857143,472.223223 54.372762,473.636155 55.546875,474.810268 C56.720988,475.984381 58.1339203,476.571429 59.7857143,476.571429 C61.4375083,476.571429 62.8504406,475.984381 64.0245536,474.810268 C65.1986666,473.636155 65.7857143,472.223223 65.7857143,470.571429 Z M72.6428571,481.714286 C72.6428571,482.178574 72.473216,482.580355 72.1339286,482.919643 C71.7946412,483.25893 71.3928595,483.428571 70.9285714,483.428571 C70.4464262,483.428571 70.0446445,483.25893 69.7232143,482.919643 L65.1294643,478.339286 C63.531242,479.446434 61.7500098,480 59.7857143,480 C58.5089222,480 57.2879523,479.752235 56.1227679,479.256696 C54.9575835,478.761158 53.9531292,478.091522 53.109375,477.247768 C52.2656208,476.404014 51.5959846,475.399559 51.1004464,474.234375 C50.6049082,473.069191 50.3571429,471.848221 50.3571429,470.571429 C50.3571429,469.294636 50.6049082,468.073667 51.1004464,466.908482 C51.5959846,465.743298 52.2656208,464.738844 53.109375,463.895089 C53.9531292,463.051335 54.9575835,462.381699 56.1227679,461.886161 C57.2879523,461.390623 58.5089222,461.142857 59.7857143,461.142857 C61.0625064,461.142857 62.2834763,461.390623 63.4486607,461.886161 C64.6138451,462.381699 65.6182994,463.051335 66.4620536,463.895089 C67.3058078,464.738844 67.975444,465.743298 68.4709821,466.908482 C68.9665203,468.073667 69.2142857,469.294636 69.2142857,470.571429 C69.2142857,472.535724 68.6607198,474.316956 67.5535714,475.915179 L72.1473214,480.508929 C72.4776802,480.839287 72.6428571,481.241069 72.6428571,481.714286 Z" id="icon_search" stroke="none" fill-rule="evenodd"></path>
</svg>
</button>
</div>
</form>
<hr>
<p>Search form with visible label</p>
<form role="search">
<label for="srch_v">
Search for
</label>
<div class="search-widget">
<input type="search"
id="srch_v"
name="srch_v">
<button type="submit"
id="srch_btn_v"
aria-label="Submit Search">
<svg viewBox="50 461 23 23" aria-hidden="true" focusable="false">
<path d="M65.7857143,470.571429 C65.7857143,468.919635 65.1986666,467.506702 64.0245536,466.332589 C62.8504406,465.158476 61.4375083,464.571429 59.7857143,464.571429 C58.1339203,464.571429 56.720988,465.158476 55.546875,466.332589 C54.372762,467.506702 53.7857143,468.919635 53.7857143,470.571429 C53.7857143,472.223223 54.372762,473.636155 55.546875,474.810268 C56.720988,475.984381 58.1339203,476.571429 59.7857143,476.571429 C61.4375083,476.571429 62.8504406,475.984381 64.0245536,474.810268 C65.1986666,473.636155 65.7857143,472.223223 65.7857143,470.571429 Z M72.6428571,481.714286 C72.6428571,482.178574 72.473216,482.580355 72.1339286,482.919643 C71.7946412,483.25893 71.3928595,483.428571 70.9285714,483.428571 C70.4464262,483.428571 70.0446445,483.25893 69.7232143,482.919643 L65.1294643,478.339286 C63.531242,479.446434 61.7500098,480 59.7857143,480 C58.5089222,480 57.2879523,479.752235 56.1227679,479.256696 C54.9575835,478.761158 53.9531292,478.091522 53.109375,477.247768 C52.2656208,476.404014 51.5959846,475.399559 51.1004464,474.234375 C50.6049082,473.069191 50.3571429,471.848221 50.3571429,470.571429 C50.3571429,469.294636 50.6049082,468.073667 51.1004464,466.908482 C51.5959846,465.743298 52.2656208,464.738844 53.109375,463.895089 C53.9531292,463.051335 54.9575835,462.381699 56.1227679,461.886161 C57.2879523,461.390623 58.5089222,461.142857 59.7857143,461.142857 C61.0625064,461.142857 62.2834763,461.390623 63.4486607,461.886161 C64.6138451,462.381699 65.6182994,463.051335 66.4620536,463.895089 C67.3058078,464.738844 67.975444,465.743298 68.4709821,466.908482 C68.9665203,468.073667 69.2142857,469.294636 69.2142857,470.571429 C69.2142857,472.535724 68.6607198,474.316956 67.5535714,475.915179 L72.1473214,480.508929 C72.4776802,480.839287 72.6428571,481.241069 72.6428571,481.714286 Z" id="icon_search" stroke="none" fill-rule="evenodd"></path>
</svg>
</button>
</div>
</form>
<hr>
<p>Disabled search form:</p>
<form role="search" aria-label="Component">
<div class="search-widget">
<input type="search"
id="srch2"
name="srch2"
aria-label="Search for..."
disabled>
<button type="submit"
disabled
id="srch2_btn"
aria-label="Submit Search">
<svg viewBox="50 461 23 23" aria-hidden="true" focusable="false">
<path d="M65.7857143,470.571429 C65.7857143,468.919635 65.1986666,467.506702 64.0245536,466.332589 C62.8504406,465.158476 61.4375083,464.571429 59.7857143,464.571429 C58.1339203,464.571429 56.720988,465.158476 55.546875,466.332589 C54.372762,467.506702 53.7857143,468.919635 53.7857143,470.571429 C53.7857143,472.223223 54.372762,473.636155 55.546875,474.810268 C56.720988,475.984381 58.1339203,476.571429 59.7857143,476.571429 C61.4375083,476.571429 62.8504406,475.984381 64.0245536,474.810268 C65.1986666,473.636155 65.7857143,472.223223 65.7857143,470.571429 Z M72.6428571,481.714286 C72.6428571,482.178574 72.473216,482.580355 72.1339286,482.919643 C71.7946412,483.25893 71.3928595,483.428571 70.9285714,483.428571 C70.4464262,483.428571 70.0446445,483.25893 69.7232143,482.919643 L65.1294643,478.339286 C63.531242,479.446434 61.7500098,480 59.7857143,480 C58.5089222,480 57.2879523,479.752235 56.1227679,479.256696 C54.9575835,478.761158 53.9531292,478.091522 53.109375,477.247768 C52.2656208,476.404014 51.5959846,475.399559 51.1004464,474.234375 C50.6049082,473.069191 50.3571429,471.848221 50.3571429,470.571429 C50.3571429,469.294636 50.6049082,468.073667 51.1004464,466.908482 C51.5959846,465.743298 52.2656208,464.738844 53.109375,463.895089 C53.9531292,463.051335 54.9575835,462.381699 56.1227679,461.886161 C57.2879523,461.390623 58.5089222,461.142857 59.7857143,461.142857 C61.0625064,461.142857 62.2834763,461.390623 63.4486607,461.886161 C64.6138451,462.381699 65.6182994,463.051335 66.4620536,463.895089 C67.3058078,464.738844 67.975444,465.743298 68.4709821,466.908482 C68.9665203,468.073667 69.2142857,469.294636 69.2142857,470.571429 C69.2142857,472.535724 68.6607198,474.316956 67.5535714,475.915179 L72.1473214,480.508929 C72.4776802,480.839287 72.6428571,481.241069 72.6428571,481.714286 Z" id="icon_search2" stroke="none" fill-rule="evenodd"></path>
</svg>
</button>
</div>
</form>
<section class="demo-details">
<h3>
Pattern Details
</h3>
<details open>
<summary>Pattern Markup</summary>
<pre><code class="language-html"><form role="search" aria-label="unique identifier could go here">
<div class="search-widget">
<input type="search" <!-- or type="text" -->
id="srch"
name="srch"
aria-label="Search for...">
<button type="submit"
id="srch_btn_v"
aria-label="Submit Search">
<svg viewBox="50 461 23 23"
aria-hidden="true"
focusable="false">
<path d="..."
id="icon_search"
stroke="none"
fill-rule="evenodd"></path>
</svg>
</button>
</div>
</form></code></pre>
</details>
<p>
Search forms can be one of the most important parts of a <abbr>UI</abbr>. A good search interface can allow users to quickly find the content they are looking for without the need to guess and check their way through different pages or screens in hopes of coming across the information that they're looking for.
</p>
<p>
To help promote the presence of a search form to assistive technologies, the search landmark (<code>role="search"</code>) should be applied to the <code>form</code> element that contains the search UI. An <code>aria-label</code> for the landmark <em>could</em> be useful in the event there are multiple search landmarks in the current document. If there is only one, an <code>aria-label</code> (or other means to provide an accessible name) may be unnecessary, making the region more verbose than helpful.
</p>
<p>
Many search forms do no have an explicit label set, as many designers and developers mistakenly assume the presence of a search icon to give a visual indicator of the component's purpose is sufficient. However, even though visually the search icon is well recognized, an accessible name should still be applied to the text field of the search component.
</p>
<p>
In some of the examples, an <code>aria-label</code> is used on the <code>input</code> and on the <code>button[type="submit"]</code> to provide both an accessible name. The SVG within the <code>button</code> is hidden from screen readers and given an <code>focusable="false"</code> attribute to help ensure that Internet Explorer won't allow keyboard focus to enter into the SVG itself. With this in place, IE will only announce the submit button's <code>aria-label</code> value, like other browsers.
</p>
<p>
The second example provides a visible label to the search component. While either a visible label or an <code>aria-label</code> will adequately provide screen readers with an accessible name for the search text field, a visible label can help ensure that some people will not miss the purpose of the form control. For instance, people using a screen magnifier may not notice the search icon if the search text field goes beyond the width of the zoomed in interface.
</p>
<h4>Search form notes:</h4>
<p>
Be mindful that <code>input[type="search"]</code> and <code>role="search"</code> are <b>not</b> the same thing. <code>role="search"</code> surfaces the form as a landmark, and should not be applied to the <code>input</code>, as that would negate the <code>input</code> as being announced as an editable "text field".
</p>
<p>
More complex search forms might contain additional form controls, or might utilize a <code>combobox</code> in place of, or in addition to, a standard <code>input[type="search"]</code> form control. Regardless, search forms should have a submit button as a consistent indicator for how a form can be submitted.
</p>
<p>
Regarding the input field, there are a few distinctions between using an <code>input type="text"</code> vs <code>input type="search"</code>. The primary differences between the two are that on mobile devices a "search" input will change the on-screen mobile keyboard's "Go" (iOS) or "Right Arrow" (Android) buttons into a "Search" (iOS) or "Search Icon" (Android) buttons. Webkit browsers additionally have some visual styling and an quick delete button (inaccessible to keyboard/screen readers) for the search text field. Some browsers allow for the <kbd>Esc</kbd> key to clear the text from a search input. Additional notes in the "Affects on Screen Reader Announcements".
</p>
<h4>Affects on Screen Reader Announcements?</h4>
<p>
The addition of the <code>role="search"</code>, and any accessible name it is given, will expose this information to the accessibility <abbr>API</abbr> and convey that information to assistive technologies. Users should be able to find a search form by navigating with the <kbd>tab</kbd> key. Screen reader users should be able to find the search form when navigating by form controls, or landmarks/regions.
</p>
<p>
Beyond the mobile and visual changes between a standard text field and a search text field, screen readers often announce the search text input as an editable "search" field, as opposed to an editable "text" field. (exact announcements will vary depending on the navigation method used to reach an input field, and the screen reader used).
</p>
<p>
When used outside of a search landmark, the distinction between the two fields can be helpful. However, in context of a search component, its use <strong>will</strong> result in redundant "search" announcements.
</p>
<p>
For example, testing the patterns on this page will result in announcements like "Search region, Search for..., search" when navigating into the search component and focusing the search input. In contrast, the example that uses a standard text field will announce like: "Search region, Search for..., edit text." For additional thoughts on this topic, read <a href="http://adrianroselli.com/2019/07/ignore-typesearch.html">Adrian Roselli's article "Ignore type=search"</a> to decide for yourself on the best path forward for your implementations.
</p>
</section>
</article>
</main>
</div> <!-- /.demo-wrap -->
<script>
var highlighterCSS = function () {
var head = document.head;
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '../assets/vendor/prism.css';
head.appendChild(link);
}
highlighterCSS();
</script>
<script src="../assets/vendor/prism.js"></script>
</body>
</html>