Alt Text per Immagini Accessibili — Scrivi Testi Alternativi che Migliorano SEO e Usabilità

Hai mai navigato un sito con le immagini rotte? O peggio, hai mai provato a usare uno screen reader e sentito un "immagine" generico al posto di una descrizione utile? Ecco il problema concreto: migliaia di siti perdono visitatori e posizionamento ogni giorno per colpa di alt text scritti male o, peggio, dimenticati. Non è solo una questione di etichetta digitale. È una questione di soldi. Un alt text ben scritto non è solo un obbligo WCAG, è un biglietto da visita per Google e un'esperienza migliore per tutti i tuoi utenti.

Noi, di Meteora Web, lo vediamo ogni giorno nei progetti che ci arrivano: gallerie prodotti senza descrizioni, banner decorativi con testi chilometrici, infografiche incomprensibili. Partiamo da un principio semplice: un sito si misura in fatturato, non in complimenti. Se un'immagine non comunica, è un costo. In questa guida ti mostriamo come trasformare ogni singola immagine in un asset che lavora per te.

Cos'è l'alt text e perché è fondamentale per l'accessibilità e la SEO?

L'attributo alt (testo alternativo) è una descrizione testuale di un'immagine. Non è visibile a chi naviga normalmente, ma viene letto dagli screen reader (software che leggono il contenuto di una pagina a chi ha disabilità visive) e dai motori di ricerca. È la tua occasione per dire a Google e ai tuoi utenti di cosa parla quell'immagine.

Pensala così: se il tuo sito è una vetrina, l'alt text è il commesso che descrive la merce a chi non può vederla. Un commesso che dice "immagine" o "foto" non sta facendo il suo lavoro. Un commesso che descrive "Scarpe da ginnastica rosse con suola bianca, modello corsa" sta vendendo. La differenza è sostanziale.

Dal punto di vista SEO, l'alt text è uno dei pochi elementi on-page che ti permette di dire a Google con precisione cosa contiene una foto. È un segnale di rilevanza che può portare traffico da Google Immagini e migliorare il posizionamento delle tue pagine. È un lavoro di precisione che paga due volte: accessibilità e visibilità.

Come scrivere un alt text descrittivo che funziona davvero?

La regola d'oro è: descrivi il contenuto e la funzione dell'immagine, non la sua esistenza. Non scrivere "immagine di un prodotto", ma "Maglietta in cotone biologico blu notte con collo a V". Devi chiederti: perché questa immagine è qui? Cosa deve comunicare a chi non può vederla?

Ecco una checklist operativa per scrivere alt text efficaci:

• Sii specifico e conciso: 125 caratteri o meno. Descrivi l'essenziale, non ogni dettaglio.
• Includi la keyword naturale: se l'immagine mostra un prodotto, includi il nome del prodotto. Non forzare la keyword se non c'entra.
• Usa il contesto: la stessa foto di un paio di scarpe avrà un alt diverso se è in una pagina prodotto o in un articolo di moda.
• Non iniziare con "Immagine di" o "Foto di": è ridondante. Lo screen reader annuncia già che è un'immagine.
• Chiudi con un punto: aiuta lo screen reader a fare una pausa naturale.

Errore comune da evitare: riempire l'alt text di keyword a caso. Un alt text del tipo "scarpe, comprare scarpe, scarpe online, scarpe uomo" è spam. Google lo legge come tale e penalizza. Scrivi per le persone, non per i bot.

Immagini decorative: quando usare alt vuoto e perché è una scelta vincente?

Non tutte le immagini hanno bisogno di un alt text descrittivo. Le immagini decorative (sfondi, separatori, icone puramente estetiche) non aggiungono informazioni al contenuto. Per queste, la scelta migliore è un alt vuoto (alt=""). Questo dice allo screen reader: "salta questa immagine, non è importante".

Perché è una scelta vincente? Perché evita di creare rumore e confusione. Immagina un utente con screen reader che naviga un sito e sente descrizioni di ogni singola icona decorativa: "frecetta blu", "cerchio rosso", "linea grigia". Diventa impossibile seguire il filo del discorso. Un alt vuoto non è un'omissione, è una decisione di design accessibile.

Come distinguere un'immagine informativa da una decorativa?

