Verificare a orecchio la struttura di una pagina

Un outline audit consiste nel controllare le intestazioni nel modo in cui le presenta uno screen reader, ignorando completamente lo stile visivo. 👂

Dimentichi colori e caratteri. Una outline pulita dovrebbe apparire come un elenco annidato sensato di titoli di sezione, anche senza alcun CSS.

Estragga solo le sue headings, nell’ordine. Se quell’elenco da solo riassume la pagina, la struttura sta svolgendo bene il suo lavoro.

Per prima cosa, verifichi che esista esattamente un h1 che identifichi la pagina. Un h1 mancante o duplicato è il difetto più comune di una struttura.

Controlli i livelli e cerchi un salto, ad esempio il passaggio da h2 a h4. Ogni salto verso il basso dovrebbe avanzare esattamente di un livello.

Cerchi il testo in grassetto che dovrebbe essere un’intestazione ma in realtà è un div stilizzato. Queste lacune nascoste lasciano chi usa uno screen reader senza alcun punto di riferimento.

Gli strumenti di sviluppo del browser e le estensioni possono mostrare una vista della outline. Elencano le intestazioni reali e segnalano i livelli saltati o mancanti.

Apra l’headings list in NVDA o VoiceOver. Ascoltare la propria pagina letta ad alta voce rivela confusioni che nessun diagramma può mostrare. 🔊

Un’empty heading che contiene solo un’icona non viene letta e appesantisce l’elenco. Assegni a ogni intestazione un testo reale e significativo.

Intestazioni vaghe come “Altro” non superano la prova dell’ascolto. Fuori contesto, ognuna dovrebbe comunque comunicare all’utente l’argomento della sezione.

Esegua un rapido controllo della outline su ogni pagina prima della pubblicazione. Una verifica di due minuti individua bug strutturali che frustrano quotidianamente gli utenti.

Ha imparato a controllare la struttura ascoltandola: confermi un solo h1, individui i livelli saltati, porti alla luce le intestazioni simulate e verifichi la formulazione con un vero screen reader. ✅