Ubicación
Proporciona información al usuario acerca de dónde se encuentra dentro de un sitio web.
Interfaz de navegación
Indica al usuario visualmente dónde está mediante la interfaz de navegación.
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.
<nav aria-label="Ruta de navegación">
<ol>
<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 etiquetaaria-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
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
:
rel="index"
: Indica el nivel superior dentro de una estructura jerárquica.rel="next"
: Se refiere al siguiente documento en una serie ordenada.rel="prev"
: Se refiere al documento anterior en una serie ordenada.
<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.