Cos’è l’Alt Text
L’alt text (Alternative Text) è un testo che descrive l’immagine presente su una pagina web. L’alt text ha varie funzioni: aiuta le persone con disabilità visiva (ciechi, ipovedenti, ecc.) a capire cosa mostra l’immagine, aiuta i bot dei motori di ricerca (Google, Bing ecc) a leggere correttamente un’immagine e, in ultimo, è il testo che viene mostrato qualora l’immagine non riuscisse a caricarsi.
Qualcuno potrebbe confondere l’alt text con la caption. In realtà sono due cose molto diverse. L’alt text è un testo “nascosco” che viene “letto” solo in determinate condizioni o da determinati utente, mentre la caption è un testo sempre visibile che compare al di sotto dell’immagine e che può avere altre funzioni, come contenere la fonte da cui è stata presa l’immagine.
A livello tecnico l’alt text (o alt tag o alt dell’immagine) è un attributo del tag <img> del codice HMTL. In altre parole, che tu stia utilizzando WordPress, i social o altri strumenti, quando modifichi l’alt text dell’immagine quello che il sistema fa è motificare questo attributo.
Perché l’alt text è importante
L’alt text è importante per le persone e per i motori di ricerca ed entrambi per lo stesso motivo, cioè far comprendere in maniera più accurada il soggetto dell’immagine.
Mettiamo caso che una persona ipovedente navighi il vostro sito e capisca che c’è una foto. Purtroppo con il suo problema alla vista non potra capire il soggetto della foto, oppure potrebbe intuirlo o non esserne sicuro. Grazie all’alt text e l’aiuto di software di lettura dei testi (screen reader), la persona ipovedente è in grado di conoscere il contenuto dell’immagine. Questo fa parte delle regole di accessibilità, ovvero di tutte quelle regole da rispettare che permettono a persone con disabilità visiva e motoria di navigare agevolmente un sito internet.
Per la navigazione dei bot dei motori di ricerca la questione è simile e forse un po’ più ampia. Il bot scansiona le immagini ed è in grado di “vederle”, ma potrebbero esserci contesti in cui il soggetto è poco chiaro o il bot potrebbe prendere un abbaglio (ciò vedere qualcosa di sbagliato). È per questo che si affida all’alt text la funzione di descrivere l’immagine. Questo migliora anche il contesto di lettura.
Riassumento, possiamo dire che l’alt text serve a:
- Migliorare l’accessibilità rendendo possibile anche alle persone con disabilità di comprendere il contenuto dell’immagine;
- Migliorare la pertinenza del contenuto e permettere ai bot di comprendere meglio il contesto;
- Posizionare un’immagine nella SERP di Google immagini in maniera più efficace.
Come inserire l’alt text in un sito
Come abbiamo visto all’inizio dell’articolo, l’alt text è un attributo del tag <img>. Nello sviluppo di siti statici, quindi scrivendo tutto in pure HTML, va inserito l’attributo alt="" dentro il tag <img>. Qua sotto il codice HTML dove puoi vedere il tag <img> con dentro la sorgente del file della foto (src="") e il nostro alt tag (alt="").
<img src="cane-spiaggia.jpeg" alt="Cane che gioca con una palla gialla sulla spiaggia"/>Per approfondire ti consiglio di leggerti la pagina dedicata all’Alt Text di Mdn.
Come inserire l’alt text in WordPress
I moderni CMS permettono di gestire le singole immagini in maniera facile, scegliendo titolo, descrizione e alt text. Per modificare l’Alt Text su WordPress puoi passare dalla galleria oppure direttamente dall’articolo selezionando l’immagine e andando nel campo “Testo alternativo” che trovi sulla destra.
Come si scrive un l’Alt Text
L’Alt Text è uno di quegli elementi infimi da scrivere: cosa ci scrivo? Come descrivo l’immagine? E devo ottimizzarla per le parole chiave? Per fortuna stai leggendo questo articolo, e quindi potrai sapere le tutte le best practice e i consigli utili per scrivere un Alt Text che funziona.
- Sii breve, conciso e coerente: descrivi l’immagine in maniera breve e precisa. Un testo lungo può confondere l’utente, i bot e gli screen reader. Cerca di non superare i 120/150 caratteri.
- Inserisci una keyword: se riesci inserisci delle keyword in maniera naturale e che siano congruenti con l’immagine e il contesto. Evita assolutamente la worst practice di inserire keyword in maniera forzata e innaturale.
- Usalo sulle immagini giuste: l’alt text descrittivo non è necessario nelle immagini decorative. Se, ad esempio, inserisci nel Footer un’immagina con solo funzione grafica, non inserire l’Alt Text;
- Inserisci dei link: se utilizzi immagini con dei link che collegano ad un altra pagina (ad esempio il logo), nell’Alt Text descrivi la pagina dove porta quel link.
- Non scrivere “foto di”: gli screen reader e i bot sono in grado di capire che quello che stanno leggendo è una foto, quindi evita di iniziare la frase con “Immagine di…” o “Foto di…”.
