Skip Links are the links given at the top of the page that lets the users skip directly to the content area. This is important if there is lot of navigational elements before the content. You can use CSS to hide these links for visual browsers - but if the users is browsering with an older browser(lynx) or PDAs or mobile phones, he should be able to skip the navigational links and jump directly to the content.
Result
If done correctly, this technique will create this effect...
With CSS
Look Ma! No skip links
Without CSS
Easy Shortcuts to everywhere at the top
Example
<html><head>
<title>Skip Links</title>
<style type="text/css">
#skip-links {
display:none;/*Hide the links from Visual browsers*/
}
/* .. Other Styles ... */
</style>
</head>
<body>
<div id="skip-links">
<ul>
<li><a href="#content">Skip to Content</a></li>
<li><a href="#references">Skip to References</a></li>
</ul>
</div>
<div id="navigation">
<ul>
<li><a href="http://www.bin-co.com/">All Navigational Links</a></li>
<li><a href="http://www.bin-co.com/sitemap.php">This could be long</a></li>
</ul>
</div>
<div id="content">
<h1>Hello World</h1>
And lots of other stuff...<br />
... Lots of stuff here ...
<div id="references">
<h2>References</h2>
<ul>
<li><a href="http://www.washington.edu/accessit/AU/tutorial/ins.html">Skipping over navigation links</a></li>
</ul>
</div>
</div>
</body>
</html>
0 Comments:
Post a Comment