Skip links: visible or hidden?
Most sites built by accessibility-aware web professionals these days either use skip links of some kind or are constructed in a way that makes it easy for non-mouse users to navigate without using skip links.
Just in case you aren’t familiar with the term, skip links are internal links that help users navigate to different parts of a page. They were originally intended as a navigation aid for people with disabilities, but they are a also very useful to mobile phone users.
Many different ways of implementing skip links have been described over the last few years, and ironically most methods involve hiding the links from many of those who need them the most. Let it be known that I’m guilty of using such methods myself.
Gez Lemon and Mike Cherim take a look at a few different ways of providing skip links, as well as more in-depth information on why they are needed Skip Link Pros and Cons, published at Accessites.org.
They come to slightly different conclusions, and I can relate to both. I understand a designer’s reluctance to make skip links visible, but I also agree with the point Gez makes about hidden skip links being difficult to use.
See also Jim Thatcher’s Skip Navigation Links for more in-depth information on various skip link techniques.
- Previous post: Accessibility statements and site viewing options
- Next post: ONOFF: another failed redesign
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
I regard 'skip links' as another of those browser-functionality duplications, so I rather not include any.
However, I know browsers are not all that functional when it comes to 'skip' or 'jump' so I may include some if I think they are of any use.
Such 'skip links' should be permanently visible - regardless of environment, as that's the only way to make them useful to everyone who might like to use them. I dislike the 'visible on hover' solutions - used on the WaSP site and elsewhere, because the "flashing" disturbs me. Maybe I'm allergic :-)
Like a lot of people I get designs from designers who a lot of the time are miffed with accessibility requirements, and would be more unhappy if I slapped skip links in. These days I tend to have links show up on :focus which means that keyboard and screenreader users will get them, and mouse users won't. A fair compromise in my eyes...
RE: Robin I am in the same boat with you , the website I built and maintain at www.barbourbooks.com is one that I wouldn't be able to put the skip links/navigation (they are there, just hidden). I don't think I could get away with putting them out in the open (though we have space for them at the top).
So - I see/understand both sides, and if I COULD I would put them out in the open - but with the site listed above, it just isnt feasible - it wouldnt make it past marketing.
There was an amazing study on this by the Auzies :) http://www.usability.com.au/resources/source-order.cfm
I always hide my skip links for the mobile and disabled users. Have yet to make them a visual part of the design.
If possible I'd make them visible but not all designs and not all clients really want them there. Client's don't always get it for sure. So every situation has its own context I guess where you have to weigh up the alternatives.
My point is its about making an educated decision at the time on a project.
That being said I recently did some work on a public service website here and found a full resistance to even having them included at all - the old site had them. The new site isn't live yet but to date I think they wont' use skip links at all regardless of some pages having 30 menu items and only 1 paragraph or a sentence of text. Severely red buttocks should ensue for that decision IMO on public service stuff.
K the short of my comment just being the real world versus best practise there is quite often a trade off. I'd personally prefer they existed visually in all designs, in some fashion.
I love a beautiful page. I wish I could design them, but I have to rely on others to create that extra special look. That said, there is no design so attractive that it can stand against a lack of usability. That's what accessibility is, usability with conditions.
I challenge anyone to actually use their designs—with and without styles or images—by the keyboard only. The pure usefullness of visible skip links will become obvious on any page with a large number (defined by "when do you get tired of tabbing?") of links.
I see no sane reason to hide the skip links. If your design is really all that and a bag of chips, you should good enough to work one or two into the mix.
Rant over, carry on.
cheers,
gary
I use visible skip links on my own site. But for other sites I've worked on, by the time I receive the designs to build the site, they invariably omit them and its too late to go back and alter the design (often due to all the internal politics and client approval process, during which they don't actually consult the developers).
However, I have heard comments from users that it is confusing to have links that don't have any relevance on a "normal", 1024x768 screen. Skip to navigation? It's already there. Skip to content? It's already there.
So, I usually do the show-on-focus thing.
I actually do it both ways. It all seems to be depend on the design. Visible skip links -- which I think are better named "Jump to [target]" -- will always be the best, most universal solution. But shamelessly I hide them at times (with offests, not display:none) and allow them to be available on focus.
I had one client remove hidden jump links from a design I made. Hidden ones! It was irrational and illogical of them. It actually made me a bit angry because they removed a barrier buster for a lot of people for absolutely no reason at all.
Here’s another screenreader matrix from 2003. Their conclusion is “off-left.”
Sorry, comments are closed for this post.