Saltar al contenido principal

Ubicación

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

Ubicación en la navegación

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

Barra de navegación con un enlace subrayado, indicando la página en la que nos encontramos.
Barra de navegación de Web Accesible.

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.

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.

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

  • Utiliza el elemento nav para indicar que se trata de una sección con enlaces de navegación e identifica el tipo de navegación con la etiqueta aria-label.
  • Utiliza una lista ordenada, ya que existe un orden de sucesión o de jerarquía entre los elementos.
  • Los elementos deben ser enlaces, excepto el correspondiente a la página actual. Este último se puede identificar 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.

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

Comprobación

  • Comprueba si aparecen pistas visuales en el menú de navegación sobre en qué página se encuentra el usuario.
  • En sitios con varios niveles de páginas, verifica que existe una ruta de navegación indicando el camino hasta la página actual.