HTML and CSS Reference
In-Depth Information
Introduce Skip Navigation
Place an "invisible" link at the beginning of each page that jumps straight to the main content on the page.
<body>
<div id="header">Blah blah blah</div>
<div id="leftnav">Blah blah blah</div>
<div id="main">Blah blah blah</div>
<div id="footer">Blah blah blah</div>
</body>
<body>
<div id="header">
<a href="#main"><img src="blank.png"
alt="Jump to Main Content"
width="1" height="1" tabindex="1"/></a>
Blah blah blah
</div>
<div id="leftnav">Blah blah blah</div>
<div id="main">Blah blah blah</div>
<div id="footer">Blah blah blah</div>
</body>
Motivation
Reading a site with a screen reader is hard enough without being forced to slog through a long sidebar or
header on every page. Blind users really appreciate being able to jump straight to the unique content of each
page.
Potential Trade-offs
None.
Mechanics
The first step is to identify the pages where skip links are likely to be helpful. On some sites with common
sidebars and headers, this is pretty much every page. On other sites, it is only certain pages. The usual pattern
is that a header or left sidebar, or both, precede the actual content of the page when viewed in HTML:
<div id="header">Blah blah blah</div>
<div id="leftnav">Blah blah blah</div>
<div id="main">Blah blah blah</div>
The visual layout of what comes first does not matter as much, though how much it matters can vary from one
screen-reading program to another. (Some screen readers just follow the raw HTML. Others try to scrape the
text off the screen after the browser has laid it out and rendered it.)
Search WWH ::




Custom Search