Chapter #63. Add "Skip to Content" Links Above the Header and Navigation

As previously mentioned, some users with a visual impairment will be using screen-reader technology to read the text elements of your interface aloud.

One problem is that it's easy for these users to get lost in the mess of links and content on an especially-busy page. Users need a way to get to the navigation. For fully-sighted users, the location of the navigation is a well-accepted pattern, but partially-sighted users may not have the same "mental model" of a web page or web app.

Adding a "skip to content" link to the top of your site (it need only be visible to screen readers) will allow the user to skip past the navigation effortlessly. They don't want to have to hear all your menu options read aloud, over and over, each time a page is loaded.

Here's the CSS that the W3C recommends using to position the link off-screen for sighted users:

#skiptocontent {
  height: 1px;
  width: 1px;
  position: absolute;
  overflow...