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">
<!-- all content including H1 -->
</div>
</body>
CSS
.visually-hidden
{
position: absolute;
overflow: hidden;
height: 1px;
width: 1px;
clip: rect(1px, 1px, 1px, 1px);
}
.visually-hidden:focus
{
position: relative;
height: auto;
width: auto;
left: auto;
top: auto;
/* position and style what fits best */
}
Also get the CSS-code for visually hidden
Chrome bug solved
You don't need tabindex=-1
any more to avoid Chrome from moving focus to the anchor. Read the long thread at Chromium Bugs.