-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathlink-behavior.html
261 lines (256 loc) · 21.4 KB
/
link-behavior.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
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Link Behavior</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width"> <link href="css/training.css" rel="stylesheet" type="text/css">
<link href="css/button.css" rel="stylesheet" type="text/css">
</head>
<body><script> (function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o), m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-40224544-1', 'ncsu.edu');
ga('send', 'pageview');</script><a href="#main" title="Skip to main content" class="skip-main">Skip To Main Content</a>
<h1>Link Behavior</h1>
<nav>
<p class="toc">
<label for="toc-menu" class="screen-reader">Table of Contents Menu</label> <select id="toc-menu">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/">Table of Contents</option>
<optgroup label="The Nature of What is Required">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/understand-nature.html">Overview</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/what-accessible-means.html">What Accessibility Means</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/law.html">Accessibility and the Law</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/ada.html">Americans with Disabilities Act</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/508.html">Section 508</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/wcag.html">WCAG 2</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/vpat.html">VPAT</option>
</optgroup>
<optgroup label="Choose a technology">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/technology-overview.html">Overview</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/technology-html.html">HTML</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/technology-pdf.html">PDF</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/technology-office.html">Office Documents</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/technology-rich-media.html">Rich Media</option>
</optgroup>
<optgroup label="Some Basics">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/basics-overview.html">Overview</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/language.html">Language</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/valid-code.html">Valid Code</option>
</optgroup>
<optgroup label="Document Structure">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/headings.html">Headings</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/aria-landmarks.html">ARIA Landmarks</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/lists.html">Lists</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/tables.html">Tables</option>
</optgroup>
<optgroup label="User Interactions">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/mouse-and-keyboard-events.html">Mouse and Keyboard Events</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/visual-focus.html">Visual Focus</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/menus.html">Menus</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/skip-to-main-content.html">Skip to Main Content Links</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/forms.html">Forms</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/color-contrast.html">Color Contrast</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/links.html">Links</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-new-window.html">Links Opening in New Windows</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-text-alt.html">Text or Alt Attribute for Links</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-internal.html">Internal Links</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-behavior.html">Link vs. Button</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-text-descriptive-target.html">Using Descriptive Link Text</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-text-length.html">Length of Link Text</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-text-unique.html">Unique Link Text</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-text-url.html">URL Text</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-underline.html">Underline Style for Links</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/find-content-multiple.html">Finding Content in Multiple Ways</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/timed-events.html">Timed Events</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/aria-checkbox.html">ARIA Checkbox Tutorial</option>
</optgroup>
<optgroup label="Conveying Through Alternate Senses">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/alternative-text.html">Alternative Text</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/captioning.html">Captioning</option>
</optgroup>
<optgroup label="Appendices">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/testing-tools.html">Appendix A - Testing Tools</option>
</optgroup>
</select>
<input id="go-button" type="button" value="GO" onclick="location = document.getElementById('toc-menu').options[ document.getElementById('toc-menu').selectedIndex].value;">
</p>
<p class="prev"><a href="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-internal.html"><img src="images/left-arrow.png" alt="previous" />Internal Links</a></p>
<p class="next"><a href="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-text-descriptive-target.html">Using Descriptive Link Text<img src="images/right-arrow.png" alt="next" /></a></p>
</nav><div id="main" role="main" tabindex="-1">
<nav id="page-contents" role="navigation" aria-labelledby="page-contents-heading">
<h2 id="page-contents-heading">Page Contents</h2>
<ul>
<li><a href="#1"><img src="images/checkmark-small.png" alt="Good Technique" title="Good Technique">A simple link</a></li>
<li><a href="#2"><img src="images/x-small.png" alt="Bad Technique" title="Bad Technique">An anchor without an href element but with an onclick event</a></li>
<li><a href="#3"><img src="images/x-small.png" alt="Bad Technique" title="Bad Technique">Hash tag for the href attribute and JavaScript for onclick event</a></li>
<li><a href="#4"><img src="images/x-small.png" alt="Bad Technique" title="Bad Technique">JavaScript for the href attribute</a></li>
<li><a href="#5"><img src="images/x-small.png" alt="Bad Technique" title="Bad Technique">JavaScript void for the href attribute and JavaScript for the onclick event</a></li>
<li><a href="#6"><img src="images/checkmark-small.png" alt="Good Technique" title="Good Technique">Using a button with JavaScript</a></li>
<li><a href="#7"><img src="images/checkmark-small.png" alt="Good Technique" title="Good Technique">Using a CSS-styled button with JavaScript</a></li>
<li><a href="#8"><img src="images/checkmark-small.png" alt="Good Technique" title="Good Technique">Using progressive enhancement to change a link to a button</a></li>
</ul>
</nav>
<p>At its heart, a link connects two Web resources. It has two ends with an explicit direction - a source and a destination. Links are most often used to take a user from one Web page to another or from one location in a page to another location in the same page.</p>
<div class="example good">
<h2 id="1"><img src="images/checkmark-small.png" alt="Good Technique" title="Good Technique" />A simple link</h2>
<h3>Source Code</h3>
<pre class="code"><a href="http://www.ncsu.edu">NC State University</a></pre>
<h3>Implementation</h3>
<p><a href="http://www.ncsu.edu">NC State University</a></p>
</div>
<p>The problem with links starts when developers start leveraging the functionality of links for alternative purposes. Links provide some nice conveniences.</p>
<ul>
<li>Clicking on a link makes some other action happen.</li>
<li>The mouse usually changes shape when hovering over top of them, indicating to the user that the link does something.</li>
<li>They are automatically in the tab order, so users can use the keyboard to tab to them.</li>
</ul>
<p>The most common example of using links for other purposes is using JavaScript to execute some type of action when the link is clicked. What we as developers would really like is this.</p>
<div class="example bad">
<h2 id="2"><img src="images/x-small.png" alt="Bad Technique" title="Bad Technique" />An anchor without an href element but with an onclick event.</h2>
<h3>Source Code</h3>
<pre class="code"><a onclick="alert('something');">Do something</a></pre>
<p>Developers would really like this because it gets rid of the action of going to another page through the href attribute, but it allows us to perform other actions on the page, and we get all of the other benefits of links like being clickable. However, we encounter a few problems.</p>
<ul>
<li>The link no longer looks like a link.</li>
<li>The link is no longer keyboard accessible.</li>
<li>The mouse pointer doesn't change when hovering over it to indicate that it is clickable.</li>
</ul>
<h3>Implementation</h3>
<p><a onclick="alert('something');">Do something</a> </p>
</div>
<p>In the end developers end up using the anchor element in other creative ways to get around this problem. The following three examples demonstrate the popular patterns for implementing this functionality.</p>
<div class="example bad">
<h2 id="3"><img src="images/x-small.png" alt="Bad Technique" title="Bad Technique" />Hash tag for the href attribute and JavaScript for onclick event</h2>
<p>In this instance the hash character is used to tell the browser to go to an unnamed target within the same page. What this ends up doing is making the page scroll back to the top of the page. In the meantime the JavaScript function executes.</p>
<h3>Source Code</h3>
<pre class="code"><a href="#" onclick="alert('something');">Do something</a></pre>
<p>Here are the problems with this implementation.</p>
<ul>
<li>It can cause the page to scroll back to the top</li>
<li>It adds an entry to the browser history, so it takes an additional click of the back button to go to the previous page.</li>
<li>If the user has JavaScript disabled, nothing happens.</li>
<li>For screen reader users, they hear that this is a "link" and they might assume that clicking it will do what all links do - it will take them to a new page.</li>
</ul>
<h3>Implementation</h3>
<p><a href="#" onclick="alert('something');">Do something</a></p>
</div>
<div class="example bad">
<h2 id="4"><img src="images/x-small.png" alt="Bad Technique" title="Bad Technique" />JavaScript for the href attribute</h2>
<p>In this instance, a javascript action is fired when the link is clicked in place of taking the user to a new location.</p>
<h3>Source Code</h3>
<pre class="code"><a href="javascript:alert('something');">Do something</a></pre>
<p>Here are the problems with this implementation.</p>
<ul>
<li>If the user has JavaScript disabled, nothing happens.</li>
<li>For screen reader users, they hear that this is a "link" and they might assume that clicking it will do what all links do - it will take them to a new page.</li>
</ul>
<h3>Implementation</h3>
<p><a href="javascript:alert('something');">Do something</a></p>
</div>
<div class="example bad">
<h2 id="5"><img src="images/x-small.png" alt="Bad Technique" title="Bad Technique" />JavaScript void for the href attribute and JavaScript for the onclick event</h2>
<p>In this instance, the behavior of the href attribute is overridden and in it's place an onclick event fires some JavaScript.</p>
<p>This implementation borders on comical. An anchor element is chosen because it will perform an action when clicked. Then the anchor's ability to perform an action when clicked is overridden. In place of its default behavior, a new function is added to once again make the anchor perform an action when clicked.</p>
<h3>Source Code</h3>
<pre class="code"><a href="javascript:void(0)" onclick="alert('something');">Do something</a></pre>
<p>Here are the problems with this implementation.</p>
<ul>
<li>If the user has JavaScript disabled, nothing happens.</li>
<li>For screen reader users, they hear that this is a "link" and they might assume that clicking it will do what all links do - it will take them to a new page.</li>
</ul>
<h3>Implementation</h3>
<p><a href="javascript:void(0)" onclick="alert('something');">Do something</a></p>
</div>
<h2>When is a link not a link? When it should be a button</h2>
<p>If you want to have the user click on an item within a page and have some action via JavaScript performed within the same page, a button is your best option.</p>
<div class="example good">
<h2 id="6"><img src="images/checkmark-small.png" alt="Good Technique" title="Good Technique" />Using a button with JavaScript</h2>
<h3>Source Code</h3>
<pre class="code"><input type="button" value="Do Something" onClick="alert('something');"></pre>
<h3>Implementation</h3>
<p><input type="button" value="Do Something" onClick="alert('something');"> </p>
</div>
<div class="example good">
<h2 id="7"><img src="images/checkmark-small.png" alt="Good Technique" title="Good Technique" />Using a CSS-styled button with JavaScript</h2>
<p>This instance is identical to the previous one except it uses CSS to customize the button.</p>
<h3>Source Code</h3>
<pre class="code"><style>
.something-button {
border-top: 2px solid #e00;
border-left: 2px solid #e00;
border-right: 2px solid #300;
border-bottom: 2px solid #300;
background-color:#c00;
color:#fff;
}
.something-button:active {
border-top: 2px solid #300;
border-left: 2px solid #300;
border-right: 2px solid #e00;
border-bottom: 2px solid #e00;
background-color:#600;
color:#fff;
}
</style>
<input class="something-button" type="button" value="Do Something" onClick="alert('something');"></pre>
<h3>Implementation</h3>
<p><input class="something-button" type="button" value="Do Something" onClick="alert('something');"></p>
</div>
<div class="example good">
<h2 id="8"><img src="images/checkmark-small.png" alt="Good Technique" title="Good Technique" />Using progressive enhancement to change a link to a button</h2>
<p>This instance is demonstrates progressive enhancement, testing to see what capabilities a browser has and then delivering code that it can handle.</p>
<p>In this case it starts with a basic link which takes you to another page where the functionality occurs. If the browser has JavaScript enabled it changes the link to a button and the behavior to a same page action. This implementation solves the problem of when the user does not have JavaScript enabled.</p>
<h3>Source Code</h3>
<pre class="code"><p id="something" ><a href="something.html">Do Something</a></p>
<script type="text/javascript">
(function(){
if(document.getElementById){
var e = document.getElementById('something');
if(e){
var but = document.createElement('input');
but.setAttribute('type','button');
but.setAttribute('value','Do Something');
but.onclick = function(){
alert('something');
};
e.parentNode.replaceChild(but);
}
}
})();
</script></pre>
<h3>Implementation</h3>
<p id="something" ><a href="something.html">Do Something</a></p>
<script type="text/javascript">
(function() {
if (document.getElementById) {
var e = document.getElementById('something');
if (e) {
var but = document.createElement('input');
but.setAttribute('type', 'button');
but.setAttribute('value', 'Do Something');
but.onclick = function() {
alert('something');
};
e.parentNode.replaceChild(but, e)
}
}
})();
</script>
</div>
<h2>Further Reading</h2>
<div>
<ul>
<li><a href="http://www.w3.org/html/wg/drafts/html/master/links.html#links">HTML5 specification on links from the W3C</a></li>
<li><a href="http://www.w3.org/TR/html4/struct/links.html">HTML 4 specification on links from the W3C</a></li>
<li><a href="http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javascript-disabled/">How many users have JavaScript disabled?</a></li>
</ul>
</div>
</div></body>
</html>