Breadcrumb accessibili in Webflow (manuali + auto)

Alla fine di questa lezione avrai due sistemi di breadcrumb accessibili e riutilizzabili da mettere in qualsiasi progetto Webflow — uno manuale, per il pieno controllo sui siti semplici, e uno automatico, che legge l’URL della pagina e costruisce la traccia da solo per CMS e strutture molto annidate.

I breadcrumb sembrano banali finché non provi a farli bene: una lista ordinata perché l’ordine conti davvero, un landmark nav che uno screen reader possa annunciare, separatori che non vengono letti ad alta voce, e nessun link morto che finge di essere cliccabile. Costruiremo entrambe le versioni come veri componenti Webflow con proprietà, così regoli l’intera traccia da un solo posto invece di modificare ogni pagina a mano.

La versione manuale è perfetta quando la struttura è poco profonda e vuoi definire tu ogni passo. Quella automatica è pensata per scalare — capisce da sola le etichette, i link e persino quali segmenti non sono pagine reali.

Come funziona

La base accessibile è la stessa per entrambe. La traccia è un elemento nav con aria-label="breadcrumb", così gli screen reader lo annunciano come breadcrumb e non come un nav generico. Dentro va una lista ordinata — non non ordinata — perché i breadcrumb sono sequenziali: home per prima, pagina corrente per ultima, e quell’ordine è informazione. Ogni elemento è un list item che contiene un link, e l’ultimo link riceve aria-current="page" per marcare la pagina in cui ti trovi. I separatori sono decorativi, quindi vanno tenuti fuori dall’albero di accessibilità: il separatore a carattere (un >) porta aria-hidden="true", il separatore a icona è marcato come decorativo così viene saltato, e la terza opzione è un separatore in puro CSS generato con una regola ::after (uno / dopo ogni elemento tranne l’ultimo) — nessun elemento in più. Esistono tutti e tre perché il componente possa offrire la scelta; passi dall’uno all’altro con una proprietà di visibilità.

Il componente manuale ti mette al comando. Una volta costruita la struttura la converti in un componente Webflow ed esponi tutto come proprietà, raggruppate per scopo: una proprietà di visibilità e una di contenuto per ogni separatore, e per ogni livello le proprietà per etichetta, link e visibilità dell’elemento. È questo che lo rende riutilizzabile — su una pagina statica poco profonda potresti mostrare solo home più la pagina corrente e nascondere i livelli in mezzo; su un articolo del blog ne mostri di più. Il dettaglio di accessibilità importante è il problema della tappa morta: un URL come /blog/posts/post-slug ha un segmento posts che non è una pagina reale. Lasciato così sembra e si comporta come un link rotto. La soluzione è aria-disabled="true" su quel link (esposto come proprietà, così lo imposti per livello) più una breve regola CSS che toglie i pointer events, eredita il colore del testo circostante e rimuove la sottolineatura — così viene letto come semplice testo, onestamente.

Il componente automatico pensa al posto tuo. Parte da una copia ridotta di quello manuale — solo l’elemento home e un template per il livello corrente — più un piccolo script. Al caricamento lo script legge l’URL corrente e lo divide in segmenti sulle slash. Per ogni segmento tranne il primo (home) e l’ultimo (pagina corrente) crea un list item, usa lo slug come etichetta sostituendo i trattini con spazi, e poi verifica se quel percorso parziale corrisponde a una pagina reale: se sì, rende un vero link; se no — come un percorso di collezione CMS — rende semplice testo, così non pubblichi mai un link rotto. L’ultimo segmento viene lasciato com’è se hai scritto un’etichetta personalizzata (comodo per legare un campo CMS come il titolo dell’articolo), oppure riempito dall’URL se l’hai lasciato vuoto. Questa verifica del percorso è anche il motivo per cui potresti vedere un innocuo 404 nella console: lo script ha fatto un ping su un segmento, non ha trovato nulla e lo ha silenziosamente declassato a testo.

Lo script trova ciò che gli serve tramite due piccoli attributi di logica — uno che marca il wrapper del breadcrumb come componente, e uno che marca l’ultimo list item come livello corrente. Sono per il codice, non per l’accessibilità, e arrivano già impostati nel cloneable, così non ci devi pensare.

Come si usa

1. Clona il progetto. Prendi il cloneable Webflow. Include entrambi i componenti — breadcrumb manual e breadcrumb auto — con gli attributi di accessibilità, i tre stili di separatore e lo script completamente commentato già collegati.

2. Costruisci la traccia (manuale). Un nav con aria-label="breadcrumb" avvolge una lista ordinata; ogni list item contiene un link. Dai all’ultimo link aria-current="page". Aggiungi i separatori (carattere con aria-hidden="true", un’icona decorativa, o il CSS ::after), poi seleziona tutto il wrapper e convertilo in componente.

3. Esponi le proprietà. Raggruppale in modo pulito — visibilità + contenuto per ogni separatore, e per ogni livello un link, un’etichetta di testo e un interruttore di visibilità. Sui livelli intermedi esponi anche una proprietà aria-disabled (default false) per le tappe che non portano da nessuna parte.

4. Configura per pagina (manuale). Inserisci il componente, scegli un separatore (nascondi gli altri due), mostra solo i livelli che ti servono e imposta etichetta e link di ciascuno. Per un segmento che non è una pagina reale, imposta la sua proprietà aria-disabled a true così viene reso come semplice testo.

5. Oppure passa all’automatico. Inserisci breadcrumb auto, nascondi i separatori che non vuoi, e basta — lo script costruisce il resto dall’URL. Tocca la proprietà di testo dell’ultimo livello solo quando vuoi sovrascrivere uno slug lungo (o legarla a un campo CMS).

6. Pubblica e prova sul link live. Clicca in giro: home deve arrivare alla homepage, i segmenti reali devono linkare, quelli che non sono pagine devono essere semplice testo, e la pagina corrente deve essere etichettata e marcata. Un 404 sparso nella console per un segmento inesistente è normale.