A skip link of the type “Go to content” should systematically be included on each page in order to make navigating with the keyboard easier.
This link must be the first interactive element in the HTML code. A skip link links to an anchor on the same page and lets the user skip directly to the main content of the page.
<a id="skip" href="#content">Go to content</a> […] <div id="content" role="main"> […] </div>
While it is strongly recommended to display this link, it can be hidden by default, if it is not planned for in the graphical mock-ups. On the other hand, it must always be made visible when the keyboard focus is set on it.
The skip link must never be hidden using the CSS properties display: none; and/or visibility: hidden; otherwise it will not be reachable with the keyboard.
Preferably, you should use another solution, such as the one shown in the code below:
a#skip { position: absolute; left: -999999px; } a#skip:focus { position: static; }
Sometimes the user needs to press the TAB key many times to access the main menu and/or the search engine from the top of the page.
It is then a good accessibility practice to include a list of skip links.
<ul id="evitement"> <li><a href="#content">Go to content</a></li> <li><a href="#menu">Go to the menu</a></li> <li><a href="#search">Go to search</a></li> </ul>