Leggere un testo lungo, denso e senza una struttura ordinata o un’organizzazione precisa può essere frustrante. Tramite le intestazioni, puoi rendere i contenuti più facili da esplorare e comprendere grazie alla struttura fornita.

Spesso le intestazioni si distinguono visivamente dal resto dei contenuti. Questa modifica estetica non costituisce solo un piacevole stacco visivo, ma aiuta anche i lettori a scorrere velocemente la pagina per trovare ciò che stanno cercando.

Ad esempio, le impostazioni di questa pagina della Guida consentono di individuare a colpo d’occhio dove trovare la parte dedicata ai metodi di applicazione dei livelli di intestazione e le best practice per la struttura delle intestazioni.

Se create nel modo giusto, le intestazioni semplificano l’esplorazione della pagina. Browser, plugin e screen reader possono usare le intestazioni per passare direttamente a un argomento. Ad esempio, gli studenti che usano gli screen reader possono ascoltare un elenco di intestazioni, scegliere di passare direttamente all’intestazione desiderata e iniziare a leggere da lì.

Struttura delle intestazioni

Le intestazioni devono seguire un ordine sequenziale decrescente e non devono saltare livelli. Per rappresentare il livello dell’intestazione vengono utilizzati i numeri: 1 rappresenta il livello più alto, mentre 6 rappresenta la sezione secondaria di ultimo livello.

La maggior parte delle tecnologie, compresi gli screen reader, si limitano a sei livelli di intestazione. Se si superano i sei livelli, le intestazioni potrebbero non essere lette, perciò è necessario evitare di inserirne di più.

Il livello di intestazione 1 rappresenta spesso il titolo della pagina web o del documento. Questo livello può essere paragonato al titolo di un libro. Se il libro è diviso in tre parti, userai il livello di intestazione 2 per le intestazioni delle parti. L’intestazione 3 verrà usata per i titoli dei capitoli che compongono ogni parte e così via.

Quando le intestazioni non sono in ordine logico, si tratta di un errore di livello Minore. Gli errori di livello Minore devono comunque essere risolti per garantire una migliore esperienza. 

Ally ti aiuta a capire quando le intestazioni non sono in ordine logico e ti spiega come risolvere il problema. Ally effettua i seguenti controlli:

  • Nella pagina web o nel documento sono presenti intestazioni?
  • I livelli delle intestazioni iniziano dal numero 1?
  • Sono presenti un ordine logico e coerente e una gerarchia? 
  • I livelli delle intestazioni superano il numero 6?

Se il contenuto non supera uno qualsiasi di questi controlli, Ally segnala l’intestazione come errore.

Usare Ally per individuare le intestazioni che non seguono un ordine logico

Usa il report sull’accessibilità di Ally per individuare e correggere eventuali problemi di accessibilità presenti nel tuo sito. Usa il link fornito per il report e accedi. Apri il report e guarda l’elenco dei problemi nella tabella Problemi di accessibilità.

La tabella Problemi di accessibilità si trova nella scheda Panoramica e nella scheda Dominio. Inizia dalla scheda Dominio per visualizzare i problemi specifici di un dominio.

Quando le intestazioni non sono in ordine logico, si tratta di un errore di livello Minore. Usa la scheda Minore nella tabella Problemi di accessibilità per visualizzare l’elenco dei problemi di livello Minore. Seleziona i problemi relativi alle intestazioni che non seguono un ordine logico.

Se inizi dalla scheda Panoramica, seleziona il problema, quindi il dominio che presenta tale problema. Nell’elenco, i problemi relativi alle intestazioni possono iniziare con Documento o HTML.

Nell’elenco dei problemi del dominio, seleziona l’indicatore del punteggio accanto al contenuto che presenta il problema. Viene visualizzato il riquadro del feedback dell’editor dei contenuti.

Anteprima delle intestazioni che non seguono un ordine logico

Il riquadro del feedback di Ally mostra un’anteprima del contenuto oltre a un feedback dettagliato e alle informazioni di supporto per risolvere i problemi di accessibilità. Usa l’anteprima per visualizzare le intestazioni che non seguono un ordine logico.

L’anteprima evidenzia le aree specifiche in cui si trovano i problemi di accessibilità all’interno del documento. Le parti evidenziate mostrano contemporaneamente tutte le occorrenze di un determinato tipo di problema. Ad esempio, per i problemi relativi alle intestazioni che non seguono un ordine logico, la funzione di anteprima evidenzia tutte le intestazioni in cui si verifica un determinato problema.

