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 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.

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="#">Electrodomésticos</a></li>
        <li aria-current="page">Lavadoras</li>
    </ol>
</nav>

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 debe identificar con el atributo aria-current="page".
  • Los separadores visuales entre los enlaces se deben añadir mediante CSS.

El elemento link

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 link se incluye dentro de la sección head al principio del documento.

Criterios de conformidad WCAG 2.1