Indice dei contenuti
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.
Per fortuna spesso è molto più facile modificarlo e non bisogna ricorrere al codice. I moderni CMS permettono di gestire le singole immagini in maniera facile, scegliendo titolo, descrizione e alt text. Ad esempio 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.
Esistono decine di CMS presenti sul mercato, quindi è difficile spiegare come fare per ognuno di essi. In linea generale dovresti trovare il campo alt text sezione di gestione delle immagini del CMS che stai utilizzando.
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…”.
