L’elemento contenitore è sempre un <nav>, ma poi usiamo un <ol> dato che è una “ordered list”, cioè una lista ordinata di elementi. La pagina selezionata usa aria-label sul tag <a>.
Esempio reale con dati strutturati
Vediamo un esempio più completo e comprensivo di vari dati strutturati.
<nav aria-label="Breadcrumbs" class="breadcrumb-trail breadcrumbs" itemprop="breadcrumb">
<ol class="breadcrumbs-list" data-element="breadcrumb" itemscope="" itemtype="http://schema.org/BreadcrumbList">
<meta name="numberOfItems" content="4">
<meta name="itemListOrder" content="Ascending">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="breadcrumb-item trail-begin"><a href="/" rel="home" itemprop="item"
aria-label="Vai alla pagina Home"><span itemprop="name">Home</span></a>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="breadcrumb-item"><a
href="/news" itemprop="item"
aria-label="Vai alla pagina News e comunicazioni"><span itemprop="name">News e comunicazioni</span></a>
<meta itemprop="position" content="2">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="breadcrumb-item"><a
href="/tipologia-articolo/news-e-media/" itemprop="item"
aria-label="Vai alla pagina News e media"><span itemprop="name">News e media</span></a>
<meta itemprop="position" content="3">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="breadcrumb-item active"
aria-current="page"><span itemprop="item"><span itemprop="name">Titolo della news</span></span>
<meta itemprop="position" content="4">
</li>
</ol>
</nav>
In questo caso abbiamo usato dei metadati per indicare il numero di elementi della navigazione, e l’ordine nel quale sono disposti, se crescente o decrescente. Usiamo “position” per indicare la posizione di un elemento nell’elenco, e itemListElement per indicare che l’elemento è effettivamente parte di una lista.
Questi ultimi attributi non sono necessari per l’accessibilità ma, come tutti i dati strutturati, potrebbero essere utili ai browser o ai crawler per identificare meglio la struttura del documento HTML.
