WordPress e Screen Reader: Come Rendere il Tuo Sito Veramente Accessibile

Il Tuo Sito WordPress con uno Screen Reader: L’Esperienza che Non Vuoi Sapere

Accendi NVDA o VoiceOver. Apri il tuo sito WordPress. Chiudi gli occhi. Prova a trovare il numero di telefono dell’azienda. Prova a compilare il form di contatto. Prova a leggere un articolo del blog.

Se ci riesci in meno di 3 minuti, il tuo sito è decente. Se non ci riesci, il 15% della popolazione mondiale (1.3 miliardi di persone con disabilità, OMS) non può usare il tuo sito.

Come Funziona uno Screen Reader su WordPress

Lo screen reader legge il DOM dall’alto verso il basso. Non vede il design. Vede: heading, link, bottoni, immagini (alt text), form (label), landmark (nav, main, aside, footer).

Un sito WordPress ben fatto si naviga così:

1. Skip link → “Vai al contenuto principale”
2. H1 → titolo della pagina
3. Nav → menu principale (con aria-label)
4. Main → contenuto (heading H2, H3 in ordine)
5. Footer → info contatto, link utili

Un sito WordPress mal fatto si naviga così:

1. “Link, link, link, link, link, link” (menu senza struttura)
2. “Immagine” (senza alt text)
3. “Clicca qui, clicca qui, clicca qui” (link generici)
4. Silenzio (contenuto in immagini senza alternativa)

I 7 Fix che Trasformano l’Esperienza Screen Reader

1. Skip link: aggiungi <a href="#main" class="skip-link">Vai al contenuto</a> come primo elemento del body
2. Landmark roles: usa <header>, <nav>, <main>, <aside>, <footer> (non div generici)
3. Heading gerarchici: H1 → H2 → H3, mai saltare livelli
4. Alt text significativi: “Grafico che mostra l’aumento del 40% della visibilità AI” non “grafico”
5. Link descriptivi: “Leggi la guida alla sicurezza WordPress” non “clicca qui”
6. Form label: ogni input deve avere un <label for="id"> associato
7. aria-label su nav: se hai più <nav>, distinguili con aria-label

Test con NVDA (Gratuito)

1. Scarica NVDA da nvaccess.org (gratuito, Windows)
2. Avvialo (Ctrl+Alt+N)
3. Apri il tuo sito in Firefox (il miglior browser per NVDA)
4. Usa:
   - Tab: naviga tra elementi interattivi
   - H: salta al prossimo heading
   - F: salta al prossimo form field
   - T: salta alla prossima tabella
   - Insert+F7: lista heading/link/landmark
5. Se qualcosa non è raggiungibile o leggibile: hai un bug di accessibilità

FAQ

Quanti utenti usano screen reader?

Il WebAIM Screen Reader Survey (2024) indica che JAWS (40%), NVDA (37%) e VoiceOver (12%) sono i più usati. La percentuale di utenti varia: 1-3% del traffico web per siti generalisti, fino al 10-15% per siti governativi e di servizi pubblici.

Il mio tema dice “accessibile”. Mi fido?

No. Molti temi dichiarano “accessibility-ready” nel repository WordPress, ma l’etichetta è auto-dichiarata. Verifica tu: 10 minuti con NVDA + 10 minuti con la tastiera ti dicono più di qualsiasi badge.