-
Notifications
You must be signed in to change notification settings - Fork 5
/
day_11_skipping_over_navigation_links.html
executable file
·195 lines (143 loc) · 10.4 KB
/
day_11_skipping_over_navigation_links.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- Mirrored from diveintoaccessibility.info/day_11_skipping_over_navigation_links.html by HTTrack Website Copier/3.x [XR&CO'2013], Tue, 10 Feb 2015 16:47:30 GMT -->
<head>
<title>Day 11: Skipping over navigation links - Dive Into Accessibility</title>
<link rel="start" title="Home page" href="index.html" />
<link rel="contents" title="Table of contents" href="table_of_contents.html" />
<link rel="search" title="Search this site" href="mt/mt-search.html" />
<link rel="help" title="Access features of this site" href="accessibility_statement.html" />
<link rel="author" title="Send feedback to the author" href="mailto:[email protected]" />
<link rel="copyright" title="Terms of use" href="terms_of_use.html" />
<link rel="up" title="Table of contents" href="table_of_contents.html" />
<link rel="first" title="Day 1: Jackie" href="day_1_jackie.html" />
<link rel="last" title="Accessibility statement" href="accessibility_statement.html" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/common.css" type="text/css" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="projection" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="css/aural.css" type="text/css" media="aural" />
<link rel="prev" href="day_10_presenting_your_main_content_first.html" title="Day 10: Presenting your main content first" />
<link rel="next" href="day_12_using_color_safely.html" title="Day 12: Using color safely" />
<script>_gaq=[['_setAccount','UA-7434570-7'],['_trackPageview']];(function(){var g=document.createElement('script');g.src='../www.google-analytics.com/ga.js';g.setAttribute('async','true');document.documentElement.firstChild.appendChild(g);})();</script>
</head>
<body>
<div id="logo"><div class="inner">
<h1 class="title">
<a href="index.html" accesskey="1">Dive Into Accessibility</a>
</h1>
<p>30 days to a more accessible web site</p>
<a class="skip" href="day_11_skipping_over_navigation_links.html#startnavigation">Skip to navigation</a>
<span class="divider"> </span>
</div></div>
<p></p>
<div id="main"><div class="inner">
<div class="entry">
<h2 class="entrysubject">Day 11: Skipping over navigation links</h2>
<p class="firstparagraph">If you didn't manage to hack your templates to <a title="Day 10: Presenting your main content first" href="day_10_presenting_your_main_content_first.html">present your main content first</a>, here's a compromise: provide an link to skip over your navigation links. It's not a perfect solution (presenting your main content first is better), but it's an accepted compromise that many sites use.</p>
<p>This "skip link" is just a regular <code class="sgmltag"><a></code> tag, like any other link, but we'll use <acronym title="cascading style sheets">CSS</acronym> to hide it from visual browsers like Internet Explorer and Netscape. It won't affect your page layout at all; it will be completely invisible.</p>
<h3>Who benefits?</h3>
<ol>
<li><a href="day_5_marcus.html">Marcus</a> benefits. When he visits your page, <a href="http://www.fdisk.com/doslynx/lynxport.htm">Lynx</a> will display the link and allow him to skip over your navigation bar and go straight to your main content. See <a href="day_10_presenting_your_main_content_first.html">Day 10: Presenting your main content first</a> for an example of why this is so important.</li>
<li><a href="day_1_jackie.html">Jackie</a> benefits. When she visits your page, <a href="http://www.freedomscientific.com/fs_products/software_jaws.asp">JAWS</a> will read the skip link and allow her to skip over your navigation bar and go straight to your main content.</li>
</ol>
<h3>How to do it</h3>
<p>First, use <a href="http://www.delorie.com/web/lynxview.html">Lynx Viewer</a> on your own home page to determine whether your navigation bar is presented before your main content. If your main content comes first, this tip does not apply to you; enjoy your day off.</p>
<p>Now define a <acronym title="cascading style sheets">CSS</acronym> rule for the skip links, to make them invisible to visual browsers. If you have an external stylesheet, put this rule at the end of it. (If you have multiple external stylesheets, put this rule in the Netscape 4-friendly one.) If you just have a <code class="sgmltag"><style></code> section at the top of your template, add this rule immediately after the <code class="sgmltag"><style></code> tag.</p>
<blockquote>
<pre><code class="sgmltag">.skiplink {display:none}</code></pre>
</blockquote>
<p>Next, insert the actual skip link immediately after your site name and site description. Can't find them? Search for the appropriate template variables.</p>
<ul>
<li>Movable Type: search for <code><$MTBlogTitle$></code> and <code><$MTBlogDescription$></code>.</li>
<li>Greymatter: there is no specific template variable; search for the name and tagline of your web site.</li>
<li>Radio: search for <code><%siteName%></code> and <code><%description%></code>.</li>
<li>Manila: search for <code>{homePageLink (siteName)}</code> and <code>{tagLine}</code>.</li>
<li>Blogger: search for <code><$BlogTitle$></code>.</li>
</ul>
<p>Found them? Immediately <em>after</em> your site name and site description, insert the skip link:</p>
<blockquote>
<p><code class="sgmltag"><a class="skiplink" href="#startcontent">Skip over navigation</a></code></p>
</blockquote>
<p>OK, now you need an anchor tag where the skip link should point to; this should be at the start of your main content. Can't find your main content? Don't panic. Template variables save the day again.</p>
<ul>
<li>Movable Type: search for <code><MTEntries></code>.</li>
<li>Greymatter: on your Main Index Template, search for <code>{{logbody}}</code>. On your Entry Page Templates, search for <code>{{entrymainbody}}</code>.</li>
<li>Radio: search for <code><%bodytext%></code>.</li>
<li>Manila: search for <code>{bodytext}</code>.</li>
<li>Blogger: search for <code><Blogger></code>.</li>
</ul>
<p>Now, the format of your anchor tag depends on what kind of <acronym title="hypertext markup language">HTML</acronym> you're using. <a href="day_6_choosing_a_doctype.html">Look at your DOCTYPE</a>, then do one of the following:</p>
<ol>
<li><p>If you're using any variant of <code>HTML 4</code>, add this just before your main content:</p>
<blockquote>
<p><code class="sgmltag"><a name="startcontent"></a></code></p>
</blockquote>
</li>
<li><p>If you're using any variant of <code>XHTML 1.0</code>, add this just before your main content:</p>
<blockquote>
<p><code class="sgmltag"><a name="startcontent" id="startcontent"></a></code></p>
</blockquote>
</li>
<li><p>If you're using <code>XHTML 1.1</code>, add this just before your main content:</p>
<blockquote>
<p><code class="sgmltag"><a id="startcontent"></a></code></p>
</blockquote>
</li>
</ol>
<p>You should include this kind of skip link on every page of your web site, so add it to all your templates.</p>
<span class="divider"> </span>
</div> <!--entry-->
<div class="pageturn"><div class="inner">
<a href="day_10_presenting_your_main_content_first.html"><< Day 10: Presenting your main content first</a> |
<a href="table_of_contents.html">Contents</a>
| <a href="day_12_using_color_safely.html">Day 12: Using color safely >></a>
<span class="divider"> </span>
</div></div> <!--pageturn-->
</div></div> <!--main-->
<div id="menu">
<a class="skip" name="startnavigation" id="startnavigation"></a>
<form action="http://www.google.com/cse"><p>Search this site:</p><p><input type="hidden" name="cx" value="014021643941856155761:j2rsjqy6z6g"><input type="hidden" name="ie" value="UTF-8"><input type="search" name="q" size="20" placeholder="powered by Google™"></p><p><input type="submit" name="sa" value="Search"></p></form>
</form>
<div class="menusection"><div class="inner">
<h2 class="invisibletitle">Site links</h2>
<a class="skip" href="day_11_skipping_over_navigation_links.html#endinternal">Skip over site links</a>
<ul>
<li><a title="accessibility features of this site" href="accessibility_statement.html" accesskey="0">Accessibility statement</a></li>
<li><a href="mt/mt-search.html" accesskey="4">Advanced search</a></li>
<li><a href="table_of_contents.html" accesskey="3">Table of contents</a></li>
<li><a href="by_person.html">Tips by person</a></li>
<li><a href="by_disability.html">Tips by disability</a></li>
<li><a href="by_design_principle.html">Tips by design principle</a></li>
<li><a href="by_web_browser.html">Tips by web browser</a></li>
<li><a href="by_publishing_tool.html">Tips by publishing tool</a></li>
<li><a title="send email to the author" href="mailto:[email protected]" accesskey="9">Feedback</a></li>
<li><a title="Copyright and licensing information" href="terms_of_use.html" accesskey="8">Terms of use</a></li>
</ul>
<a class="skip" id="endinternal"></a>
</div></div> <!--.menusection-->
<div id="footer"><div class="inner">
<address>Copyright © 2002 Mark Pilgrim</address>
</div></div> <!--footer-->
</div> <!--menu-->
<div id="navigation">
<p class="breadcrumb">You are here:
<a href="index.html">Home</a> >
<a href="table_of_contents.html">Table of contents</a> >
<span class="currentpage">Day 11: Skipping over navigation links</span>
</p>
</div><!--navigation-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36045340-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
<!-- Mirrored from diveintoaccessibility.info/day_11_skipping_over_navigation_links.html by HTTrack Website Copier/3.x [XR&CO'2013], Tue, 10 Feb 2015 16:47:30 GMT -->
</html>