Skip links: visible or hidden... A solution?
A couple of months ago Roger Johanson posted an article called ”Skip links: visible or hidden?”, where he posed the question of whether skip links in HTML documents should be left hidden to graphical user agents, or whether they should be made visible. It’s a question of accessibility, and Roger’s article goes into detail about the issue itself, which this post will not (so I recommend reading his post if you are not familiar with it). I finally remembered to blog about a technique I’ve used for a few months that you may find a workable solution to the issue.
How I deal with skip links
I dislike the idea of having skip links permanently visible, eating up space and being unused by the majority of site visitors, so I hide them. But I also allow them to display visibly on hover, or tab through. My solution can be seen on this very page (with one gotcha, which I’ll get to later). If you move your mouse to the very top of the page you will see the skip links appear in a horizontal bar. Alternatively you can tab through the links on the page and you’ll also see the links appear top left of the page. This method makes the best of both worlds - no ‘clutter’ and ‘wasted’ space, and yet a completely accessible way of making those links visible on screen.
The HTML and CSS that make it work
The HTML
Note: line-wraps marked with a ↪
- <p class="accessibility”>Jump to ↪ <a href="#nav_main” id="beginning” title="accesskey 0″ accesskey="0″>main navigation</a> ↪, ↪ <a href="#content_main” title="accesskey 1″ accesskey="1″>main content</a></p>
This HTML is positioned immediately after the <body> opening tag, and outside of any container <div> that you might be using.
The CSS
- p.accessibility {
- position : absolute;
- display : block; width : 100%; height : 2em; margin-top : -1.65em; padding : .25em 0;
- text-align : center; z-index : 2; background-color : transparent; }
- p.accessibility:hover {
- margin-top : 0; padding-bottom : .85em;
- background : #0fe url(images/p_accessibility.png) repeat-x 100% 100%; }
- p.accessibility a:focus {
- position : absolute; left : 1em;
- margin-top : 2em }
- p.accessibility:hover a:focus {
- position : relative; left : 0;
- margin-top : 0; }
The eagle eyed among you will by now have spotted the gotcha I mentioned earlier. This technique won’t work in IE6 and below, because of a lack of support for the :hover pseudo-class on none anchor elements. Whether that’s actually as much of an issue as it first sounds (bearing in mind what we’re hiding) is a point I’ll leave the reader to decide.
Entry Information
- Posted:
- Wed, 23rd Aug 2006 at 21:08 UTC
- Filed under:
- Tags: