Come scrivere il testo alternativo: una guida pratica per sviluppatori e team di contenuti

Secondo il rapporto WebAIM Million 2025, l’assenza di testo alternativo riguarda il 55,5% di tutte le homepage analizzate — e tra questi errori, il 44% coinvolge immagini collegate, il che interrompe completamente la navigazione per le persone che usano screen reader. Non è un problema di nicchia. È metà del web che lascia le persone cieche e ipovedenti bloccate davanti a immagini che non dicono nulla. Se il tuo team pubblica immagini senza riflettere con attenzione sul testo alternativo, non stai solo fallendo un requisito di conformità — stai dicendo a una parte significativa del tuo pubblico che la loro esperienza non conta.

Cosa è davvero il testo alternativo (e perché è più di un semplice tag)

Il testo alternativo, abbreviazione di testo alternativo, è una descrizione scritta incorporata nell’attributo alt di un elemento HTML <img>. Quando uno screen reader incontra un’immagine, legge il testo alternativo ad alta voce all’utente. Quando un’immagine non viene caricata — a causa di una connessione lenta, di un URL interrotto o di un content blocker — il testo alternativo viene visualizzato al suo posto. Viene anche indicizzato dai motori di ricerca, diventando un segnale SEO discreto ma significativo.

Ma ecco cosa molti team non colgono: il testo alternativo non è solo una rete di sicurezza di fallback. È il modo principale in cui le persone cieche e ipovedenti — circa 43,3 milioni di persone cieche nel mondo e 295 milioni con ipovisione da moderata a grave — fruiscono dei contenuti visivi sul web. Gli screen reader come NVDA e JAWS (i due screen reader desktop più utilizzati) annunciano il testo alternativo nel momento in cui il focus raggiunge un’immagine. Se quel testo è assente, privo di significato o ridondante, l’esperienza utente si degrada immediatamente.

Le ricerche sulle persone cieche e ipovedenti offrono un quadro netto di ciò che accade in pratica. Alcuni utenti dichiarano di ignorare del tutto le immagini sui siti web perché, per esperienza, il testo alternativo non è mai utile. Altri saltano le immagini dei prodotti sui siti di e-commerce e si affidano invece alle recensioni degli utenti, perché testi alternativi come "image001.jpg" o "photo" non dicono loro nulla. Questo non è un problema di screen reader — è un problema di contenuto, ed è un problema che il tuo team può risolvere.

Considerare il testo alternativo come una responsabilità di contenuto — non solo un compito per sviluppatori — è il primo cambio di mentalità che ogni team deve fare. Lo sviluppatore implementa l’attributo; il team di contenuti comprende il contesto. Entrambi sono essenziali per farlo nel modo giusto.

Il contesto legale e di conformità

Il testo alternativo non è facoltativo se ti interessa il rischio legale. Il Criterio di successo WCAG 1.1.1 (Contenuti non testuali) è un requisito di Livello A — il livello più basso e più fondamentale di conformità. Non rispettarlo significa fallire qualsiasi audit formale di accessibilità. Negli Stati Uniti, l’ADA è stata applicata ai siti web in migliaia di casi, con 4.605 cause legali relative a siti web ADA intentate nel solo 2024. L’assenza di testo alternativo è una delle violazioni più citate nelle diffide proprio perché è facilmente rilevabile, oggettivamente misurabile e blocca direttamente l’accesso ai contenuti principali.

Oltre all’ADA, l’European Accessibility Act (EAA) è diventato applicabile il 28 giugno 2025. Se la tua organizzazione serve clienti nell’UE, la non conformità può comportare sanzioni fino a €100.000 o al 4% del fatturato annuo. WCAG 2.2 Livello AA è ampiamente riconosciuto come il riferimento per la conformità all’EAA, e i suoi requisiti sul testo alternativo ai sensi del criterio 1.1.1 sono invariati rispetto alle versioni precedenti — tutte le immagini informative devono avere alternative testuali determinabili in modo programmatico.

In Canada, l’Accessibility for Ontarians with Disabilities Act (AODA) impone in modo analogo la conformità alle WCAG per le organizzazioni del settore pubblico e privato. La Section 508 nel contesto federale statunitense ha requisiti paralleli. Il messaggio è coerente in tutte le giurisdizioni: il testo alternativo non è un “nice-to-have”, e l’ambiente normativo si sta irrigidendo, non allentando.

WCAG 1.1.1 è di Livello A — il livello di conformità più basilare. Non rispettarlo significa fallire ogni audit di accessibilità, ed è la violazione più facile da rilevare per gli strumenti automatici e i team legali.

