Le vie dell’accessibilità sono (quasi) infinite.
Non solo contrasti di colore, formattazioni di testo, strutture scansionabili, ma anche il lavoro nascosto “dietro le quinte” contribuisce a rendere le nostre interfacce alla portata di tutti.
Oggi vorrei parlarvi del “dietro alle quinte” delle immagini: l’alt text, o testo alternativo.
Le immagini svolgono un ruolo fondamentale all’interno di un layout, in quanto contribuiscono a rendere appetibile un’interfaccia e a veicolare concetti importanti.
Cosa succede, però, se qualche persona, per un qualunque motivo, non potesse vederle?
L’esperienza generale di navigazione presenterebbe un tassello mancante, cruciale per la comunicazione.
Ed è proprio qui che entra il campo l’alt text, breve descrizione di un’immagine che consente di trasmettere contenuti visivi, indicando ciò che si deve sapere su un’immagine che non riusciamo a vedere.
Solitamente, questo testo, viene aggiunto tramite l’attributo alt nel codice HTML o in sezioni apposite presenti in alcuni CMS (come, ad esempio, WordPress).
Accessibilità e User Experience
L’alt text rappresenta un elemento cardine nella progettazione di siti web accessibili.
La sua capacità di descrivere un’immagine, consentendo agli screen reader di trasmettere contenuti visual a persone con disabilità visive, e indicando ciò che si deve sapere su un’immagine che non vediamo, permette a tutti di vivere a pieno i nostri layout.
Che siano persone che utilizzano screen reader, dispositivi braille o altro, questo tipo di testo garantisce che chiunque possa usufruire dei contenuti, senza inutili ostacoli.
Ma non solo disabilità!
Il testo alternativo può anche rivelarsi utile in situazioni che potrebbero creare frizione nell’esperienza utente.
Se si presentano problemi dati da connessione lenta, da errati attributi source, da browser che bloccano immagini, o da difficoltà tecniche di un dato provider, l’alt text entra in gioco fornendo all’utente le informazioni necessarie per capire cosa avrebbe dovuto rappresentare l’immagine, offrendo una degna alternativa al nulla cosmico che altrimenti vedremmo.
Alt text e SEO
Un alt text ben scritto può portarci dei vantaggi anche per quanto riguarda il posizionamento nei motori di ricerca.
Per poterci far amico l’algoritmo, però, dobbiamo rispettare alcune buone pratiche.
L’esportazione in formati moderni e riconosciuti, insieme a nomi pertinenti ed alt text scritti con criterio, possono aiutare le nostre immagini a comparire come risposta alle ricerche degli utenti.
È importante ricordare che un alt text ottimizzato SEO non dovrebbe ricordare un tema prolisso, ma dovrebbe essere composto da circa 140 caratteri.
Quando va utilizzato l’alt text?
Ma arriviamo finalmente alla ciccia di questo articolo: quando va utilizzato un testo alternativo?
Spoiler: non sempre.
Per migliorare UX e accessibilità, è consigliato aggiungere un alt text alla maggior parte delle immagini di una interfaccia, ma questa regola non è sempre valida per tutte le tipologie di immagine.
Le immagini si dividono in:
- decorative, per cui è possibile saltare il testo alternativo
- funzionali, per cui è importante descrivere l’azione rappresentata
- informative, per cui è importante comunicare il messaggio contenuto
Per aiutarvi a capire la tipologia di immagine, provate a fare questo esercizio: se rimuovendo l’immagine dalla pagina e non si perdono informazioni, l’immagine è decorativa e quindi non ha bisogno di un testo di supporto.
In HTML, per nascondere il contenuto decorativo agli utenti di screen reader, sarà necessario utilizzare un attributo alt nullo (alt=“”).
Per supportarci nella comprensione, W3C ci mette a disposizione un “albero decisionale” che ci spiega come gestire l’attributo alt di una immagine in differenti situazioni.
❌ alt text sbagliato=”Immagine della natura”
✅ alt text corretto=”Il tramonto sulle montagne che si riflette su un lago calmo.”
Come scrivere un buon alt text
Prima di tutto, è importante chiarire la differenza tra alt text e didascalia, spesso erroneamente confusi:
- alt text: si concentra sulla funzione dell’elemento visivo, senza soffermarsi troppo sui dettagli (es. “Una tazza sul tavolo”)
- didascalia: spiega il rapporto tra l’immagine e il contesto/contenuto (es. “Una tazza rossa di ceramica appoggiata sopra un tavolo di legno”)
Vediamo nel dettaglio cosa fare e cosa non fare per scrivere un buon alt text.
Cosa fare:
- Essere precisi e sintetici
Per informare, è importante essere chiari, diretti, brevi e concisi.
Bastano poche parole per parlare dell’elemento principale dell’immagine, specificandone il contesto. - Usare la punteggiatura corretta
L’inserimento di spazi adeguati e della punteggiatura corretta migliora l’accessibilità per tutti gli utenti, facilitando la lettura precisa e ordinata delle parole da parte dello screen reader. - Includere una parola chiave
Incorporare una parola chiave coerente con l’immagine nel suo testo alternativo può rivelarsi utile per la SEO. È importante selezionare parole chiave che siano rilevanti.
Cosa non fare:
- Includere informazioni superflue
Parole come “immagine” o “foto” non sono necessarie negli alt text.
Gli screen reader annunciano “immagine” quando ne incontrano una. Se iniziate il testo alternativo con “immagine di”, lo strumento annuncerà “immagine, immagine di”. - Ripetere informazioni
L’alt text non è un elemento isolato, ma è parte integrante del contesto di una pagina. Evitate di ripetere informazioni già descritte nel testo della pagina o nella didascalia dell’immagine. - Eccesso di parole chiave
Un alt text pieno di parole chiave rischia di avere un impatto negativo sul posizionamento nei motori di ricerca. Evitate il “keyword stuffing” e concentratevi su descrizioni pertinenti e contestuali.