La domanda da porsi è semplice: se rimuovessi questa immagine, il contenuto della pagina perderebbe significato? Se la risposta è no, è decorativa. Se la risposta è sì, è informativa e merita un alt descrittivo.

Ecco alcuni esempi pratici:

• Decorativa: un'icona di una freccia accanto a un link "Scopri di più". L'icona non aggiunge informazioni, il testo del link è già chiaro. Usa alt="".
• Informativa: un grafico che mostra l'andamento delle vendite. Il grafico comunica dati essenziali. Usa un alt descrittivo o, meglio, fornisci i dati in una tabella adiacente.
• Funzionale: il logo di un'azienda che, cliccato, porta alla homepage. L'alt dovrebbe essere il nome dell'azienda, perché è l'etichetta del link.

Errore comune da evitare: usare alt="spaziatore" o alt="immagine". Questi testi non servono a nessuno. O descrivi con precisione, o lasci vuoto.

Come gestire immagini complesse come infografiche e grafici?

Infografiche e grafici sono il caso più delicato. Un alt text lungo e dettagliato non è la soluzione migliore, perché lo screen reader lo leggerà tutto d'un fiato, rendendo l'esperienza frustrante. La strategia corretta è dividere la comunicazione.

L'immagine complessa può avere un alt text breve che riassume il concetto principale (es. "Infografica che mostra l'aumento del 20% delle vendite online nel 2025"), ma il dettaglio deve essere fornito altrove. Le opzioni sono:

• Testo adiacente: scrivi un paragrafo sotto l'infografica che spiega i punti chiave.
• Tabella HTML: per i dati, una tabella è il formato più accessibile.
• Attributo longdesc (deprecato): meglio evitare, non è più supportato.

La regola pratica è: l'alt text dà il contesto, il contenuto adiacente dà il dettaglio. In questo modo, chi usa lo screen reader può decidere se approfondire o meno, senza essere sommerso da un muro di testo.

Quali strumenti usare per verificare la correttezza degli alt text?

Non serve essere esperti per testare. Ecco un flusso di lavoro semplice e operativo:

• Controllo visivo: apri la pagina in un browser e disattiva le immagini (o usa un'estensione). Se il testo residuo ha senso, gli alt sono ben fatti.
• Screen reader: prova a navigare la pagina con un lettore di schermo come NVDA (gratuito) o VoiceOver (integrato in macOS/iOS). Ascolta come vengono lette le immagini.
• Strumenti di audit: usa Lighthouse (integrato in Chrome DevTools) o WAVE per identificare immagini senza alt o con alt vuoti non intenzionali.

Questo processo ti dà un riscontro immediato. Non è teoria, è pratica quotidiana. Lo facciamo noi per i nostri clienti, e funziona.

Cosa fare adesso per rendere le tue immagini accessibili?

Non aspettare che un controllo automatico ti segnali il problema. Prendi in mano la situazione. Ecco le azioni immediate da compiere:

• Audit delle immagini esistenti: apri le tue pagine più importanti (homepage, pagine prodotto, articoli del blog) e controlla ogni alt text. Chiediti: descrive il contenuto? È utile? È vuoto quando dovrebbe essere descrittivo?
• Definisci una regola interna: stabilisci una policy aziendale. Ogni immagine informativa deve avere un alt descrittivo, ogni immagine decorativa deve avere alt="". Scrivilo e fallo rispettare.
• Usa un CMS che ti aiuti: WordPress ha un campo dedicato all'alt text. Assicurati che i tuoi editor lo compilino sempre. Se usi un page builder, verifica che il campo esista e sia visibile.
• Forma il tuo team: se lavori con collaboratori, fai una sessione di formazione di 30 minuti su questo tema. È un investimento che ripaga in accessibilità e SEO.

Ricorda: l'accessibilità non è un costo, è un investimento. Un sito accessibile è un sito che funziona per tutti, che posiziona meglio e che evita rischi legali. Noi, di Meteora Web, ci lavoriamo ogni giorno. Se vuoi un check-up del tuo sito, sappiamo da dove cominciare.

Per approfondire il quadro completo dell'accessibilità web, leggi la nostra guida pillar all'accessibilità Web WCAG. E se vuoi capire come la gestione dei contenuti si lega alla strategia, dai un'occhiata a come gestiamo gli stati e le API per costruire esperienze fluide.