WHAT

A skiplink is a piece of code at the top of a web page that is a clickable instance that links to an anchor point usually where the main content on the page starts, but can be any where as set.

This can be hidden or visible. On this site it is visible.

WHY

It allows blind and sighted users to bypass repetitive content normally at the top of the page and jump directly to the main content of the page or other nominated element.

For accessibility it serves a specific purpose for users who navigate with screen readers. But, equally it has a role for sighted users.

If you imagine a header that is overcrowded with menu's, banners and all manner of noise, for a sighted person it is easy to scan but a visible skip link allows that user to jump past it. However for a screen reader all of those element will be read out taking up time and potentially frustrating the user.

HOW

The code for a skip link might look like this:

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

And the anchor point like this

<section id="skiplink"</section>

Have a look here >>>>>>

Clicking on the skip link at the top left corner of the page jumps down to the content in this instance an article bypassing the header and the photograph.

CSS has been applied to make the link text on focus go red and the a broken border appear.