Perché è importante il testo alternativo?

Ci sono diversi motivi per cui il testo alternativo è essenziale per un sito web accessibile e ottimizzato:

• Accessibilità: il testo alternativo consente agli utenti non vedenti che utilizzano screen reader di comprendere il contenuto delle immagini. Senza testo alternativo, questi utenti perderebbero informazioni importanti.
• SEO: i motori di ricerca non sono in grado di interpretare il contenuto delle immagini. Il testo alternativo consente ai crawler di comprendere il soggetto e il contenuto delle immagini, migliorando il posizionamento nei motori di ricerca.
• Caricamento delle pagine: se l'immagine non si carica correttamente, il testo alternativo garantisce che il contenuto sia comunque disponibile.
• Contenuto contestuale: il testo alternativo fornisce un contesto e una descrizione dell'immagine, il che è particolarmente utile quando le immagini sono incorporate da altri siti o condivise sui social media senza contesto.

Come scrivere un buon testo alternativo

Ecco alcuni consigli per scrivere testi alternativi efficaci:

• Essere concisi ma descrittivi: il testo deve descrivere accuratamente l'immagine ma in poche parole. Di solito non più di 125 caratteri.
• Non ripetere il nome del file: il nome del file dell'immagine (es. immagine.jpg) non fornisce alcun contesto.
• Evitare descrizioni generiche: "foto di un prodotto" o "immagine di un paesaggio" non sono utili. Sii specifico.
• Includere parole chiave rilevanti: se l'immagine contiene contenuti importanti, assicurati di includerli nella descrizione.
• Descrivere lo scopo dell'immagine: spiega perché l'immagine è inclusa nella pagina e come si relaziona al contenuto circostante.
• Usare la punteggiatura: può aiutare a chiarire il significato e il flusso del testo.

Dove aggiungere il testo alternativo

Il testo alternativo dovrebbe essere aggiunto a tutte le immagini di un sito web, incluse:

• Immagini contenuto
• Immagini decorative
• Loghi
• Banner
• Grafici e infografiche
• Foto di prodotti
• Icone sui pulsanti di navigazione
• Qualsiasi altra immagine visualizzata su una pagina web

Per le immagini contenuto, il testo alternativo viene aggiunto utilizzando l'attributo  alt  nel tag  <img> :

html

<img src="immagine.jpg" alt="Descrizione dell'immagine">



Per le immagini puramente decorative che non aggiungono significato, l'attributo alt può essere lasciato vuoto:

html

<img src="decorazione.jpg" alt="">

Testo alternativo per tipi specifici di immagini

Loghi

Per i logo, il testo alternativo dovrebbe contenere il nome dell'azienda o del brand. Ad esempio:

html

<img src="logo.png" alt="BrandName">

Evitare descrizioni come "logo di BrandName".

Grafici e infografiche

Per grafici complessi o infografiche, fornire una breve descrizione delle principali tendenze o conclusioni illustrate dall'immagine.

Può essere utile includere anche un link a una descrizione più dettagliata nel testo circostante.

Immagini di prodotti

Includi il nome del prodotto, il colore, e gli attributi rilevanti come dimensioni o materiali. Mantieni la descrizione concisa.

Icone e pulsanti

Spiega lo scopo o l'azione dell'icona, ad esempio:

html

<img src="search.png" alt="Cerca nel sito">

Per i pulsanti, descrivi l'azione:

html

<img src="download.png" alt="Scarica il rapporto">

Strumenti per il testo alternativo

Ci sono vari strumenti disponibili per aiutarti a testare e ottimizzare i testi alternativi del tuo sito:

• Validatori HTML: controllano la presenza di attributi alt su tutte le immagini.
• Estensioni per browser: generano un report di tutti i testi alternativi mancanti o non validi.
• Screen reader: permettono di ascoltare direttamente i testi alternativi letti ad alta voce.
• Strumenti SEO: controllano che i testi alternativi contengano parole chiave target rilevanti.

Riepilogo

• Il testo alternativo fornisce una descrizione testuale delle immagini per renderle accessibili e SEO-friendly.
• Deve essere conciso ma altamente descrittivo del soggetto e scopo dell'immagine.
• Va aggiunto a tutte le immagini significative ma può essere vuoto per immagini puramente decorative.
• Esistono vari strumenti per testare e ottimizzare i testi alternativi per l'accessibilità e la SEO.

Investire del tempo nella scrittura di testi alternativi di alta qualità per tutte le immagini chiave del tuo sito è un aspetto fondamentale sia per l'ottimizzazione dei motori di ricerca che per l'accessibilità degli utenti.