Sito in aggiornamento

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

Tratta i titoli heading come rami di un albero

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

 Slide 1: Tratta i titoli heading come un albero

Cosa trovi in questa pagina:

  1. Bruno Munari
  2. Titoli H come rami
  3. Esempio da Wikipedia
  4. Qualche volta è solo apparenza
  5. Se la sequenza è sbagliata?
  6. Perché è importante?
  7. Tecnica 1
  8. Non puoi aggiungere un titolo?
  9. Tecnica 2
  10. Tecnica 3
  • 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

     Slide 2: Bruno Munari
  • 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.

     Slide 3: Titoli H come rami
  • Esempio da Wikipedia

    Argomento: Albero
    Gli argomenti secondari appartengono agli argomenti principali.

     Slide 4: Esempio dell'alberatura del sito Wikipedia
  • 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.

     Slide 5: Qualche volta è solo apparenza
  • Cosa succede quando la sequenza è sbagliata?

    Succede che gli argomenti si sovrappongono facendo sì che si perda senso e coerenza tra gli argomenti.

     Slide 6: Cosa succede quando la sequenza è sbagliata?
  • Perché è importante?

    1. SEO: perché l’algoritmo può capire meglio di cosa si parla.
    2. Screen Reader: perché le persone possono navigare più velocemente tra i titoli/argomenti e capire meglio.
     Slide 7: Perché è importante?
  • Tecnica 1

    Il modo più semplice è di inserire un titolo H2 quando si cambia l’argomento o la funzione del blocco.

     Slide 8: Tecnica 1
  • 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.

     Slide 9: Non puoi aggiungere un titolo?
  • 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.

     Slide 10: Tecnica 2 (CSS)
  •  Slide 11: Tecnica 2 (HTML)
  • 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.

     Slide 12: Tecnica 3
  •  Slide 13: Ti serve aiuto?