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, también llamada migas de pan (del inglés breadcrumbs), consiste en un grupo de enlaces dispuestos en línea que indican el camino jerárquico hasta la página actual.
<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.
- Todos 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.
La relación entre documentos 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" />
...
El elemento <link>
se incluye dentro de la sección <head>
al principio del documento.