Hiding a skip link over a textured background
We usually hide skip links by setting the default, visited, and hover states to the same color as the underlying background, then we allow them to be revealed by keyboard surfers by setting a contrasting color and background on the active and focus link states, so that reaching the links via the keyboard serves to "light hem up". If you own one of our CSS PagePacks, you should be familiar with this CSS technique.
In the event you have an intricate pattern for your page's background, simply setting the skip link to a specific background color won't get the job done. An alternative method is needed. To accomplish our mission, we'll wrap the skip link inside an absolutely positioned DIV that is given a top value of negative 300 pixels - effectively hiding it off-screen. The active and focus states of the link element are then set to a top value of 300px, making the link visible when accessed via the keyboard tab key (or Opera's A key).
Note: While there might seem to be simpler ways of doing this, this method allows for multiple skip links using acceptable separation characters between them. This presents a more flexible solution as it accomodates pages that require more than one link to be hidden.
Let's explore the markup and CSS we'll need to use.
Here is the markup:
<div id="sn"> <a href="#skipper">Skip navigation</a> | <a href="#skipper">Skip to somewhere else</a> </div>
And here is the CSS:
#sn {
position: absolute;
width: 80%;
top: -300px;
left: 0;
}
We position the wrapper absolutely, set an arbitrary width, set top position offscreen and left position to zero.
#sn a {
position: absolute;
top: 0;
}
We set the skip link <a> element's position to absolute and its top value to 0. While setting the top position is not necessary, we do it as a precautionary measure as not setting it explicitly can sometimes cause problems in certain browsers.
.p7ie6Fix:active, #sn a:active, #sn a:focus {
top: 300px;
color: #FFFFFF;
text-decoration: none;
background-color: #333333;
}
The active and focus pseudoclasses describe a link's style when it is given focus or while it is being clicked. Normally, only the focus class would be needed, but IE5.x and 6.x Windows do not support the focus class. Fortunately, IE implements the active class the same way that modern browsers implement the focus class - so we're covered by defining both classes.
We set the top position to 300px, bringing the links down, out of their containing box and into the visible window, while simultaneously giving them a contrasting color/background combination.
What in heaven's name is the .p7ie6Fix:active class? IE6 needs a kick in the pants to render the active class on elements that are first children of other elements when the link is reached via the keyboard. Placing this bogus selector before the real ones provides just the kick we need.
Test it out
Load our test page to see this technique in action.
In conclusion
That's it! We have a hidden, but accessible, skip link that works in all popular browsers and we did it with a minimum of fuss.