Skiplink

Let the skiplink to content be the first link on the page.

HTML


<body>
  <a href="#content" class="visually-hidden">Skip to content</a>
<!-- recurring elements like header and navigation -->
  <div id="content" tabindex=-1>
<!-- all content including H1 -->
  </div>
</body>

CSS


.visually-hidden
{
  position: absolute;
  overflow: hidden;
  height: 1px;
  width: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  word-wrap: normal;
}

.visually-hidden:focus
{
  position: relative;
  overflow: auto;
  height: auto;
  width: auto;
  clip: auto;
  left: auto;
  top: auto;
 /* choose your own position and style */
}

Also get the CSS-code for visually hidden

Chrome bug solved, but ...

You don't need tabindex=-1 any more to avoid Chrome from moving focus to the anchor. Read the long thread at Chromium Bugs. But then there is Internet Explorer; so please keep using tabindex=-1 for a little while.

Some inspiration