-
Notifications
You must be signed in to change notification settings - Fork 0
/
address.html
401 lines (372 loc) · 22.4 KB
/
address.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
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"><!--Meta data is page specific and should be assess and adjusted on a per page basis.-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortlink" href="https://beta.novascotia.ca/">
<title>Address - Forms & Services Building Blocks - Government of Nova Scotia</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"><!-- Include in all head tags -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script><!-- Include in all head tags -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script><!-- Include in all head tags -->
<script src="https://code.jquery.com/jquery-1.10.2.js"></script><!-- Not needed for service design, loads the navigation for this site -->
<link rel="stylesheet" media="all" href="https://novascotia.ca/clf/fonts/font-awesome/css/font-awesome.min.css"><!-- Include in all head tags -->
<link rel="stylesheet" media="all" href="css/saltire.css"><!-- Include in all head tags -->
<link rel="stylesheet" media="all" href="css/service-specific-styles.css"><!-- Not needed for services-->
<link rel="stylesheet" media="all" href="css/supplimentary-page-styles.css"><!-- Include in all head tags -->
<link rel="stylesheet" media="all" href="css/global-form-styles.css"><!-- Include only if forms are used-->
<link rel="stylesheet" media="all" href="css/radio-button.css"><!-- Include only if radios are used-->
<link rel="stylesheet" media="all" href="css/toggle.css"><!-- Include only if toggles are present-->
<link rel="stylesheet" media="all" href="css/checkboxes.css"><!-- Include only if checkboxes are used-->
<link rel="stylesheet" media="all" href="css/slider.css"><!-- Include only if sliders are used-->
<link rel="stylesheet" media="all" href="css/input-field-group.css"><!-- Include only if inputs are used-->
<link rel="stylesheet" media="all" href="css/select.css"><!-- Include only if selects are used-->
<link rel="stylesheet" media="all" href="css/buttons.css"><!-- Include only if buttons are used-->
<link rel="stylesheet" media="all" href="css/phase-banner.css"><!-- Include only if phase banner is used-->
<link rel="stylesheet" media="all" href="css/accordion.css"><!-- Include this only if needed -->
<link rel="stylesheet" media="all" href="css/panel.css"><!-- Include this only if needed -->
<link rel="stylesheet" media="all" href="css/date-picker.css"><!-- Include this only if needed -->
<!--[if lte IE 8]>
<script src="/core/assets/vendor/html5shiv/html5shiv.min.js?v=3.7.3"></script>
<![endif]-->
</head>
<body>
<div class="Site js-enabled" id="container">
<!-- -------------------------------------------------- START Skip Link --------------------------------------------------- -->
<nav class="skip-links" aria-label="Skip to main content">
<a href="#main" class="skip-to-link">Skip to main content</a>
</nav>
<!-- -------------------------------------------------- END Skip Link --------------------------------------------------- -->
<!-- -------------------------------------------------- START HEADER --------------------------------------------------- -->
<header>
<!-- START SALTIRE NS MOTHERSHIP RIBBON w FR -->
<nav id="navigation" class="ribbon" role="navigation" aria-label="Main navigation">
<div class="container">
<div class="row">
<div class="col-xs-6">
<a href="https://novascotia.ca/" hreflang="en"><img class="ribbon-img" src="https://novascotia.ca/clf/ignition/img/nsvip-en-white-flag.svg" alt="Province of Nova Scotia" /></a>
</div>
</div>
</div>
</nav>
<!-- END SALTIRE NS MOTHERSHIP RIBBON w FR -->
</header>
<!-- -------------------------------------------------- END HEADER --------------------------------------------------- -->
<!-- START Alpha Phase Banner -->
<div class="ns-phase-banner">
<div class="container">
<div class="row">
<div class="col">
<p class="ns-phase-banner__content">
<strong class="ns-tag ns-phase-banner__content__tag">
Alpha
</strong>
<span class="ns-phase-banner__text">
This is a new service that we're still developing. Try the service and <a href="https://github.com/connorscarolyns/service-pattern-library/issues">send us your comments and suggestions</a>. Your feedback will help make the service easier to use for everyone.
</span>
</p>
</div>
</div>
</div>
</div>
<!-- END Alpha Phase Banner -->
<!-- START Primary NAV -->
<div id="nav-placeholder4">
</div>
<script>
$(function(){
$("#nav-placeholder4").load("primary-nav.html");
});
</script>
<!-- End Primary NAV -->
<!--A basic page has a primary content area and an optional column for secondary information like related content.-->
<div class="container Site-content">
<main id="main"><!-- SEMANTIC MAIN TAG TO INDICATE PAGE CONTENT-->
<article><!-- SEMANTIC ARTICLE TAG TO GROUP RELATED CONTENT-->
<form name="parameters" method="GET" target="_parent">
<div class="row">
<div class="col-sm-3 col-xs-12 order-last order-sm-first">
<div id="nav-placeholder1">
</div>
<script>
$(function(){
$("#nav-placeholder1").load("nav-patterns.html");
});
</script>
</div>
<div class="col-sm-9 col-xs-12">
<h1>Address</h1><!-- SEMANTIC H1 TAG TO RELAY PAGE TITLE ONLY 1 PER PAGE-->
<p>Help users provide an address using one of the following:</p>
<ul>
<li><a href="#address-lookup">Address lookup</a></li>
<li><a href="#multiple-text-inputs-for-canadian-civic-addresses">Multiple text inputs</a></li>
<li><a href="#textarea">Textarea</a></li>
</ul>
<h2 id="address-lookup">Address lookup</h2>
<h3 id="when-to-use-an-address-lookup">When to use an address lookup</h3>
<p>Use an address lookup when you’re asking users for a Nova Scotian address.</p>
<h3 id="when-not-to-use-an-address-lookup">When not to use an address lookup</h3>
<p><abbr title="Nova Scotia Civic Address File">NSCAF</abbr> integrated address lookups generally work well for Nova Scotian civic addresses. Use a manual option such as multiple text inputs or a textarea when you are collecting mailing addresses, or addresses outside of the province. Read more about the <a href="https://geonova.novascotia.ca/civic-addressing">Nova Scotia Civic Address File at GeoNOVA</a>.</p>
<h3 id="how-an-address-lookup-works">How an address lookup works</h3>
<p>An address lookup lets users specify a NS address by entering their street address.</p>
<p>When using an address lookup, you should:</p>
<ul>
<li>make it clear that it will only work for NS addresses</li>
<li>provide a manual option for people with international addresses or addresses that are missing or not properly listed in the address lookup</li>
</ul>
<h2 id="multiple-text-inputs-for-canadian-civic-addresses">Multiple text inputs for Canadian civic addresses</h2>
<h3 id="when-to-use-multiple-text-inputs">When to use multiple text inputs</h3>
<p>Only use multiple text inputs when you know which countries the addresses will come from and can find a format that supports them all. This can be difficult to know if you’re asking for addresses outside of the Canada.</p>
<p>Using multiple text inputs means:</p>
<ul>
<li>you can easily extract and use specific parts of an address</li>
<li>you can give help for individual text inputs</li>
<li>you can validate each part of the address separately</li>
<li>users can complete the form using their browser’s autocomplete function</li>
<li>let people enter their postal codes in upper or lower case and with or without spaces</li>
</ul>
<section class="row">
<div class="col-md-12 col-xs-12">
<div class="exampleDisplay">
<fieldset class="ns-fieldset">
<legend class="ns-fieldset__legend noBorder">
<h1 class="ns-fieldset__heading">
What is your home address?
</h1>
</legend>
<div class="ns-form-group">
<label class="ns-label" for="address-line-1">
Street address
</label>
<div id="email-hint" class="ns-hint">
Enter your home address, PO boxes not allowed
</div>
<input class="ns-input fw-25" id="address-line-1" name="address-line-1" type="text" autocomplete="address-line1">
</div>
<div class="ns-form-group">
<label class="ns-label" for="address-line-2">
Apartment / Unit
</label>
<div id="email-hint" class="ns-hint">
For example, 'Apt 100' or 'Unit 5'
</div>
<input class="ns-input fw-6" id="address-line-2" name="address-line-2" type="text" autocomplete="address-line2">
</div>
<div class="ns-form-group">
<label class="ns-label" for="address-town">
City / Town / Community
</label>
<input class="ns-input fw-15" id="address-town" name="address-town" type="text" autocomplete="address-level2">
</div>
<div class="ns-form-group">
<label class="ns-label" for="province-territory">
Province / Territory
</label>
<div class="select fw-15">
<input type="list" list="typeahead1List" id="province-territory" name="province-territory" type="text" autocomplete="address-level1">
<datalist id="typeahead1List">
<option>Alberta - AB</option>
<option>British Columbia - BC</option>
<option>Manitoba - MB</option>
<option>New Brunswick - NB</option>
<option>Newfoundland and Labrador - NL</option>
<option>Northwest Territories - NT</option>
<option>Nova Scotia - NS</option>
<option>Nunavut - NU</option>
<option>Ontario - ON</option>
<option>Prince Edward Island - PE</option>
<option>Quebec - QC</option>
<option>Saskatchewan - SK</option>
<option>Yukon - YT</option>
</datalist>
</div>
</div>
<div class="ns-form-group">
<label class="ns-label" for="address-postal-code">
Postal code
</label>
<input class="ns-input fw-6" id="address-postal-code" name="address-postal-code" type="text" autocomplete="postal-code">
</div>
</fieldset>
</div>
</div><!-- / example col -->
</section><!--/row-->
<h3 id="conditional-mailing-addresses">Conditional mailing addresses</h3>
<p>If you need to collect a mailing address and a civic address place them on the same page. User testing has shown that people will go back and forth between pages if they are placed on separate pages. Not all people have a different address for mailing, so add radio buttons that display a conditional set of inputs based on the selected value.</p>
<section class="row">
<div class="col-md-12 col-xs-12">
<div class="exampleDisplay">
<fieldset class="ns-fieldset">
<legend class="ns-fieldset__legend noBorder">
<h3 class="ns-fieldset__heading ">
Mailing address
</h3>
</legend>
<div class="ns-radios ns-radios--conditional" data-module="ns-radios">
<div class="ns-radios__item">
<input class="ns-radios__input" id="contact" name="contact" type="radio" value="ns-radios__conditional--hidden" data-aria-controls="conditional-contact">
<label class="ns-label ns-radios__label" for="contact">
<span class="ns-label-span">Same as home address</span>
</label>
</div>
<div class="ns-radios__item">
<input class="ns-radios__input" id="contact-2" name="contact" type="radio" value="ns-radios__conditional" data-aria-controls="conditional-contact-2" checked="checked">
<label class="ns-label ns-radios__label" for="contact-2">
<span class="ns-label-span">Different than home address</span>
</label>
</div>
<div id="conditional-content" class="ns-radios__conditional" id="conditional-contact">
<div class="ns-form-group">
<label class="ns-label" for="address-line-1-2">
Street address / PO box
</label>
<input class="ns-input fw-25" id="address-line-1-2" name="address-line-1-2" type="text" autocomplete="address-line1">
</div>
<div class="ns-form-group">
<label class="ns-label" for="address-line-2">
Apartment / Unit
</label>
<div id="email-hint" class="ns-hint">
For example, 'Apt 100' or 'Unit 5'
</div>
<input class="ns-input fw-6" id="address-line-2" name="address-line-2" type="text" autocomplete="address-line2">
</div>
<div class="ns-form-group">
<label class="ns-label" for="address-town-2">
City / Town / Community
</label>
<input class="ns-input fw-15" id="address-town-2" name="address-town-2" type="text" autocomplete="address-level2">
</div>
<div class="ns-form-group">
<label class="ns-label" for="province-territory-2">
Province / Territory
</label>
<div class="select fw-15">
<input type="list" list="typeahead1List" id="province-territory-2" name="province-territory-2" type="text" autocomplete="address-level1">
<datalist id="typeahead1List">
<option>Alberta - AB</option>
<option>British Columbia - BC</option>
<option>Manitoba - MB</option>
<option>New Brunswick - NB</option>
<option>Newfoundland and Labrador - NL</option>
<option>Northwest Territories - NT</option>
<option>Nova Scotia - NS</option>
<option>Nunavut - NU</option>
<option>Ontario - ON</option>
<option>Prince Edward Island - PE</option>
<option>Quebec - QC</option>
<option>Saskatchewan - SK</option>
<option>Yukon - YT</option>
</datalist>
</div>
</div>
<div class="ns-form-group">
<label class="ns-label" for="postal-code-2">
Postal code
</label>
<input class="ns-input fw-6" id="postal-code-2" name="postal-code2" type="text" autocomplete="postal-code">
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('input:radio').click(function () {
$('#conditional-content').attr('class',this.value);
});
});</script>
</fieldset>
</div>
</div><!-- / example col -->
</section><!--/row-->
<h3 id="when-to-use-multiple-text-inputs">When to use multiple text inputs</h3>
<p>Only use multiple text inputs when you know which countries the addresses will come from and can find a format that supports them all. This can be difficult to know if you’re asking for addresses outside of the Canada.</p>
<p>Using multiple text inputs means:</p>
<ul>
<li>you can easily extract and use specific parts of an address</li>
<li>you can give help for individual text inputs</li>
<li>you can validate each part of the address separately</li>
<li>users can complete the form using their browser’s autocomplete function</li>
</ul>
<p>The disadvantages of using multiple text inputs are that:</p>
<ul>
<li>it’s hard to find a single format that works for all addresses</li>
<li>there’s no guarantee that users will use the text inputs the way you think they will</li>
<li>users cannot easily paste addresses from their clipboards</li>
</ul>
<h3 id="how-multiple-text-inputs-work">How multiple text inputs work</h3>
<p>If you use multiple text inputs, you should:</p>
<ul>
<li>only make individual text inputs mandatory if you really need the information</li>
<li>make the text inputs the appropriate length for the content – it helps people understand the form, for example, make postal code text inputs shorter than street text inputs</li>
<li><a href="#allow-different-postal-code-formats">let users enter postal codes in different formats</a></li>
</ul>
<p>Make sure there are enough text inputs to accommodate longer addresses if you know your users will need them. For example, allow users to include a company name.</p>
<p>Only ask for the information you require, for example if you only need to know what province a person is from there is no need to ask for a full civic address.</p>
<h4 id="use-the-autocomplete-attribute-on-multiple-address-fields">Use the autocomplete attribute on multiple address fields</h4>
<p>Use the <code>autocomplete</code> attribute on each individual address field to help users enter their address more quickly. This lets you specify each input’s purpose so browsers can autofill the information on a user’s behalf if they’ve entered it previously.</p>
<p><a href="https://www.w3.org/TR/WCAG21/#input-purposes">Check which input purpose to use</a> for each field.</p>
<p>In production, you’ll need to do this to meet <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">WCAG 2.1 Level AA</a>. You will not normally need to use the <code>autocomplete</code> attribute in prototypes, as users will not generally be using their own devices.</p>
<h4 id="allow-different-postal-code-formats">Allow different postal code formats</h4>
<p>It is easier for users if you accept and ignore unwanted characters. This is better than rejecting the input and telling a user they’ve not provided a valid postal code.</p>
<p>You should allow postal codes that contain upper and lower case letters, no spaces, additional spaces at the beginning, middle or end and punctuation like hyphens, brackets, dashes and periods.</p>
<h3 id="error-messages">Error messages</h3>
<p>Error messages should be styled like this:</p>
<section class="row">
<div class="col-md-12 col-xs-12">
<div class="exampleDisplay">
<div class="ns-form-group ns-form-group-message-error">
<label class="ns-label" for="event-name">
Postal code
</label>
<span id="address-postal-code-error" class="ns-error-message field-validation-error">
<i class="fa fa-exclamation-circle error-indicator errorAlert" aria-hidden="true"></i>
<span class="ns-visually-hidden">Error:</span> Enter a postal code in the correct format like, A1B 2C3
</span>
<input class="ns-input fw-6 ns-input--error" id="address-postal-code3" name="address-postal-code3" type="text" value="Nope" aria-describedby="address-postal-code-error3" autocomplete="postal-code">
</div>
</div>
</div><!-- / example col -->
</section><!--/row-->
<p>Make sure errors follow the guidance in <a href="error-message.html">error message</a> and have specific error messages for specific error states.</p>
<h2 id="textarea">Textarea</h2>
<section class="row">
<div class="col-md-12 col-xs-12">
<div class="exampleDisplay">
<div class="ns-form-group">
<label class="ns-label" for="address">
What is your address?
</label>
<textarea class="ns-textarea" id="address" name="address" rows="5" autocomplete="street-address"></textarea>
</div>
</div>
</div><!-- / example col -->
</section><!--/row-->
<h3 id="when-to-use-textarea">When to use textarea</h3>
<p>Use a textarea if you expect a broad range of address formats and you do not need to format the address for print or use specific sub-parts of the address (for example, street or postal code).</p>
<h3 id="when-not-to-use-textarea">When not to use textarea</h3>
<p>You should not use a textarea if you:</p>
<ul>
<li>need to separate an address into accurate sub-parts (for example, street or postal code)</li>
<li>need to help users look up an address</li>
</ul>
<h3 id="how-a-textarea-works">How a textarea works</h3>
<p>Textareas let users enter an address in any format and make it easy to copy and paste addresses from their clipboard.</p>
<h4 id="use-the-autocomplete-attribute-on-a-textarea">Use the autocomplete attribute on a textarea</h4>
<p>Use the <code>autocomplete</code> attribute on the textarea component when you’re asking for an address. This lets browsers autofill the information on a user’s behalf if they’ve entered it previously.</p>
<p>To do this, set the <code>autocomplete</code> attribute to <code>street-address</code> as shown in the HTML and Nunjucks tabs in the textarea example above.</p>
<p>If you are working in production you’ll need to do this to meet <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">WCAG 2.1 Level AA</a>.</p>
<p>You will not normally need to use the <code>autocomplete</code> attribute in prototypes, as users will not generally be using their own devices.</p>
</div><!-- /col-xs-8 -->
</div><!--/row-->
</form>
</article>
</main>
</div><!-- /container -->
<!-- START FOOTER -->
<footer id="footer" class="footer" role="contentinfo">
<div class="container">
</div>
</footer>
<!-- END FOOTER -->
</div>
</body>
</html>