So-called "skip links" are a well-known accessibility feature, allowing users to skip a page's navigation and any other structural elements and go straight to the content. They have the added bonus of being very handy to users of handheld devices such as PDAs and mobile phones. I'd even go so far as to say they might actually benefit mobile users more than users of assistive technologies. But either way, no one can deny that skip links are a highly useful feature.
So, that being said, should skip links be hidden or visible? Mike Cherim and Gez Lemon dish it out on Accessites.org. Both make compelling points, and I can't say my mind has been made up one way or the other after reading this article - but it is certainly an excellent starting point for design and accessibility discussions.
What are your thoughts about skip links? Do they warrant screen real estate or not?
Skip links - hidden or visible?
Reader Comments
(Page 1)2. From what I've read, using display:none on a skip link will cause a screen reader to ignore the link (since screen readers apparently ignore display:none content). The typical way of dealing with them is giving them a negative top or margin-top. The screen readers still read them and normal browsers don't see them. The only drawback is that the tab order is funky, as the skip link still retains a tabindex of 1 (and should retain it).
As far as usefulness on other devices, using a separate stylesheet for mobile devices via media="handheld" in the link tag would allow the skip link to be presented to the user. Or, if media="projection", one might want to show the link since the user may be using a clumsy laptop / trackball / gyro mouse.
So, while I don't think any media="screen" browsers need to see it (unless you have a navigation that pushes content past the "fold," which I think is unlikely), it can still be available for screen readers. Devices that could make use of the skip link should understand their media type and use the correct stylesheet, which can have the link available for viewing.
Having typed all this, then read the article, the line "People with mobility problems benefit from mechanisms to bypass groups of links" is another problem with media="screen" not showing the link. I'm not sure what exactly constitutes a mobility problem. The only instance I can think of where having a visible skip link would help is to push the page down to change the tab order of links so the user doesn't have to tab through all the navigation to get to links in the content. I don't know any people with mobility problems, so I'm not sure whether they browse the web with a keyboard or a pointing device. If it is a keyboard, that is a good case for showing the link. If it is a pointing device, the show content link may not be as big of an issue for them.
If anyone can clear up my last caveat, I'd appreciate the info.
As far as solutions go, http://www.dustindiaz.com/ uses a separate "skip navigation" bar across the top of the page. That seems to solve the problem well. I suppose another option would be to position the element somewhere unobtrusive to the design (e.g. top left or top right). I might incorporate that on the redesign of my site instead of positioning the skip off-screen unless anyone can point out glaring errors in this idea.
Sorry that this was a bit long-winded.
Posted at 4:09PM on Jun 8th 2006 by Robert Brodrecht
3. This is exactly the kind of thing you'd want to do with CSS3 media queries...
Posted at 10:15AM on Jun 9th 2006 by Joost de Valk
4. Another solution is to have the bar invisible till you hover over it. A example is Molly's site at http://molly.com.
Posted at 12:03PM on Jun 18th 2006 by Mike Bryan
5. I'm not interested.
Posted at 4:01AM on Jun 20th 2006 by eastboy
1. They shouldn't be display:none, but they can be made invisible by absolute positioning, and width and height being set to 1px.
Posted at 3:46PM on Jun 8th 2006 by Kevin Lawver