Breadcrumb

Definizione — Il breadcrumb è una traccia di navigazione che rappresenta la gerarchia delle pagine (Home → Sezione → Sottosezione → Pagina). Aiuta utenti e tecnologie assistive a capire dove ci si trova e a tornare rapidamente ai livelli precedenti. È utile per l’orientamento, riduce i clic e sostiene la comprensione della struttura informativa.

Perché è importante (Accessibilità & SEO)

• Accessibilità: supporta i criteri WCAG legati all’orientamento e alla navigazione (es. 2.4.5 Multiple Ways AA, 2.4.8 Location AAA come best practice). Con una marcatura corretta aiuta screen reader e utenti tastiera.
• UX: riduce lo spaesamento in siti complessi (PA, e-commerce, portali documentali) e favorisce il ritorno a categorie e listing.
• SEO: migliora l’internal linking e può essere rappresentato come rich result se marcato correttamente (Schema.org BreadcrumbList).

Marcatura consigliata

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li><a class="text-primary" href="/">Home</a></li>
    <li><a class="text-primary" href="/servizi/">Servizi</a></li>
    <li aria-current="page">Audit di accessibilità</li>
  </ol>
</nav>

• Usa <nav aria-label="breadcrumb"> e un <ol> (lista ordinata). L’ultimo elemento ha aria-current="page" e non è un link.
• Il separatore (› /) deve essere decorativo (CSS o aria-hidden="true"), non letto dal lettore di schermo.

Buone pratiche

• Mostra l’intera gerarchia dalla Home; evita etichette generiche (“Pagina”, “Livello 2”).
• Allinea le etichette ai titoli di pagina e alla tassonomia reale del sito.
• Gestisci il focus: il breadcrumb deve essere raggiungibile da tastiera, con focus visibile.
• Mantieni coerenza grafica e sufficiente contrasto (testo/link).

Errori comuni

• Ultimo elemento cliccabile: peggiora l’UX e confonde le tecnologie assistive.
• Separatore annunciato come testo; etichette non descrittive o troncate.
• Breadcrumb generato ma nascosto agli screen reader con aria-hidden="true" sull’intero blocco.