G124Poner al principio de la página enlaces a cada zona

Por qué es importante

Sin estos atajos, quien navega con teclado debe recorrer todos los enlaces de la cabecera para llegar a lo que busca. Lo repite en cada página.

Es muy útil en portales con muchas zonas independientes, como la web de un ayuntamiento o un periódico. Ayuda a quien no usa ratón y a quien usa lector de pantalla (programa que lee en voz alta lo que hay en la pantalla).

Cómo se hace

1. Coloque la lista de enlaces lo primero de la página. Antes de ella no debe haber otros controles.
2. Use textos que digan adónde lleva cada enlace: «Ir al contenido principal», «Ir al buscador».
3. Haga que cada enlace apunte al id de su zona.
4. Puede ocultar la lista hasta que reciba el foco, pero debe verse bien cuando lo reciba.
5. No ponga demasiados enlaces: tres o cuatro suelen bastar.

Cómo comprobarlo

1. Cargue la página y pulse Tab: el primer elemento enfocado debe ser uno de estos enlaces.
2. Confirme que cada enlace se ve cuando tiene el foco.
3. Active cada uno y compruebe que el foco llega a su zona: al pulsar Tab de nuevo, se avanza desde allí.

Ejemplo

Tres enlaces al principio de la página llevan al contenido, al buscador y al menú.

<ul class="atajos">
  <li><a href="#contenido">Ir al contenido principal</a></li>
  <li><a href="#buscador">Ir al buscador</a></li>
  <li><a href="#menu">Ir al menú</a></li>
</ul>
<header>…</header>
<nav id="menu" tabindex="-1">…</nav>
<main id="contenido" tabindex="-1">…</main>