Many web designers implement “skip links” on their sites in order to aid visitors with alternate devices like mobile phones or screen readers. The links act as a way to navigate quickly to main parts of the page; if implemented correctly, they can be a good step towards keeping a web site accessible.
How to implement these links is a hot topic of discussion among web professionals. I recently received this question regarding skip links and whether to show them or hide them in a given layout.
The Question
Hi, I just wanted to ask you a quick question about accessibility for this site I am working on… I was going to use the display:none CSS attribute for my skiplinks, but according to this site, it’s not ideal because users that use a keyboard but that are not blind (i.e., have to use TAB to get around) can’t see it and therefore can’t use it. Also, apparently, some screen readers don’t read them. So, that option aside, I’ve come up with a potential solution. This would be to put a small downward-facing arrow at the top right, with the ALT tag[sic] describing its use. It’s visible, and relatively unobtrusive. In your experience, is using display:none an industry standard, and is what the site said a concern? What do you think would be the best solution?
My Thoughts
My experience has been that a well-designed HTML document doesn’t need skip links at all. If you do need it, for a very busy or long page with lots of content, then it is a great way to aid site visitors.
On some of the sites I have worked on I’ve included a “Skip to navigation” link and tried to put the main content first in the source. For example, see my Travel/RV blog and turn off CSS. The skip link is under the page title but just on top of the main content. For other sites, like here on simpledream, the skip link text is “Skip to content” and is located just above the global navigation menu.
To hide or not to hide? This is very much a personal preference. Lots of accessibility experts claim all skip links should be visible (always). My preference is to hide them from sighted folks. Most designers or visually-oriented developers will follow the hidden approach unless they can come up with a creative way to show the visible skip link. As a general rule, and as you pointed out, hidden skip links only benefit screen readers and other alternate browsers and don’t provide an option for sighted keyboard users.
If I’m going to hide, what CSS rules to use? I’ve used “display:none” on almost every site, but I am now leaning towards a better approach. For example, setting the “text-indent” to “-9999px” or something similar (I’ve also used “width: 0; height: 0; overflow: hidden;” before with similar results). This keeps it visible in screen readers and alternate browsers that understand CSS. I think it’s valid to say that “display:none” is not the best solution for hiding the links since it’s possible that some screen readers will ignore them.
What’s the best solution? It really depends! Like a lot of web design and development issues, the best solution depends on the web site itself, especially its audience and purpose. For example, if a site expects lots of mobile device visitors, the visible skip links at the very top of the page will be ultra-important. It’s really useful on a mobile device (such as a cell phone) to be able to use a skip link to navigate rather than having to endlessly scroll. As mobile access gets more popular each day, this is an important consideration.
Conclusions
If you want the site to be clutter-free and clear, I would recommend hiding the skip link. If accessibility is more important than the look of the layout, then the arrow idea is superb. Go for it!
In a scenario where the main content of the page comes first in the HTML source, then you may be alright without a visible skip link since the important content will be right there for the visitor to read.
Further Reading
If you would like to read other opinions and explore test cases:
The Sensible Leader 