Sito in aggiornamento

Il sito è in fase di aggiornamento dopo la sostituzione del sito vecchio.

Rispettare la sequenza degli Heading

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.

 Slide 1: Rispettare la sequenza degli Heading

Cosa trovi in questa pagina:

  1. Come organizzare la struttura dei testi in un sito
  2. Perché bisogna?
  3. Widget HeadingsMap
  4. Cosa fa il Widget HeadingsMap?
  5. E se non volessi mostrare un titolo?
  6. Soluzioni con il cliente
  • 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?

    1. Per gli Screen Reader che leggono i titoli;
    2. 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.