In my first article entitled “What are skip links?“, I introduced what skip links are and how they serve a function to improve the usability and accessibility of your site.
In part two of this series dealing with skip links, I would like to discuss two theories that can divide designers and developers over whether skip links should be visible or not on your site.
Hide them off screen
The first theory is that there is no problem with hiding your skip links to sighted users. Screen space is a precious commodity in the design world that is rich in graphics and visual aspects of a site’s design. By hiding your skip links with CSS, you are still making them visible to users that might need them, such as screen reader technology. Also, by hiding them, you are leaving them accessible to tabbed navigation users that visit your site.
Another aspect that is growing in popularity is the use of web enabled mobile devices such as PDA’s and cell phones. These devices can also benefit from skip links, although designing your site with a mobile device style sheet is a better option. Having hidden skip links with PDA’s and mobile devices can create some problems and these are discussed in the next section.
One of the popular screen reader technologies is the Lynx Browser. If you are using the Firefox browser, there is a great plugin called the Yellowpipe Lynx Viewer that will allow you to see what your site looks like to a Lynx Browser user. This is a great tool to drop into your Firefox development and testing “bucket” as it will reveal what order your code is “seen” in by users of the Lynx browser. If you’re not using the Firefox browser, you can also use an online version of the Lynx browser by visiting delorie.com.
By hiding your skip links off screen with CSS, you are still providing accessibility and usability features for those users that need them. However, this leads us to an interesting discussion in the next theory of why they should be visible.
Keep them visible
The second theory about skip links is that they should be visible to all users and visitors of your site. In an interesting older article entitled “Skip Link Pros and Cons“, Mike Cherim and Gez Lemon debate the issue of whether to hide or show skip links.
Gez Lemon’s point of view is that if you have skip links and hide them, then you are limiting the usability aspect of the skip link. If a user comes to your site and doesn’t know that a feature is available to them, such as a skip link, then they might not know it and be able to use it.
To quote Gez from the article:
People with mobility problems benefit from mechanisms to bypass groups of links. For people using user agents that don’t provide mechanisms to navigate around a well-structured document, or people unaware that their user agent has those capabilities, then it’s commendable that some developers/designers implement them for their users. Hiding them makes no sense, as it totally depends on the user being able to understand the mindset of a developer that wants to “tick off” a problem, without much regard as to whether or not the solution is discoverable and usable.
With the growing popularity of mobile browsing, I can see that this is a very good point to consider. Mobile devices have smaller screens, and unless you have a mobile device style sheet, you could possibly be limiting the number of users that can access your content easily. Having visible skip links for mobile devices will allow those users to quickly skip to the area of the site that they desire to find, without going through numerous other links and content.
A great book on designing for mobile web devices can be found by visiting Cameron Moll’s site Mobile Web Design.
Mike Cherim’s view is that as long as the skip links are included, you are already one step ahead of most site’s for accessibility and usability issues. Even though they are hidden, the users that benefit the most from them will be able to access them.
So, the solution is?
This really depends on you and your site. There are many sites out there that use either hidden or visible skip links in their designs. The choice is ultimately up to you on whether you show the links, or hide them off screen with CSS. I would suggest using the skip links that most sites use on the bottom of long pages of content, or just someplace in the footer that allows for a user to click on a skip link that will take them back up to the top of the page.
As a developer or designer, the choice is up to your client. You can argue both points of whether to show them, or hide them as they are both valid arguments. Whether you choose to do either is up to you, but at least you have them in your site which is a great usability and accessibility plus for your design.
In part three of this series, I will show you how to code the links into your site using CSS and discuss the best practices for coding them to allow for validity and accessibility.