Il framework decisionale: quali immagini hanno bisogno di cosa

Una delle idee sbagliate più comuni è che ogni immagine abbia bisogno di una descrizione testuale. Non è così — e aggiungere testo alternativo non necessario alle immagini decorative peggiora in realtà l’esperienza per chi usa screen reader, che deve ascoltare rumore che non aggiunge valore. La vera abilità sta nel sapere in quale categoria rientra ogni immagine. Ecco un framework pratico:

• Immagini informative — Foto, illustrazioni o grafici che trasmettono contenuti o significati non presenti nel testo circostante. Richiedono un testo alternativo descrittivo che comunichi le stesse informazioni fornite dall’immagine.
• Immagini funzionali — Immagini usate come pulsanti, link o controlli (ad esempio un’icona a forma di lente d’ingrandimento che invia una ricerca, o un logo che rimanda alla homepage). Il testo alternativo dovrebbe descrivere la funzione, non l’aspetto visivo: alt='Search', non alt='Icona a forma di lente d’ingrandimento'.
• Immagini decorative — Abbellimenti visivi che aggiungono valore estetico ma non hanno significato: pattern di sfondo, divisori, illustrazioni puramente decorative. Dovrebbero avere un attributo alt vuoto (alt=''), che indica allo screen reader di saltare completamente l’immagine.
• Immagini di testo — Screenshot o grafici che contengono parole. La best practice è evitarle del tutto e usare invece vero testo stilizzato. Quando sono inevitabili, il testo alternativo dovrebbe riprodurre alla lettera il testo presente nell’immagine.
• Immagini complesse — Grafici, diagrammi, mappe e infografiche che contengono dati densi. È necessario un breve riepilogo nel testo alternativo, più una descrizione strutturata più lunga nel corpo della pagina o collegata dall’immagine.

Nota che il testo alternativo vuoto (alt='') non è la stessa cosa di un attributo alt mancante. Un’immagine senza alcun attributo alt può indurre lo screen reader a leggere ad alta voce il nome del file o l’URL — il che è quasi sempre peggio del silenzio. Includi sempre l’attributo, anche quando il suo valore è intenzionalmente vuoto.

Scrivere testo alternativo che funziona davvero: regole pratiche

Un buon testo alternativo è più difficile da scrivere di quanto sembri. Ecco le regole concrete che distinguono le descrizioni utili dal rumore:

• Mantienilo conciso. Punta a meno di 125 caratteri. Screen reader come JAWS e NVDA possono troncare il testo alternativo più lungo a metà frase, tagliando proprio le informazioni che ti sei impegnato a fornire. Se l’immagine è così complessa da richiedere di più, è un segnale che hai bisogno di una descrizione lunga supplementare.
• Non iniziare con "Immagine di" o "Foto di". Gli screen reader annunciano automaticamente che un elemento è un’immagine prima di leggere il testo alternativo. Scrivere alt='Immagine di una donna sorridente' fa sì che lo screen reader dica "immagine, immagine di una donna sorridente" — il che è ridondante e fa perdere tempo a chi ascolta.
• Descrivi il significato, non solo l’aspetto. Il testo alternativo dovrebbe comunicare le stesse informazioni o la stessa funzione dell’immagine. Se stai mostrando un grafico della crescita dei ricavi del Q3, non scrivere alt='Grafico a barre'. Scrivi qualcosa come alt='Grafico a barre che mostra i ricavi del Q3 in aumento del 22% anno su anno', quindi fornisci i dati completi nel testo circostante.
• Adatta il testo al contesto. La stessa fotografia può richiedere testi alternativi diversi a seconda di dove viene usata. Una foto di un laptop su una scrivania usata in una sezione "Il nostro team" potrebbe richiedere un testo alternativo che descriva lo spazio di lavoro; usata in una scheda prodotto, deve descrivere le specifiche e l’aspetto del laptop.
• Non riempire di keyword. Il testo alternativo viene indicizzato dai motori di ricerca, ma riempirlo di parole chiave è sia una pessima esperienza utente sia una violazione dell’intento delle WCAG. Scrivi prima di tutto per l’utente.
• Usa grammatica e punteggiatura corrette. Gli screen reader trasformano il testo in voce, e la punteggiatura influisce sul ritmo e sulla chiarezza. Un frammento di frase risulta meno naturale di un pensiero completo.

Il testo alternativo non deve essere una descrizione fredda e oggettiva. Può — e talvolta dovrebbe — trasmettere sfumature, contesto e persino emozioni quando queste qualità sono rilevanti per l’esperienza dell’utente rispetto al contenuto.

