-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathlink-text-url.html
110 lines (108 loc) · 12.3 KB
/
link-text-url.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
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Don't Make the Target URL the Actual Hyperlink Text</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">
</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>Don't Make the Target URL the Actual Hyperlink Text</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-text-unique.html"><img src="images/left-arrow.png" alt="previous" />Unique Link Text</a></p>
<p class="next"><a href="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-underline.html">Underline Style for Links<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">The link text is short and descriptive and lets the user know where it will be taking them</a></li>
<li><a href="#2"><img src="images/x-small.png" alt="Bad Technique" title="Bad Technique">While the link will take the user to the correct location, determining what the link actually does can be challenging</a></li>
</ul>
</nav>
<p>Whenever possible and appropriate, the visible link text should be readable text and not the same as the hyperlink text. Some hyperlinks are very long and become cumbersome to display and read on the page. There are times when it is appropriate to display the link text as the actual URL, and in those cases it is fine to do so.</p>
<div class="example good">
<h2 id="1"><img src="images/checkmark-small.png" alt="Good Technique" title="Good Technique" />The link text is short and descriptive and lets the user know where it will be taking them.</h2>
<h3>Source Code</h3>
<pre class="code"><a href="http://accessibility.oit.ncsu.edu/tools/color-contrast/accessible-color-palette.php?&primary=CC0000,000000,FFFFFF&secondary=383838,666666,CCCCCC,E1E1E1,5C5541,666633,556677,A20000&tertiary=A79574,C5BD9D,E5E1D0,778855,99AA77,CCDDAA,67849C,CC9900&level=AA&ncsu=1">NC State Color Palette Accessibility Evaluator</a></pre>
<p class="implementation"><a href="http://accessibility.oit.ncsu.edu/tools/color-contrast/accessible-color-palette.php?&primary=CC0000,000000,FFFFFF&secondary=383838,666666,CCCCCC,E1E1E1,5C5541,666633,556677,A20000&tertiary=A79574,C5BD9D,E5E1D0,778855,99AA77,CCDDAA,67849C,CC9900&level=AA&ncsu=1">NC State Color Palette Accessibility Evaluator</a> </p>
</div>
<div class="example bad">
<h2 id="2"><img src="images/x-small.png" alt="Bad Technique" title="Bad Technique" />While the link will take the user to the correct location, determining what the link actually does can be challenging.</h2>
<h3>Source Code</h3>
<pre class="code"><a href="http://accessibility.oit.ncsu.edu/tools/color-contrast/accessible-color-palette.php?&primary=CC0000,000000,FFFFFF&secondary=383838,666666,CCCCCC,E1E1E1,5C5541,666633,556677,A20000&tertiary=A79574,C5BD9D,E5E1D0,778855,99AA77,CCDDAA,67849C,CC9900&level=AA&ncsu=1">http://accessibility.oit.ncsu.edu/tools/color-contrast/accessible-color-palette.php?&primary=CC0000,000000,FFFFFF&secondary=383838,666666,CCCCCC,E1E1E1,5C5541,666633,556677,A20000&tertiary=A79574,C5BD9D,E5E1D0,778855,99AA77,CCDDAA,67849C,CC9900&level=AA&ncsu=1"</a></pre>
<h3>Implementation</h3>
<p class="implementation"><a href="http://accessibility.oit.ncsu.edu/tools/color-contrast/accessible-color-palette.php?&primary=CC0000,000000,FFFFFF&secondary=383838,666666,CCCCCC,E1E1E1,5C5541,666633,556677,A20000&tertiary=A79574,C5BD9D,E5E1D0,778855,99AA77,CCDDAA,67849C,CC9900&level=AA&ncsu=1">http://accessibility.oit.ncsu.edu/tools/color-contrast/accessible-color-palette.php?&primary=CC0000,000000,FFFFFF&secondary=383838,666666,CCCCCC,E1E1E1,5C5541,666633,556677,A20000&tertiary=A79574,C5BD9D,E5E1D0,778855,99AA77,CCDDAA,67849C,CC9900&level=AA&ncsu=1</a> </p>
</div>
</div></body>
</html>