Skip links need to be at least temporarily visible

Many sites use skip links as a way of helping people who do not use a mouse to quickly jump to the main content. It can be very useful, which I notice myself as I often use my keyboard to navigate instead of the mouse.

One problem that I run into on some sites is that the skip links are hidden. It’s a bit strange that after realising that skip links can be beneficial and adding them to a site, the developer or designer then hides them, either from everybody or from everybody but screen reader users.

In both cases, the skip links are visually hidden at all times unless you turn off CSS. Not very accessible.

Bad: display:none

In the case of skip links being hidden from almost everybody (they are visible only to people who use a browser with no CSS support), the links are hidden with display:none. As I mention in Hiding with CSS: Problems and solutions, display:none really means "Pretend that this element doesn’t exist. Do not display it, print it, or speak its contents."

Bad: Off-left

In the other case, when skip links are useful only to people who use a browser with no CSS support or use a screen reader, they are positioned outside the visible area of the viewport with the off-left technique, or a variant of it.

While this makes skip links technically possible to use without disabling CSS, it can be very hard to realise that they exist and where they will take you, since the only visual feedback you get is that nothing seems to happen when you tab into the page. If you look carefully at your browser’s status bar you may see the target of the skip link, but more often than not it will not tell you enough.

Better: Visible on focus

If you, for whatever reason, cannot use skip links that are always visible, at least use Links that become visible with keyboard focus. That way they aren’t completely hidden from those who benefit from them being there.

This post is a Quick Tip. Background info is available in Quick Tips for web developers and web designers.

Posted on September 29, 2009 in Quick Tips, Usability, Accessibility