G65Proporcionar una ruta de navegación (migas de pan)

Portafolio de un fotógrafo

El sitio web del portafolio de un fotógrafo se ha organizado en distintas galerías, y cada galería se ha dividido a su vez en categorías. Un usuario que navegue por el sitio web hasta una página concreta que contiene la foto de un pingüino papúa vería la siguiente ruta de navegación en la parte superior de la página web:

Home / Galleries / Antarctica / Penguins / Gentoo Penguin

El marcado de este ejemplo implementa como enlaces todos los elementos de texto salvo «Gentoo Penguin» (pingüino papúa). Para dar estructura semántica a la ruta de navegación, los enlaces están contenidos en un elemento de lista, que a su vez está anidado dentro de un elemento nav con un aria-label. La ubicación actual, Gentoo Penguin, se incluye como último elemento de la ruta de navegación, pero no se implementa como enlace, para diferenciarla visual y semánticamente de los elementos anteriores de la ruta.

El atributo aria-current se especifica en el último elemento de la lista de la ruta para identificarlo por software como el elemento que representa la página web actual. El marcado se estilizaría con CSS para mostrar la ruta de navegación en horizontal.

<nav aria-label="Breadcrumbs"> 
  <ul>
    <li><a href="/">Home</a> /</li>
    <li><a href="/galleries">Galleries</a> /</li> 
    <li><a href="/galleries/antarctica">Antarctica</a> /</li>
    <li><a href="/galleries/antarctica/penguins">Penguins</a> /</li>
    <li aria-current="page">Gentoo Penguin</li>
  </ul> 
</nav>

Ejemplo funcional: Ejemplo de ruta de navegación

Sitio de comercio electrónico

La arquitectura de la información de un sitio web de comercio electrónico está categorizada desde lo general hasta subsecciones de productos cada vez más específicas.

Está en: Acme Company → Electrónica → Ordenadores → Portátiles

La ruta empieza con «You are here» (Está en) y termina con la página actual. Los elementos de la ruta son enlaces que se pueden pulsar o tocar, salvo «You are here», que es un encabezado estático. Este ejemplo utiliza el símbolo de flecha derecha (→) como separador.

En este ejemplo se utilizan un elemento h2, un elemento nav con un atributo aria-label y una lista no ordenada para aportar semántica. El marcado se estilizaría con CSS para mostrar la ruta de navegación en horizontal.

<nav aria-label="Breadcrumbs"> 
  <h2>You are here:</h2> 
  <ul>
    <li><a href="/">Acme Company</a> &#8594;</li> 
    <li><a href="/electronics/">Electronics</a> &#8594;</li>
    <li><a href="/electronics/computers/">Computers</a> &#8594;</li>
    <li><a href="/electronics/computers/laptops/" aria-current="page">Laptops</a></li>
  </ul> 
</nav>

h2, ul, ul li{ display: inline;}
nav > h2{ font-size: 1em; } 
ul { padding-left: 0em; }

Ejemplo funcional: Ejemplo de ruta de navegación