Is it a good idea to make "skip navigation" links invisible?

"Skip navigation" links are same-page links that allow users to skip past redundant navigational links that often appear across the top and/or down the left side of websites. For an overview of these links, see the AccessIT Knowledge Base article What is a "skip navigation" link?.

For sighted users, these links might be visually distracting or potentially confusing, particularly on pages where clicking on them produces no visible result. For this reason, many websites have deployed invisible "skip navigation" links. Some have done so using a tiny transparent graphic, set up as a link with an "alt" attribute set to "Skip to main content". Others have used cascading style sheet (CSS) techniques such as defining the text color of the link as being the same as the background color. If implemented using either of these methods, invisible "skip navigation" links are accessible to screen reader users.

However, "skip navigation" links are also useful for some sighted users. For example, users with low vision who are using screen magnification software can jump quickly to the main content of the page with this type of link. Otherwise they have to scroll around the magnified screen hunting for the main content. Also, users who navigate by keyboard rather than mouse, including people with upper mobility impairments might want to access a link in the main content of the document. A "skip navigation" link reduces the number of keystrokes required to reach the desired link. For both of these groups of users, the link must be visible in order for them to know that it is available.

Still, some web developers feel strongly that the potential confusion and distractibility of a visible "skip navigation" link warrants keeping it hidden. One solution is to make the link invisible until a keyboard user tabs to it, at which point it becomes visible. For example, suppose you have a web page with the following link at the top of the page:

  Skip to main content

Since the above link is of class "SkipNav", the "SkipNav" class can be defined using CSS to be invisible until a keyboard user tabs to it, as in the following CSS:

  .SkipNav {     color: #FFFFFF; /* same color as background */     text-decoration: none;  }  .SkipNav:active, .SkipNav:focus {     /* Becomes visible & underlined         when user tabs to it.        :active pseudo-class necessary for IE        :focus pseudo-class necessary for Mozilla      */     color: #0000FF;      text-decoration: underline;  }

Note that color is used to toggle the link between visible and invisible. Though it might be tempting to toggle between CSS properties display: none and display: block or between visibility: hidden and visibility: visible, these should be avoided because if the link is literally invisible or not displayed, it can never become visible because users are unable to navigate to it using the keyboard. Changing the color of the link is the only reliable method for implementing this technique.

For further information, see the Knowledge Base article Does CSS positioning eliminate the need for a "skip navigation" link?