-
Notifications
You must be signed in to change notification settings - Fork 0
/
styles.html
167 lines (147 loc) · 10.2 KB
/
styles.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
<!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>Styles - 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"><!-- Should be included 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><!-- Should be included 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><!-- Should be included 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">
<link rel="stylesheet" media="all" href="css/saltire.css">
<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">
<link rel="stylesheet" media="all" href="css/global-form-styles.css">
<link rel="stylesheet" media="all" href="css/radio-button.css">
<link rel="stylesheet" media="all" href="css/toggle.css">
<link rel="stylesheet" media="all" href="css/checkboxes.css">
<link rel="stylesheet" media="all" href="css/slider.css">
<link rel="stylesheet" media="all" href="css/input-field-group.css">
<link rel="stylesheet" media="all" href="css/select.css">
<link rel="stylesheet" media="all" href="css/buttons.css">
<link rel="stylesheet" media="all" href="css/phase-banner.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-placeholder5">
</div>
<script>
$(function(){
$("#nav-placeholder5").load("nav-styles.html");
});
</script>
</div>
<div class="col-sm-9 col-xs-12"><!-- Bootstrap column grid should not be set to more than 8-col for main content column -->
<h1>Styles</h1><!-- SEMANTIC H1 TAG TO RELAY PAGE TITLE ONLY 1 PER PAGE-->
<h2 id="links">Links</h2>
<p>Links are blue by default and highlights with yellow when a hovers over it. If your link is at the end of a sentence or paragraph, make sure that the linked text doesn't include the period. If the sentence/link is part of a bulleted list, don't include periods at the end of each bullet for English (end punctuation is included for French).</p>
<pre><code><textarea rows="2" readonly="readonly">
<a href="#">link</a>
</textarea></code></pre>
<p>Use the <code>ns-link--no-visited-state</code> modifier class where it is not helpful to distinguish between visited and unvisited states, for example when linking to pages with frequently-changing content such as the dashboard for an admin interface.</p>
<pre><code><textarea rows="2" readonly="readonly">
<a href="#" class="ns-link--no-visited-state">ns-link--no-visited-state</a>
</textarea></code></pre>
<h2 id="writing-links">Writing links</h2>
<p>It’s important for link text to make sense without the surrounding sentences or content. The link text alone should convey the function and purpose of the link. Link text should also be unique and easy to speak out loud.</p>
<h3>Guidelines for writing link text:</h3>
<p>Avoid link text like "<a href="#">Click here</a>", "<a href="#">More</a>" and "<a href="#">Read more</a>". These kinds of links can be confusing when a screen reader reads them out of context.</p>
<p>Use unique link text where possible. Speech recognition software users may have a bad experience with duplicated link text.</p>
<p>It is OK to link a full sentence. Use a full sentance if nessessary but avoid longer.</p>
<p>Use judgment when linking full URLs. When linking a URL, consider users who must speak it out loud and who must listen to a screen reader announce it.</p>
<p>For links that lead to information rather than action, use the text about that information as the link. For example, "<a href="#">Fees for Vital Statistics certificates, licences and services</a>". Where possible consider using the title of the page the link goes to as your link text.</p>
<p>If your link takes the user to a page where they can start a task, start your link with a verb. For example, "<a href="#">Register a society business name</a>".</p>
<p>Links help people scan content, so do not swamp them with too many or link to the same tool or webpage throughout your page. Link to online services first, unless an offline alternative is better for your users.</p>
<p>Think about the size of the link users need to select. For users with reduced motor skills, a one word link could be very difficult to select.</p>
<h3 id="external-links">External links</h3>
<p>If it’s an external link to a non-government website, make that clear in the link text. For example, ‘read advice on writing link text from [name of organisation]’. There’s no need to say explicitly that you’re linking to an external site. Do not use an external link icon.</p>
<h3 id="opening-links-in-a-new-tab">Opening links in a new tab</h3>
<p>Avoid opening links in a new tab or window. It can be disorienting - and can cause <a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html">accessibility problems for people who aren’t able to visually perceive that the new tab has opened</a>.</p>
<p>If you need a link to open in a new tab - for example, to stop the user losing information they’ve entered into a form - then include the words ‘opens in new tab’ as part of the link. There’s no need to say ‘tab or window’, since opening in a new tab is the default behaviour for most browsers.</p>
<p>Include <code>rel="noreferrer noopener"</code> along with <code>target="_blank"</code> to reduce the risk of <a href="https://owasp.org/www-community/attacks/Reverse_Tabnabbing">reverse tabnabbing</a>. The following example shows how to do this in HTML.</p>
<pre><code><textarea rows="3" readonly="readonly">
<a href="#" rel="noreferrer noopener" target="_blank">link (opens in new tab)</a>
</textarea></code></pre>
<p>If you’re displaying lots of links together and want to save space and avoid repetition, consider doing the following:</p>
<ul>
<li>add a line of text before the links saying ‘The following links open in a new tab’</li>
<li>use the external link icon</li>
<li>including <code><span class="ns-visually-hidden">(opens in new tab)</span></code> as part of the link text, so that part of the link text is visually hidden but still accessible to screen readers</li>
</ul>
<pre><code><textarea rows="3" readonly="readonly">
<a href="#" rel="noreferrer noopener" target="_blank">link <i class="fa fa-external-link" aria-hidden="true"></i><span class="ns-visually-hidden">(opens in new tab)</span></a>
</textarea></code></pre>
</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>