Skip to content links

Skip to content links should be the first link on a web page and appear top left (for screen magnifiers). It is advisable to make the link visible at all times though some designs may prevent. If the link must be hidden then ensure it becomes visible when using the keyboard only. Here’s a suggested method:

<div id="accessMenu">
  <a accesskey="S" href="#content">Skip to content; Access key S</a>
</div>

#accessMenu {position:absolute}
#accessMenu a {
    position:absolute;
    width:30em;
    left:-200em
}
#accessMenu a:active,
#accessMenu a:focus {
  position:absolute;
  left:0;
  top:0;
  z-index:100;
  color:red;
  background:white
}