Come organizzare la struttura dei testi in un sito
Quando si parla di titoli da H1 a H6, bisognerebbe pensare all’Atomic Design di Brad Frost, o alla forma della piramide. Il titolo più importante dovrebbe contenere i titoli meno importanti.
Perché bisogna?
- Per gli Screen Reader che leggono i titoli;
- Per il motore di ricerca che analizza la struttura dall’alto in basso.
Se ci pensi è abbastanza logico.
Widget HeadingsMap
Per una veloce analisi sul sito, ci viene in aiuto il widget HeadingsMap per Chrome e per Firefox. Grazie a The A11Y Collective per avermelo fatto conoscere.
Cosa fa il Widget HeadingsMap?
Questo widget ci mostra la sequenza dei titoli e segnala eventuali H mancanti, così possiamo modificarli o integrarli nel sito.
E se non volessi mostrare un titolo?
In questo caso è consigliato usare dei titoli nascosti, ma visibili per lo Screen Reader. Per convenzione, la classe CSS usata è “sr-only”. Questo capita nel footer, dove si può inserire un titolo nascosto come “Altre informazioni e contatti”. Se usi WordPress, i widget del footer potrebbero avere titoli H3. Vedi un esempio nel sito www.a11y-collective.com.
Soluzioni con il cliente
Nei siti WordPress che realizzo sto usando una libreria di blocchi ACF custom. Il vantaggio è che sono facili da gestire in autonomia. Ho deciso di integrare delle condizioni “if” così, anche se il cliente si dimentica di inserire un titolo, la sequenza è rispettata.
Prima di scrivere codice, è meglio progettare la sequenza dei titoli con classi in modalità BEM, così i titoli Headings sono più facili da gestire.