Strumenti di anteprima

Usa gli strumenti di anteprima per visualizzare i problemi presenti nel documento.

  • Sfoglia l’anteprima pagina per pagina.
  • Guarda quante volte si verifica un determinato problema.
  • Passa da un’evidenziazione all’altra.
  • Mostra o nascondi le evidenziazioni.
  • Usa lo zoom per ingrandire o rimpicciolire l’anteprima dei contenuti.
  • Se il problema si trova in un documento allegato, scarica il file originale.

Seguire la procedura guidata di Ally per risolvere i problemi relativi ai livelli delle intestazioni

Ally parte dal presupposto che tu abbia una conoscenza basilare del codice HTML e di come usare il Content Management System (CMS). Per seguire la procedura guidata, devi sapere come modificare una pagina web nel codice HTML o nel codice sorgente del CMS.

Assieme all’anteprima, Ally fornisce una procedura guidata dettagliata su come risolvere il problema. Ally organizza il feedback sotto forma di struttura ad albero di decisione. Tutto ciò che devi fare è leggere le indicazioni e rispondere ai messaggi visualizzati sullo schermo. Scopri qual è il problema, perché è importante e come correggerlo in modo opportuno.

Seleziona Come correggere l’ordine delle intestazioni per seguire la procedura guidata.

Metodi per applicare i livelli delle intestazioni alle pagine web

Esistono più modi per applicare i livelli di intestazione alle pagine web.

  • HTML: la procedura guidata di Ally illustra come trovare e modificare i livelli delle intestazioni nel codice HTML. Innanzitutto, individua la pagina con l’intestazione. Modifica la pagina. Nel codice HTML, aggiorna il tag dell’intestazione con il livello corretto. Salva la pagina.
  • RTE: alcuni CMS hanno un Rich Text Editor (RTE) che offre metodi intuitivi per applicare le intestazioni. Individua l’intestazione nella pagina web. Seleziona l’intestazione e usa gli strumenti del CMS per applicare un nuovo livello di intestazione. Salva la pagina.

Visita w3schools per ulteriori informazioni sul codice HTML e su CSS.

Perché non visualizzo il livello di intestazione che voglio selezionare dalle opzioni disponibili?

Ally non ha alcun controllo sui livelli di intestazione disponibili nel tuo CMS. Si limita solo a verificare che le intestazioni seguano un ordine logico in base ai livelli utilizzati.

È buona prassi utilizzare massimo sei livelli di intestazione. Tuttavia, è possibile che non tutti i sei livelli siano visibili nell’editor dei contenuti.

Puoi definire il numero dei livelli di intestazione nella guida di stile del sito e inserirlo in un modello. Prima di apportare modifiche, consulta la guida di stile del tuo sito.

In alcuni casi, le intestazioni di livello più alto vengono già utilizzate all’interno del CMS. Ad esempio, il titolo di questa pagina della Guida è un’intestazione di livello 1. Poiché il titolo usa un’intestazione di livello 1, i livelli di intestazione nell’editor partono dal 2.

Usa i livelli che hai a disposizione per creare un ordine logico delle intestazioni nella pagina.

Best practice per la struttura delle intestazioni

Non usare i colori e la dimensione dei caratteri per far risaltare le intestazioni rispetto al resto del contenuto. Usa, invece, le opzioni dei livelli di intestazione fornite nel tuo strumento di elaborazione di testi preferito.

Scegli sempre “Intestazione 1” per il livello di intestazione più alto. Usa “Intestazione 2” per le intestazioni delle sezioni, “Intestazione 3” per le intestazioni delle sezioni secondarie ecc. L’opzione “Normale” viene utilizzata per i paragrafi.

Se stai aggiornando un documento, usa gli stili di intestazione predefiniti del tuo programma di elaborazione di testi preferito.

Stili delle intestazioni

Non usare i colori e la dimensione dei caratteri per far risaltare le intestazioni rispetto al resto del contenuto. È importante usare i livelli di intestazione presenti nell’editor dei contenuti oppure i tag delle intestazioni appropriati, come <h1>. I livelli di intestazione e i tag forniti sono fondamentali per consentire agli screen reader di spostarsi all’interno della pagina.

Se non ti piace lo stile dell’intestazione, puoi sempre aggiornare il modello.

Gli stili delle intestazioni sono spesso definiti nella guida di stile del sito e possono riflettere l’estetica del brand. Prima di apportare modifiche, consulta la guida di stile del tuo sito.