HTML and CSS Reference
In-Depth Information
The link should go after the main page heading, but before the navigation menu. Most accessibility
experts advise leaving the skip link visible. But if this destroys your design, you can hide the link with absolute
positioning. For the benefit of anyone using the keyboard to navigate, you can display the link while it has
focus.
In left2col_skiplink.html, the link has been added at the top of the sidebar like this:
<div id="sidebar">
<a href="#main">Skip to main content</a>
<h3>Sidebar heading</h3>
The following styles hide the link and display it at the top of the sidebar when it has focus:
#sidebar {
width: 29%;
float: left;
padding: 2%;
position: relative;
}
a[href="#main"] {
position: absolute;
left: -2000px;
}
a[href="#main"]:focus {
left: 20px;
top: 38px;
}
eXerCISe: teStING the SKIp LINK
This brief exercise demonstrates how the skip link works for keyboard navigation. Sadly, the only
mainstream browser that supports keyboard navigation with a skip link is Firefox.
1.
Load left2col_skiplink.html in Firefox, and press the Tab key until the skip link
appears (see Figure
12-19
).
