Miga de pan (breadcrumb)
Indica dónde está la página actual dentro de la jerarquía del sitio. El separador se dibuja con CSS, así que el lector de pantalla solo lee los enlaces.
<section id="top" class="iv-stack iv-u-gap-4">
<nav class="iv-breadcrumb" aria-label="Breadcrumb">
<ol class="iv-breadcrumb__list">
<li class="iv-breadcrumb__item"><a href="#top">Documentation</a></li>
<li class="iv-breadcrumb__item"><a href="#top">Components</a></li>
<li class="iv-breadcrumb__item"><a href="#top">Navigation</a></li>
<li class="iv-breadcrumb__item" aria-current="page">Breadcrumb</li>
</ol>
</nav>
<h2 class="iv-u-m-0">Breadcrumb</h2>
<p class="iv-u-m-0">
The links in this demo point back to this section, so nothing leads to an
invented page. The separator is a masked SVG on <code>::before</code>: it is
never announced and it follows the text colour in both themes. The last item
is plain text marked with <code>aria-current="page"</code>.
</p>
<nav class="iv-breadcrumb" aria-label="Breadcrumb, single level">
<ol class="iv-breadcrumb__list">
<li class="iv-breadcrumb__item" aria-current="page">Documentation</li>
</ol>
</nav>
</section>Marcado
nav.iv-breadcrumb[aria-label="Breadcrumb"] → ol.iv-breadcrumb__list → li.iv-breadcrumb__item. El último elemento lleva aria-current="page" y no es un enlace.
Errores frecuentes
- Escribir los caracteres separadores en el HTML (se leen en voz alta).
- Enlazar la página actual a sí misma.