Cosa guardano davvero gli screen reader in un sito

Quando si parla di accessibilità digitale, uno dei primi strumenti che entra in gioco è lo screen reader. Ma cosa “vede” davvero un lettore di schermo all’interno di un sito?
Come interpreta la struttura, i contenuti, le immagini, i link e i moduli?

Molte persone non hanno mai visto (o meglio, sentito) in azione uno screen reader, e questo rende difficile immaginare come una persona non vedente o ipovedente interagisce con un sito web.

In questo articolo spieghiamo come funziona uno screen reader, cosa analizza realmente e quali accorgimenti servono per migliorare l’esperienza utente per chi lo utilizza ogni giorno.

Cos’è uno screen reader e come funziona

Lo screen reader è un software assistivo che legge ad alta voce, o trasforma in output braille, i contenuti presenti sullo schermo.
Viene utilizzato principalmente da persone cieche o ipovedenti, ma anche da chi ha disabilità cognitive o difficoltà di lettura.

Gli screen reader non leggono il sito “come lo vediamo noi”.
Non vedono colori, layout o immagini decorative.
Interpretano invece la struttura del codice HTML della pagina, muovendosi attraverso le informazioni semantiche: titoli, paragrafi, elenchi, link, pulsanti, tabelle e moduli.

Tra i più noti:

• JAWS (Windows)
• NVDA (Windows, gratuito)
• VoiceOver (Mac, iPhone)
• TalkBack (Android)

Cosa esplorano davvero gli screen reader in una pagina

Uno screen reader si muove sequenzialmente, riga per riga, oppure salta tra elementi se la struttura lo consente.
Ecco gli elementi chiave che analizza:

1. La struttura dei titoli (H1, H2, H3…)

I titoli sono la mappa mentale del contenuto per chi usa un lettore di schermo.
Molti utenti navigano proprio saltando da un titolo all’altro per capire rapidamente di cosa tratta la pagina.

Se non sono presenti, o sono usati in modo disordinato (es. più H1, salti da H2 a H4), la navigazione diventa frustrante.

Cosa fare:

• Inserire un solo H1 per pagina
• Usare i titoli in ordine gerarchico (H1 > H2 > H3…)
• Evitare titoli solo “visivi” (es. testo grande senza <h> nel codice)

2. Il testo alternativo delle immagini

Uno screen reader non può “vedere” un’immagine. Può solo leggere l’attributo alt, cioè il testo alternativo associato a ogni immagine.

Questo testo serve a spiegare cosa rappresenta l’immagine e perché è rilevante.

Cosa fare:

• Descrivere l’immagine se ha funzione informativa
• Usare alt="" (vuoto) per immagini decorative
• Evitare testi vaghi come “immagine” o “foto di esempio”

3. I link

I link vengono letti come elementi interattivi.
Ma se tutti dicono “clicca qui” o “scopri di più”, chi ascolta non capisce dove porteranno.

Molti utenti attivano una funzione che elenca tutti i link della pagina: se sono poco descrittivi, è impossibile orientarli.

Cosa fare:

• Usare link descrittivi: “Leggi la guida accessibilità 2025”
• Evitare “clicca qui”
• Non inserire lo stesso testo per link diversi

4. I pulsanti

I pulsanti devono essere riconoscibili come tali, etichettati e comprensibili.
Se un pulsante ha solo un’icona (es. lente per la ricerca), lo screen reader potrebbe leggere solo “button”.

Cosa fare:

• Usare l’attributo aria-label per descrivere l’azione
• Inserire sempre un testo visibile o alternativo significativo
• Evitare pulsanti costruiti solo con immagini o SVG senza etichette

5. I moduli (form)

I campi di input devono essere etichettati correttamente per essere letti in modo chiaro.

Se manca l’etichetta o se viene usato solo un placeholder, lo screen reader può confondere il campo.

Cosa fare:

• Associare ogni campo a un <label>
• Non usare il placeholder come unica etichetta
• Fornire messaggi di errore leggibili e chiari

6. La navigazione da tastiera

Chi usa uno screen reader spesso naviga con la tastiera, spostandosi con TAB, frecce e combinazioni di tasti.
Se un menu o un pop-up non è accessibile da tastiera, non potrà essere usato.

Cosa fare:

• Testare il sito con solo tastiera (TAB e SHIFT+TAB)
• Mantenere l’ordine logico di navigazione
• Evitare elementi che si aprono solo al passaggio del mouse

Cosa uno screen reader non legge (se il sito non è fatto bene)

Ecco alcuni elementi che non verranno letti correttamente se non vengono implementati nel modo giusto:

• Immagini senza alt
• Video senza trascrizione o sottotitoli
• PDF allegati non accessibili
• Tabelle senza intestazioni (<th>) o scope definito
• Moduli con errori non annunciati
• Elementi dinamici (modali, tooltip) non gestiti con ARIA

Come testare il sito con uno screen reader

Non serve essere esperti per iniziare a fare test base.
Puoi:

• Attivare VoiceOver su Mac o iPhone
• Installare NVDA su Windows (gratuito)
• Navigare una pagina con solo tastiera
• Verificare la lettura dei link, titoli, immagini e moduli

Anche solo 10 minuti di test con uno screen reader offrono una nuova prospettiva su quanto il tuo sito sia realmente accessibile.

Come usano davvero il sito gli utenti con screen reader

Le persone che utilizzano screen reader hanno sviluppato strategie specifiche per orientarsi nei contenuti.
Spesso:

• Saltano da un titolo all’altro per capire rapidamente di cosa si parla
• Usano il comando per elencare tutti i link presenti nella pagina
• Navigano tra i campi modulo per trovare quello che gli serve
• Ascoltano la lettura a velocità aumentata (anche 2x o 3x)
• Ignorano aree non strutturate o confuse

Queste abitudini rendono ancora più importante progettare una struttura solida, coerente e ben organizzata, con etichette e gerarchie chiare.
Un sito ben fatto semplifica la vita di tutti, non solo delle persone con disabilità.

Vuoi vedere uno screen reader in azione?

Vedere (o meglio ascoltare) uno screen reader in uso cambia la prospettiva su come si progetta un’interfaccia.

Ti consiglio questo breve video dimostrativo

Checklist pratica per migliorare da subito

• Struttura titoli coerente (H1 > H2 > H3…)
• Immagini con testo alternativo significativo
• Link descrittivi e non generici
• Pulsanti con etichette chiare
• Campi form con label visibili e associate
• Navigazione da tastiera fluida
• PDF e video accessibili
• Test base con uno screen reader

Conclusione

Uno screen reader legge quello che il codice gli dice, non quello che gli occhi vedono.
Per questo motivo, progettare un sito accessibile significa partire dalla struttura e dalla semantica, prima ancora del design visivo.

Sapere cosa guardano davvero gli screen reader è essenziale per chi lavora nel digitale, ma soprattutto per chi vuole offrire esperienze digitali davvero inclusive.

Se vuoi iniziare a progettare in modo più consapevole, nel mio libro “Design Accessibile e AI” trovi spiegazioni semplici, checklist pratiche e strategie per costruire siti accessibili senza dover stravolgere il tuo modo di lavorare.