G123Añadir un enlace al principio de un bloque de contenido repetido para ir al final del bloque

Enlaces para saltar la navegación

Las páginas del sitio web de una organización incluyen una barra de navegación o menú principal con enlaces a las secciones principales del sitio, al mapa del sitio, a información sobre la organización y a cómo contactar con ella. El primer enlace de esta zona se titula «Skip Navigation Links» («Saltar los enlaces de navegación»). El usuario activa el enlace para saltarse estos enlaces.

El índice de un libro

Un libro contiene un índice dividido en un conjunto de páginas. Al principio del contenido de cada página del índice hay enlaces para cada letra del alfabeto, que llevan al punto del índice donde empiezan las entradas que comienzan por esa letra. El primer enlace del conjunto se titula «Skip Links into Index» («Saltar los enlaces al índice»). El usuario activa este enlace para saltarse los enlaces.

Varios conjuntos de enlaces

Todas las páginas de un sitio web incluyen una sección con enlaces al mapa del sitio, a información sobre la organización y a cómo contactar con ella. Todas las páginas de cada sección del sitio contienen además un conjunto de enlaces a sus subsecciones. El primer enlace del primer bloque se titula «Skip Navigation Links» («Saltar los enlaces de navegación») y salta el primer conjunto de enlaces. El primer enlace del segundo bloque se titula «Skip Section Links» («Saltar los enlaces de la sección») y salta los enlaces de las subsecciones.

Página HTML con varios bloques de navegación

Este ejemplo muestra tanto el uso de elementos de encabezado al principio de cada sección (H69) como de enlaces que saltan al final de cada sección. Esto permite a las personas saltarse los bloques de contenido repetido mediante la navegación con teclado o mediante la navegación por encabezados, según las capacidades de sus agentes de usuario.

<a href="#content">skip navigation</a>
<h2><span id="main-label">Main</span> Navigation</h2>
<nav aria-labelledby="main-label">
  <ul>
    <li><a href="#subnav">Sub Navigation</a></li>
    <li><a href="/a/">Link A</a></li>
    <li><a href="/b/">Link B</a></li>
    <li><a href="/c/">Link C</a></li>
  </ul>
<nav>
<h2 id="subnav"><span id="sub-label">Sub</span> Navigation</h2>
<nav aria-labelledby="sub-label">
  <ul>
    <li><a href="#ultranav">Ultra Sub Navigation</a></li>
    <li><a href="/suba/">Sub A</a></li>
    <li><a href="/subb/">Sub B</a></li>
    <li><a href="/subc/">Sub C</a></li>
  </ul>
</nav>
<main id="content">
  <h1>Content title</h1>
  <p>Now that I have your attention...</p>
</main>