Esempi di codice: giusto e sbagliato

La teoria è una cosa. Vediamo come questi principi si applicano nell’HTML reale.

Immagine informativa — testo alternativo scarso:

<img src='team-photo.jpg' alt='photo'>

Immagine informativa — buon testo alternativo:

<img src='team-photo.jpg' alt='Accsible engineering team gathered around a whiteboard during a product sprint meeting'>

Immagine funzionale (logo collegato) — testo alternativo scarso:

<a href='/'>
  <img src='logo.svg' alt='logo'>
</a>

Immagine funzionale (logo collegato) — buon testo alternativo:

<a href='/'>
  <img src='logo.svg' alt='Accsible — return to homepage'>
</a>

Immagine decorativa — implementazione corretta:

<img src='decorative-wave-divider.svg' alt='' role='presentation'>

Immagine complessa (grafico) — approccio corretto con descrizione lunga collegata:

<img
  src='q3-revenue-chart.png'
  alt='Bar chart: Q3 revenue up 22% YoY. Full data table below.'
  aria-describedby='chart-description'
>
<div id='chart-description'>
  <!-- Full tabular data or structured text description here -->
</div>

Per i pulsanti con icone che non hanno un’etichetta testuale visibile, usa aria-label sul pulsante stesso e imposta alt='' sull’immagine dell’icona per evitare un doppio annuncio:

<button aria-label='Close dialog'>
  <img src='close-icon.svg' alt=''>
</button>

Gestire tipi specifici di immagini

Immagini di prodotto nell’e-commerce: Sono tra i contesti di testo alternativo più critici sul web. Le persone cieche si affidano completamente al testo alternativo per capire cosa stanno valutando di acquistare. Limitarsi a descrivere il nome del prodotto è insufficiente. Includi materiale, colore, caratteristiche visive chiave e qualsiasi variante distinguibile visivamente. Ad esempio: alt='Blazer slim-fit in lana blu navy con bottoni dorati e revers a lancia' è molto più utile di alt='Blazer'.

Loghi: I loghi non sono mai decorativi. Richiedono un testo alternativo che includa il nome dell’organizzazione e qualsiasi slogan o descrizione significativa presente all’interno del logo. Se il logo è anche un link, il testo alternativo dovrebbe descriverne la destinazione, come discusso sopra.

Infografiche: Sono notoriamente difficili da gestire bene. Un singolo attributo alt non può sostenere il peso informativo di un’infografica complessa. L’approccio corretto è un testo alternativo breve e di livello riassuntivo (ad esempio, alt='Infografica che riassume cinque fasi del nostro processo di onboarding') abbinato a una versione testuale strutturata delle stesse informazioni visibile sulla pagina.

Immagini di persone: Includere i nomi quando le persone sono identificate è utile, soprattutto in contesti editoriali o di cronaca. Descrivi cosa sta facendo la persona o cosa comunica l’immagine, non solo il suo aspetto fisico. Evita descrizioni che riducono una persona alle sue caratteristiche demografiche.

Immagini di sfondo e CSS: Le immagini applicate tramite background-image in CSS non hanno a disposizione un attributo alt, quindi dovrebbero essere usate solo per scopi realmente decorativi. Se un’immagine deve comunicare un significato, deve stare nell’HTML come elemento <img> con un testo alternativo adeguato.

Integrare il testo alternativo nel tuo workflow

Uno dei motivi per cui il testo alternativo rimane un problema su larga scala è che viene trattato come un ripensamento finale — qualcosa che uno scanner automatico segnala dopo il lancio, spingendo a una correzione affrettata. La soluzione è spostare il testo alternativo a monte nei tuoi flussi di lavoro di contenuto e sviluppo.

Per i team di contenuto, questo significa stabilire una guida di stile interna per il testo alternativo che copra i tipi di immagini più comuni. Se il tuo sito pubblica immagini di prodotto, immagini hero per i post del blog, foto di eventi e grafici di dati, ogni categoria merita uno standard documentato con esempi di buone e cattive descrizioni. Quando autori ed editor caricano immagini, dovrebbero pensare al testo alternativo nello stesso momento in cui pensano alle didascalie e alla scelta delle immagini.

Per gli sviluppatori, questo significa integrare i campi per il testo alternativo nei template del CMS e contrassegnarli come obbligatori — non facoltativi — per i componenti di immagini non decorative. Quando un componente accetta un’immagine, l’interfaccia dovrebbe richiedere il testo alternativo e distinguere tra contesti informativi e decorativi. Evita di compilare automaticamente l’attributo alt con il nome del file dell’immagine o con il testo della didascalia, che sono cose diverse con scopi diversi.

