Bruno Munari
Negli anni ’70 Bruno Munari inizia i laboratori tattili in cui i bambini imparano a disegnare un albero. La regola base è che i rami piccoli sono metà dei rami grandi e così via fino alla chioma. Il rapporto è 1:2
Titoli H come rami
La stessa cosa succede nelle pagine web: c’è un unico titolo H1 da cui si diramano altri H2 e così via.
Esempio da Wikipedia
Argomento: Albero
Gli argomenti secondari appartengono agli argomenti principali.Qualche volta è solo apparenza
Qualche volta sembra che le sezioni siano divise correttamente ma, guardando meglio il codice, si vede che la sequenza è diversa. Sarà banale, ma questo errore è davvero molto diffuso.
Cosa succede quando la sequenza è sbagliata?
Succede che gli argomenti si sovrappongono facendo sì che si perda senso e coerenza tra gli argomenti.
Perché è importante?
- SEO: perché l’algoritmo può capire meglio di cosa si parla.
- Screen Reader: perché le persone possono navigare più velocemente tra i titoli/argomenti e capire meglio.
Tecnica 1
Il modo più semplice è di inserire un titolo H2 quando si cambia l’argomento o la funzione del blocco.
Non puoi aggiungere un titolo?
A volte non è possibile aggiungere titoli perché è stato progettato un layout particolarmente minimale o per altre ragioni. Allora si può adottare una tecnica diversa.
Tecnica 2
Puoi nascondere il titolo a monitor, rendendolo comunque “visibile” o annunciabile su Screen Reader. Questo vuol dire che la sequenza viene garantita lato accessibilità. È semplice! Basta assegnare una classe CSS di tipo “sr-only” al titolo da nascondere.
Tecnica 3
Se usi WordPress + ACF puoi fare in modo che i titoli siano modificabili in autonomia dal cliente. Basta dire che questi titoli sono utili per l’accessibilità web.