<!-- Here is how the top of your XHTML page could look -->
<!-- The associated bookmarks are listed below -->
<!-- ------------------------------------------------- -->
<!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">
<head>
<title>Page Title</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<!-- the style sheets -->
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" title="Default"/>
</head>
<body>
<!-- title panel -->
<div id="titleWrapper">
<a name="top"></a>
<div id="title1">
<h1>The Hidden Title of Your Page</h1>
<div class="nosee">
<a href="#content">Jump to Content</a>
<a href="#navigation">Jump to Site Navigation</a>
<a href="#subpanel">Jump to Section Info</a>
</div>
</div>
<div id="title2">
<a href="#content"><img src="images/t.gif" width="1" height="1" alt="Jump to Content"/></a>
<a href="#navigation"><img src="images/t.gif" width="1" height="1" alt="Jump to Navigation"/></a>
<a href="#subpanel"><img src="images/t.gif" width="1" height="1" alt="Jump to Section Info"/></a>
</div>
</div>
[. . . . . . . . .]
<a name="navigation"></a>
<ul>
<li>link 1</li>
[. . . .]
</ul>
[. . . . . . . . .]
<a name="content"></a>
<h1>Welcome to my site!</h1>
<p>Paragraph text</p>
[. . . . . . . . .]
<a name="subpanel"></a>
<h3>Other pages in this section</h3>
<ol>
<li>Sub page 1</li>
[. . . .]
</ol>
[. . . . . . . . .]
</body>
</html>
/* This is an example of the CSS that you might
use to hide the elements above from the visual browser
*************************************************************/
/* this is the CSS for your title bar, in which the hidden links
are placed but hidden from view */
#titleWrapper {
border: 0;
margin: 0;
padding: 0;
background-color: #E0E5F0;
background-image: url("images/titleBar.gif");
background-repeat: no-repeat;
background-position: top right;
}
/* some kind of logo maybe?
the image is displayed, but the textual links have
a font size of 0, so they are invisible. */
#title1 {
background-image: url("images/titleBar_Left2.gif");
background-repeat: no-repeat;
background-position: top left;
height: 80px;
font-size: 0.0em;
}
/* hide the rest of the text just to make sure it
does not show up (and shrink the font to 0) */
#title1 h1, .nosee {
font-size: 0.0em;
visibility: hidden;
}
/* this is the CSS for the transparent GIF links, which we
do not want to make disappear completely -- only make them
small enough where no one can tell they're there.
if the font-size is 0, then the whitespace between them will not
be a problem. yet, the images are not hidden, so they will
be processed by a screen reader. that's all we need. */
#title2 {
font-size: 0.0em;
background-color: #000000;
height:1px;
}