Le immagini sono elementi importanti per rendere una pagina web più attraente e informativa. Il corretto utilizzo dell’attributo “alt” delle immagini è fondamentale per garantire l’accessibilità, l’usabilità e l’ottimizzazione SEO di un sito web. L’attributo “alt” (alternative text) è una stringa di testo inserita nel codice HTML delle pagine web per fornire informazioni sul contenuto delle immagini in determinate circostanze, come quando l’immagine non può essere visualizzata o per gli utenti con disabilità visive.
Questo articolo fornirà una guida completa su come usare correttamente l’attributo “alt” delle immagini, seguendo le indicazioni della decision tree fornita da W3C WAI (Web Accessibility Initiative). Questa guida ti aiuterà a capire quando e come utilizzare l‘attributo “alt” per garantire un’esperienza migliore agli utenti e migliorare il posizionamento SEO delle immagini su Google.
L’importanza dell’Alternative Text (Alt) nelle Immagini
L’alternative text è una breve descrizione testuale dell’immagine che viene visualizzata al posto dell’immagine stessa quando questa non può essere caricata. Questo testo è fondamentale per gli utenti con disabilità visive poiché i screen reader utilizzeranno l’alternative text per narrare il contenuto visivo dell’immagine. Inoltre, i motori di ricerca, come Google, utilizzano l’alternative text per comprendere e indicizzare il contenuto delle immagini.
L’attributo alt è un attributo obbligatorio per tutte le immagini. Tuttavia, è importante utilizzare l’attributo alt in modo appropriato. Il testo alternativo deve essere descrittivo e informativo. Dovrebbe fornire informazioni sull’immagine che non possono essere ottenute dalla visualizzazione dell’immagine stessa.
A cosa serve l’attributo alt
L’attributo alt serve a migliorare l’accessibilità, l’usabilità e la SEO di una pagina web. Vediamo nel dettaglio questi tre aspetti:
- Accessibilità: l’attributo alt rende le immagini accessibili a tutti gli utenti, anche quelli con disabilità visive o con problemi di connessione. In questo modo, si rispettano i principi di web design inclusivo e si evitano discriminazioni o esclusioni.
- Usabilità: l’attributo alt migliora l’esperienza utente, fornendo informazioni utili e rilevanti sulle immagini. Inoltre, il testo alternativo può essere usato come titolo o didascalia dell’immagine, se questa non ne ha uno specifico.
- SEO: l’attributo alt contribuisce all’ottimizzazione per i motori di ricerca, in quanto aiuta i crawler a indicizzare e classificare le immagini in base al loro contenuto. Inoltre, il testo alternativo può contenere parole chiave pertinenti al tema della pagina, aumentando così la sua rilevanza e visibilità.
Come Usare Correttamente l’Attributo Alt delle Immagini
Ecco alcuni suggerimenti per utilizzare correttamente l’attributo alt:
- Utilizzare un testo alternativo accurato e completo.
- Utilizzare parole chiave pertinenti nel testo alternativo.
- Evitare di utilizzare frasi generiche o ripetitive.
- Non utilizzare il testo alternativo per aggiungere informazioni non pertinenti all’immagine.
- Non utilizzare il testo alternativo per promuovere il proprio sito web o prodotti.
Per capire meglio come si usa l’attributo alt, vediamo alcuni esempi di immagini con il relativo testo alternativo. Per ogni immagine, cerchiamo di capire se il testo alternativo è appropriato o meno, e perché.
Ecco alcuni esempi di testo alternativo appropriato:
Gatto nero che dorme su un divano rosso
Questo è un buon esempio di testo alternativo, in quanto descrive in modo semplice e preciso il contenuto dell’immagine, fornendo anche il colore del gatto e del divano. In questo modo, si trasmette l’informazione essenziale che l’immagine vuole comunicare.
Grafico a torta che mostra la percentuale di vendite per categoria di prodotto nel 2020
Anche questo è un buon esempio di testo alternativo, in quanto descrive in modo sintetico e informativo il contenuto e il significato dell’immagine, specificando anche il tipo di grafico, l’anno e la variabile analizzata. In questo modo, si fornisce una visione d’insieme dei dati rappresentati.
Ecco alcuni esempi di testo alternativo non appropriato con relativo miglioramento:
Monna Lisa
Questo è un esempio di testo alternativo insufficiente, in quanto non fornisce abbastanza informazioni sull’immagine. Si potrebbe migliorare il testo alternativo aggiungendo alcuni dettagli sul dipinto, come ad esempio:
Ritratto di Monna Lisa di Leonardo da Vinci, con uno sfondo montuoso e un sorriso enigmatico
In questo modo, si arricchisce la descrizione dell’immagine con elementi distintivi e riconoscibili.
Clicca qui per scoprire le nostre offerte imperdibili!
Questo è un esempio di testo alternativo scorretto, in quanto non descrive l’immagine, ma ne sfrutta la funzione di link per fare pubblicità. Si potrebbe correggere il testo alternativo scrivendo qualcosa come:
Banner pubblicitario con il logo del sito web e la scritta ‘Offerte imperdibili!’
In questo modo, si descrive l’aspetto dell’immagine senza ingannare o indurre in errore gli utenti.
I consigli di W3C
Segui la seguente decision tree per determinare come utilizzare correttamente l’attributo “alt” delle immagini:
Step 1: Contenuto dell’Immagine
Verifica se l’immagine contiene del testo o se è puramente grafica.
- Se l’immagine contiene del testo:
- Se il testo è già presente nel contenuto della pagina, ad esempio come testo vicino all’immagine, utilizza un attributo “alt” vuoto (alt=””). Questo è raccomandato per evitare duplicazione del contenuto.
- Se il testo nell’immagine ha una funzione specifica, come un’icona, utilizza l’attributo “alt” per comunicare la funzione dell’immagine.
- Se il testo nell’immagine non è presente altrove nella pagina, utilizza l’attributo “alt” per includere il testo dell’immagine.
- Se l’immagine è grafica senza testo:
- Se l’immagine è puramente decorativa o non è destinata agli utenti, utilizza un attributo “alt” vuoto (alt=””) per informare gli screen reader che l’immagine è di natura decorativa e non contiene informazioni importanti.
Step 2: Immagine in un Link o un Pulsante
Verifica se l’immagine viene utilizzata come link o pulsante e se la sua assenza renderebbe difficile o impossibile comprendere il link o l’azione associata.
- Se l’immagine è in un link o un pulsante e la sua assenza rende difficile o impossibile comprendere il link o l’azione:
- Utilizza l’attributo “alt” per comunicare la destinazione del link o l’azione associata all’immagine.
Step 3: Contribuisce Significato alla Pagina
Verifica se l’immagine contribuisce significato alla pagina o al contesto in cui è inserita.
- Se l’immagine contribuisce significato:
- Se l’immagine è una grafica o una fotografia semplice, utilizza una breve descrizione dell’immagine nell’attributo “alt” in modo che sia comprensibile agli utenti con disabilità visive.
- Se l’immagine rappresenta un grafico o una complessa informazione, inserisci il contenuto dell’immagine altrove sulla pagina, ad esempio in forma testuale, per garantire che tutti gli utenti possano accedere a quelle informazioni.
- Se l’immagine mostra contenuti ridondanti già presenti come testo nella pagina, utilizza un attributo “alt” vuoto per evitare duplicazione.
Step 4: Immagine di Carattere Decorativo o Non Intesa per gli Utenti
Verifica se l’immagine è puramente decorativa o se non è destinata agli utenti.
- Se l’immagine è puramente decorativa o non è destinata agli utenti:
- Utilizza un attributo “alt” vuoto (alt=””) per indicare che l’immagine è puramente decorativa o non contiene informazioni rilevanti.
Step 5: Casi Non Coperti dalla Decision Tree
In caso di casi non coperti dalla decision tree o di incertezza su quale testo alternativo fornire, si consiglia di fare riferimento alla pagina Image Concepts Page fornita da W3C WAI per ulteriori informazioni sui testi alternativi.
Utilizzare correttamente l’attributo “alt” delle immagini è fondamentale per garantire l’accessibilità e l’usabilità del sito web per tutti gli utenti, compresi quelli con disabilità visive. Seguire la decision tree fornita da W3C WAI può aiutarti a fornire testi alternativi appropriati e migliorare l’esperienza di navigazione dei visitatori del tuo sito web. Inoltre, una buona pratica nell’uso dell’attributo “alt” può contribuire al miglioramento dell’indicizzazione delle immagini su Google e migliorare la visibilità del sito nei risultati di ricerca.
Ricorda che l’obiettivo principale è garantire l’accessibilità e l’esperienza utente, quindi fai sempre del tuo meglio per fornire testi alternativi significativi e accurati per tutte le immagini del tuo sito web.
In che modo l’attributo alt aiuta l’accessibilità?
I lettori di schermo sono software che leggono ad alta voce il contenuto di un sito web agli utenti con disabilità visive. Quando un lettore di schermo incontra un’immagine, utilizza il testo alternativo per descrivere l’immagine all’utente. Il testo alternativo consente agli utenti con disabilità visive di comprendere il contenuto delle immagini e di navigare in modo efficace sul sito web.
In che modo l’attributo alt aiuta la SEO?
I motori di ricerca utilizzano il testo alternativo per comprendere il contenuto delle immagini e per classificarle nei risultati di ricerca. Quando un motore di ricerca trova un’immagine con un testo alternativo accurato e completo, è più probabile che classifichi l’immagine in alto nei risultati di ricerca. Ciò può portare ad un aumento del traffico sul sito web.
