Saltar al contenido principal

Ubicación

Proporciona información al usuario acerca de dónde se encuentra dentro de un sitio web.

Indicar la ubicación en la navegación

Orienta al usuario indicando visualmente dónde está mediante la interfaz de navegación.

Barra de navegación de Twitter.
Barra de navegación de Twitter indicando la página en la que nos encontramos.

Esta técnica resulta especialmente útil cuando se trata de pasos dentro de un proceso, como el registro en un sitio web o una compra online.

Nota: Además de la indicación visual, la navegación debe estar estructurada semánticamente y, en caso necesario, proporcionar una alternativa textual.

Ruta de navegación

La ruta de navegación o migas de pan (del inglés breadcrumbs) consiste en un grupo de enlaces colocados en línea, que indican el camino para llegar a la página actual en orden jerárquico.

Ejemplo
HTML
<nav aria-label="Ruta de navegación">
    <ol class="breadcrumb">
        <li><a href="/">Inicio</a></li>
        <li><a href="/pagina1.html">Página 1</a></li>
        <li><a href="/pagina1.html" aria-current="page">Página 1a</a></li>
    </ol>
</nav>

La ruta de navegación debe cumplir los siguientes requisitos:

  • Se debe incluir dentro del elemento nav para indicar que se trata de una sección con enlaces de navegación y tiene que ir identificado con una etiqueta (aria-label).

  • Se debe estructurar utilizando una lista ordenada, porque existe un orden de sucesión o de jerarquía entre los elementos.

  • Los elementos deben ser enlaces. El enlace correspondiente a la página actual se debe indicar con el atributo aria-current="page".

  • Los separadores visuales entre los enlaces se deben añadir mediante CSS.

El elemento link permite describir la relación que existe entre una página y el resto dentro de una colección.

El tipo de relación se indica mediante el atributo rel que puede tener los siguientes valores:

  • Start: Se refiere al primer documento dentro de una colección.
  • Next: Se refiere al siguiente documento en una serie ordenada.
  • Prev: Se refiere al documento anterior en una serie ordenada.
  • Contents: Se refiere a un documento que sirve como tabla de contenidos.
  • Index: Se refiere a un documento que proporciona un índice para el documento actual.
HTML
<link rel="contents" href="contenidos.html" title="Tabla de contenidos">
<link rel="index" href="indice.html" title="Índice">
<link rel="prev" href="capitulo01.html" title="01. El origen">
<link rel="next" href="capitulo02.html" title="02. La vida">

Nota: El elemento linkse incluye dentro de la sección head al principio del documento.