the broken skip link

Skip links are incredibly useful when there are large navigation menus you don't want to force your users to tab through on every page. And they are incredibly easy to implement: the only thing you need is a link right at the top of the page, linking to the id of the main section.

<a class="skip-link" href="#main-content">skip to content</a>

Then, because you probably don't want it to be visible by default, hide it using the clip technique and make it visible on focus:

.skip-link {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
}
.skip-link:focus {
    clip: auto;
}

Now press enter on the link, and you'll be taken straight to the main content. But now try tabbing again. If you are on any browser except Firefox, you'll be taken straight back up to the top of the page. This is because most browsers, although they transfer visual focus to the main content, will keep keyboard focus where it was when we activated the skip link. How to solve this?