====== 11.1.2. Include skip links ======

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.

<code html>
<a id="skip" href="#content">Go to content</a>

[…]

<div id="content" role="main">
    […]
</div>
</code>

<note attention>**Warning**

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:


<code css>
a#skip
{
position: absolute;
left: -999999px;
}

a#skip:focus
{
position: static;
}
</code>
</note>

<note>**Note**

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. 

<code html>
<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>
</code>
</note>

===== Aller plus loin =====

  * [[http://wiki.accede-web.com/notices/dysfonctionnement-ancres-clavier-ie|Corriger le dysfonctionnement des ancres activées au clavier sous Internet Explorer]].
  * [[http://blog.atalan.fr/des-liens-devitement-astucieux/|Des liens d’évitement astucieux]].


===== Related recommendations =====

<note bulle>
  * Previous recommendation: [[notices:html-css:veiller-a-ce-que-l-ordre-de-tabulation-suive-la-logique-de-l-ordre-de-lecture]]
  * Next recommendation: [[notices:html-css:garantir-la-visibilite-de-la-prise-de-focus-au-clavier]]
</note>