Per i responsabili QA e compliance, gli strumenti di scansione automatica (inclusi i sistemi di overlay di accessibilità come Accsible) possono individuare su larga scala le immagini con attributi alt mancanti o vuoti, segnalandole in tempo reale. Ma gli strumenti automatici non possono valutare se il testo alternativo esistente sia davvero significativo — quel giudizio richiede un revisore umano. Integra controlli manuali a campione nella tua cadenza di audit di accessibilità e includi la revisione della qualità del testo alternativo in qualsiasi criterio di accettazione di nuove funzionalità che coinvolgono immagini.

Quando la stessa immagine viene riutilizzata su più pagine o in più contesti, ricorda che il testo alternativo appropriato può cambiare. Una foto della sede aziendale usata in una pagina "Contattaci" e in una pagina "La nostra cultura" può richiedere descrizioni diverse a seconda di ciò che ciascuna pagina cerca di comunicare. Piattaforme CMS come WordPress consentono override del testo alternativo a livello di post proprio per questo motivo.

Errori comuni da evitare

Anche i team che prendono sul serio il testo alternativo commettono errori ricorrenti. Ecco i pattern che vale la pena monitorare attivamente:

• Usare il nome del file come testo alternativo. Un testo alternativo come IMG_4521.jpg o hero-banner-v3-final.png è peggio che inutile — segnala attivamente alle persone che usano screen reader che nessuno ha pensato a loro.
• Rendere il testo alternativo identico alla didascalia adiacente. Didascalie e testo alternativo servono pubblici e scopi diversi. Una didascalia è un contesto supplementare per chi vede; il testo alternativo sostituisce l’immagine per chi non può vederla. Possono sovrapporsi, ma non dovrebbero essere copiati e incollati in modo intercambiabile.
• Aggiungere testo alternativo a ogni immagine indiscriminatamente. Fornire descrizioni alle immagini decorative costringe chi usa screen reader a districarsi tra contenuti irrilevanti. La disciplina di decidere "questa immagine ha bisogno di una descrizione e, se sì, di quale tipo?" è importante quanto la scrittura stessa.
• Scrivere descrizioni vaghe e prive di contesto. Un testo alternativo come alt='uomo che sorride' per una foto del tuo CEO durante il lancio di un prodotto dice all’utente quasi nulla sul motivo per cui l’immagine è lì o su cosa significhi nel contesto.
• Ignorare il testo alternativo per le SVG. Le SVG inline hanno bisogno anch’esse di nomi accessibili, in genere tramite aria-label sull’elemento <svg> o un elemento <title> come primo figlio, combinato con role='img'.

<!-- SVG with accessible name -->
<svg role='img' aria-labelledby='svg-title'>
  <title id='svg-title'>Quarterly revenue growth, Q1 to Q4 2024</title>
  <!-- SVG paths -->
</svg>

Key Takeaways

• Non tutte le immagini hanno bisogno di una descrizione testuale. Le immagini decorative dovrebbero usare alt='' per indicare agli screen reader di saltarle — ma non omettere mai del tutto l’attributo alt, o lo screen reader potrebbe annunciare il nome del file.
• Mantieni il testo alternativo sotto i 125 caratteri per le immagini informative; gli screen reader possono troncare stringhe più lunghe e la concisione migliora la comprensione in ascolto. Per le immagini complesse, abbina un breve riepilogo nel testo alternativo a una descrizione testuale completa nel corpo della pagina.
• Descrivi la funzione, non solo la forma. Per le immagini collegate e funzionali, il testo alternativo dovrebbe dire all’utente cosa accadrà o dove verrà indirizzato — non com’è l’immagine. Per le immagini informative, comunica il significato, non solo il contenuto visivo.
• Integra il testo alternativo nel tuo workflow a monte, non come correzione post-lancio. Rendilo un campo obbligatorio nel tuo CMS, includilo nelle guide di stile dei contenuti e aggiungi la revisione della qualità al tuo processo di QA — gli strumenti automatici rilevano il testo alternativo mancante, ma devono essere le persone a valutare se è significativo.
• Le implicazioni legali e normative sono reali e in aumento. Le cause ADA che citano l’assenza di testo alternativo sono state migliaia nel 2024, e l’Accessibility Act dell’UE è ora in vigore. Trattare il testo alternativo come un ripensamento non è una strategia di conformità praticabile.