Indice Accessibile in Webflow, Senza Codice

Dai a qualsiasi articolo lungo un indice dei contenuti pulito, responsive e completamente accessibile in Webflow — senza una riga di codice da scrivere. Si genera da solo dai tuoi titoli, evidenzia la sezione che stai leggendo, ti segue mentre scorri e si ripiega in un popup ordinato su mobile.

La cosa più bella è quanto poco ti chiede. Niente librerie o plugin, niente da costruire a mano, e i nomi delle tue classi non contano affatto — allo script interessano solo un pugno di attributi fc-toc. Etichetti qualche elemento, colleghi il rich text, e la lista compare.

Ed è accessibile fin dall’inizio, non come ripensamento: si annuncia correttamente agli screen reader, comunica la gerarchia dei titoli e si comporta in modo prevedibile che tu stia scorrendo, cliccando o navigando con la tastiera.

Come funziona

Tutto parte da un unico contenitore. L’elemento con fc-toc="wrapper" è una griglia a due colonne: l’indice nella prima, il contenuto vero e proprio nella seconda, allineati in alto così l’indice sticky occupa solo lo spazio che gli serve. Al suo interno, il rich text (collegato al campo post-content del tuo CMS) riceve fc-toc="content" — è la sorgente che lo script scansiona per trovare i titoli. Punta lo script su quell’elemento e lui percorre gli H2–H6 al suo interno, crea un link per ciascuno e li inserisce nella lista.

Quella lista è il cuore di tutto. È un elemento con il tag HTML impostato su nav e un aria-label="table of contents", così le tecnologie assistive la annunciano come una regione di navigazione con un nome — un piccolo cambiamento che fa una grande differenza in fatto di accessibilità. La sua posizione è sticky con un offset dall’alto pari all’altezza della navbar, così segue il lettore lungo la pagina. Dentro c’è una lista ordinata (ordinata di proposito: comunica agli screen reader sequenza e gerarchia meglio di una non ordinata) con fc-toc="component" — il contenitore in cui vengono iniettati i link. Un max-height limitato (circa 50vh) con overflow: auto fa sì che l’indice scorra internamente invece di crescere all’infinito e rompere il layout.

La lista la prepari con un elemento di lista per ogni livello di titolo che vuoi includere, e ogni link al suo interno riceve fc-toc="h2" (fino a h6). È così che lo script sa quale livello rappresenta un link — includi solo da h2 a h4 e costruirà semplicemente tre livelli. Mentre scorri, lo script aggiunge la classe che hai segnato con fc-toc="active-style" al link della sezione in vista, e fa scorrere il pannello per tenere quel link attivo centrato. Dato che lo stato attivo è guidato da quell’attributo, il nome della classe è irrilevante — dalle lo stile che preferisci.

I gruppi comprimibili sono opzionali e si attivano con un solo attributo: aggiungi fc-toc-collapse="true" alla lista ordinata e all’inizio si vedono solo i link H2, ciascuno con un’icona segnata fc-toc="open-group" (e fc-toc-rotate per quanto ruota da aperta). I gruppi si espandono da soli quando ci scorri dentro e si chiudono quando li lasci — con un accorgimento pensato apposta: un gruppo che contiene il link attivo non si può chiudere a mano, così non perdi mai il segno di dove sei. Un dettaglio da ricordare: il contenitore comprimibile si appoggia a un elemento helper con la classe esatta toc-subitems, che lo script cerca per nome — va scritta esattamente così e deve stare nella stessa pagina.

Sugli schermi piccoli l’indice occuperebbe troppo spazio, così si trasforma in un popup: un pulsante sticky (costruito con il vero tag button) attiva un’interazione che fa salire il pannello dal basso sopra uno sfondo sfocato e semitrasparente. Tocchi lo sfondo o un link e il pannello riscende e si nasconde. Tutto questo vive su un’interazione Webflow dal breakpoint tablet in giù — non servono attributi in più.

Come si usa

1. Clona il progetto. Prendi il progetto clonabile — arriva con la struttura completa, lo script commentato e un riferimento completo agli attributi nella homepage del progetto. È costruito sul template gratuito Notable blog.

2. Segna wrapper e contenuto. Metti fc-toc="wrapper" sul contenitore a due colonne che tiene indice e corpo dell’articolo, e fc-toc="content" sul rich text i cui titoli vuoi elencare (di solito il campo post-content del CMS).

3. Prepara l’elemento indice. Sul contenitore dell’indice, imposta il tag HTML su nav e aggiungi aria-label="table of contents". Dagli position: sticky con un offset dall’alto pari all’altezza della navbar.

4. Costruisci l’impalcatura della lista. Dentro, aggiungi una lista ordinata con fc-toc="component". Aggiungi un elemento di lista per ogni livello di titolo che vuoi, e sul link di ciascuno imposta fc-toc="h2" … fc-toc="h6". Limita la lista con max-height e overflow: auto.

5. Segna lo stile attivo. Sulla classe che vuoi applicare al link della sezione in vista (un bordo sinistro colorato, un colore di testo diverso — quello che preferisci), aggiungi fc-toc="active-style". Lo script alterna questa classe mentre scorri.

6. (Opzionale) Attiva i gruppi comprimibili. Aggiungi fc-toc-collapse="true" alla lista ordinata. Dai all’elemento di lista H2 un’icona toggle con fc-toc="open-group" (e fc-toc-rotate se vuoi una rotazione diversa da -45°), e aggiungi in pagina l’elemento helper toc-subitems richiesto (scritto esattamente così) con overflow: hidden, max-height: 0 e una transizione su max-height per l’apertura e chiusura fluida.

7. Controlla il mobile. Il clonabile include già il pulsante sticky e l’interazione del popup dal breakpoint tablet in giù — pubblica e verifica che il pannello si apra, che i link portino al titolo giusto e che il link attivo resti centrato.