Testo alternativo sulle immagini: è obbligatorio per Flickr?

Le immagini sulle community fotografiche devono avere un testo alternativo o no?

Parlando di immagini ed accessibilità è fondamentale considerare il testo alternativo (alt=”…”), spesso indispensabile. C’è però un caso particolare: le community fotografiche come Flickr, che hanno al centro di tutto delle immagini senza altri contenuti testuali.

In questo tipo di contesto, l’alt text è davvero indispensabile? L’argomento viene trattato in maniera molto interessante su Rebuilding the Web, con alcune riflessioni degne di nota.

A cosa serve il testo alternativo?

Il testo alternativo serve per comunicare lo stesso significato di un’immagine quando quest’ultima non è visibile. Questo è un concetto fondamentale: molti infatti si confondono, pensando che l’alt text serva a descrivere un’immagine aggiungendo altri significati.

Il fattore determinante è il contesto in cui viene inserita l’immagine, che ne influenza il significato.

Prendiamo un’immagine come esempio:

Foto di un gatto addormentato

Se fosse affiancata dal testo “Il mio gatto dorme sempre”, un testo alternativo valido potrebbe essere “E’ su un letto a fare l’ennesimo pisolino”. Oppure se il testo fosse “Ho un gatto da 7 anni”, potrei usare come alt “Dorme spesso ed è bianco”.

Questi esempi non sono assoluti, le combinazioni possibili sono tante e non è sempre intuitivo stabilire il testo alternativo migliore per un’immagine. Chiarire il concetto non è semplice, ma se vi vengono in mente esempi migliori fatemi sapere!

Immagini senza contesto

Nel caso  di immagini non accompagnate da alcun testo invece le cose diventano più complicate, proprio perché non esiste un contesto in cui inserire il testo alternativo.

Aggiungere un alt text come “Il mio gatto mentre dorme sul letto nella casa al mare in Versilia” comunicherebbe sicuramente informazioni utili, ma nel modo sbagliato. Il testo alternativo (lo dice la parola) deve servire a trasmettere un significato equivalente, senza aggiungere dettagli non intuibili altrimenti.

E le immagini sui siti di photo-sharing?

Proprio per questo motivo l’alt text perde significato sulle community che hanno al centro di tutto delle immagini. Qual è la soluzione migliore? Non è facile dare una risposta, ma una pratica corretta potrebbe essere sfruttare i campi destinati a titolo e descrizione per spiegare la foto, lasciando l’alt vuoto.

Prendendo l’esempio di Flickr, nell’ultimo redesign l’alt delle foto è “photo”. Serve a qualcosa? Non direi, sarebbe stato meglio lasciarlo vuoto. Sono presenti però titolo e descrizione, che se usati correttamente potrebbero proprio servire allo scopo desiderato.

In un sito simile, il problema di spiegare il significato di un’immagine non è una questione di accessibilità, ma di usabilità. Non sono infatti solo gli utenti non vedenti a voler conoscere il soggetto di un’immagine: anche tutti gli altri visitatori hanno bisogno di dettagli che non sono intuibili dal contesto.

Una parte di questo problema sarà progressivamente risolto grazie all’uso della tecnologia: basti pensare al gps che ricava la posizione di una foto ed ai dati exif, che vengono già mostrati in automatico. Per quanto riguarda il resto al momento non ci sono soluzioni: solo con una descrizione testuale aggiuntiva sarà possibile avere delle pagine veramente informative, usabili ed accessibili.

Vuoi far crescere il tuo progetto online?

Tommaso Baldovino

UX/UI Designer, professionista del web con più di 15 anni di esperienza su WordPress. Sono disponibile a seguire nuovi progetti dall'ideazione alla realizzazione finale. Scrivo ogni 2 settimane la mia newsletter.

17 commenti su “Testo alternativo sulle immagini: è obbligatorio per Flickr?”

  1. stavolta non sono molto d’accordo col secondo paragrafo: il testo è alternativo all’IMMAGINE, e non al ccontenuto contestuale. Per restare nel tuo esempio, se stessi parlando di un gatto ma non citassi il suo colore, per quell’immagine un testo alternativo “gatto bianco che dorme” mi parrebbe oltremodo corretta. Anzi, non è nemmeno affatto detto che il TUO gatto sia bianco, e quello potrebbe non essere il tuo gatto. Però è bianco e dorme, è inconfutabile :)

  2. Il secondo esempio in effetti forse è un po’ troppo sintetico :)

    Tutto è condizionato dal contesto, il tuo esempio mi torna. Dipende da quanto generico è il testo intorno alla foto e se c’è qualche collegamento tra l’immagine ed il discorso… L’alt text in fondo serve per comunicare lo stesso messaggio dell’immagine.

  3. Ciao ragazzi. Un appunto: il testo alternativo serve a veicolare, e in questo sono d’accordo con Tommaso (come ho scritto parecchie volte), il significato dell’immagine nel contesto quando essa, però, è rilevante per la comprensione del contenuto (mentre se si ritiene utile aggiungere una breve descrizione, si può usare title). Ma non bisogna MAI dimenticare che il destinatario del testo alternativo è una persona non vedente e che, per la maggior parte dei non vedenti, ogni parola superflua è fastidioso rumore dato che lo screen reader legge tutto. Questa premessa per stimolarvi a considerare il fatto che citare il colore del gatto (bianco, nero ecc.) può essere decisamente irrilevante per un cieco.

    D’altro canto i testi alternativi “E’ su un letto a fare l’ennesimo pisolino” e “Dorme spesso ed è bianco” a mio avviso sono errati entrambi, semplicemente perché quella foto è palesemente decorativa: NON è essenziale per la comprensione dei contenuti.

    Quando si parla di “contesto” non ci si riferisce “letteralmente” alle frasi che precedono o seguono la foto in modo tale che, come sembra proporre Tommaso, il testo alternativo funga quasi da completamento delle stesse. Il senso è un altro: il contesto è, come dire, la “destinazione d’uso” dell’articolo, post, saggio ecc, così se l’immagine del gatto è pubblicata in un articolo di veterinaria il testo alternativo sarà tarato in un certo modo, mentre se è pubblicata in un articolo sul mio gatto, nel quale l’ho già ampiamente descritto a parole, il testo alternativo è meglio metterlo nullo. Altro esempio: se pubblico l’immagine dell’urlo di Munch e sono un gallerista il testo alternativo sarà probabilmente simile a quello di un catalogo d’arte, mentre se sono uno psicologo che usa l’immagine di quel quadro per rappresentare l’angoscia in un articolo sulla depressione il testo alternativo sarà ovviamente differente ;).

    bye

  4. Ciao Marco, mi tornano le tue osservazioni, ma l’ultimo riferimento al quadro di Munch mi lascia dei dubbi. Perché dovrei usare il testo alternativo per mostrare le informazioni simili ad un catalogo d’arte nel caso fossi un gallerista, invece di usare qualcosa di visibile a tutti gli utenti (non solo ai non vedenti)?

    In fondo informazioni del genere dovrebbero essere utili a tutti i visitatori del mio sito, più o meno come nel caso delle community fotografiche come Flickr.

  5. Se ho capito bene il tuo commento la risposta alla tua domanda richiede alcune premesse:

    1 – il testo alternativo è riservato solo ai non vedenti
    2 – per veicolare informazione a tutti puoi usare una didascalia
    3 – le WCAG 2.0 dichiarano, giustamente, che se il testo che precede l’immagine contiene già tutte le informazioni (e, cioè, l’immagine è solo un modo alternativo per rappresentare le stesse informazioni) allora il testo alternativo può essere omesso.

    In riferimento all’Urlo (e dando per scontato che non possiamo applicare il punto 3 dato che in quel caso il testo alternativo non ci sarebbe) come sai ne esistono diverse versioni e, nel caso della galleria, un testo alternativo che indicasse anche alcune caratteristiche della particolare versione dell’Urlo rappresentata, potrebbe essere utile al non vedente. Per esempio: la didascalia per tutti potrebbe indicare autore, titolo, anno ecc., mentre il testo alternativo potrebbe indicare anche che è una delle versioni dell’Urlo dipinta in bianco e nero ecc. (in questo caso è corretto indicare il colore perché è un’opera d’arte, per la quale quella è un’informazione importante).

    Quando dico “il testo alternativo sarà probabilmente simile a quello di un catalogo d’arte” quindi intendo dire che le informazioni da considerare rilevanti in un sito d’arte, appartengono agli stilemi di quel particolare universo e a una persona non vedente che naviga quel sito e che, probabilmente, è interessata, per studio o per lavoro, di arte (almeno noi dobbiamo presumerlo, altrimenti non ne usciremmo mai) devi giocoforza veicolare alcune informazioni in più rispetto a chi la foto dell’opera la può “vedere”.

    Spero di aver risposto ;)

  6. adesso che tutto è chiaro vado un po’ OT: il colore nel testo alternativo *potrebbe* essere ininfluente per un non vedente, se questi lo fosse dalla nascita, ma potrebbe invece essere un bel po’ rilevante per un non vedente che lo è divenuto dopo aver conosciuto i colori. A quale dei due casi si fa di norma riferimento? al più ampio, cioè al primo?

  7. Ciao di nuovo. Il discorso è complesso. In primis – e un po’ provocatoriamente ;) – ti potrei rispondere che usare codici colore nel web è già di per se un errore: se, cioè, tu rendi essenziale per l’interfaccia la percezione e/o “il racconto” del colore, commetti un’ingenuità dal punto di vista dell’usabilità. L’esempio più becero ma esemplificativo è “premi il pulsante verde per …” oppure il rosso come sinonimo di “stop” o di “errore” o di “pericolo”. Chi usa codici colore (privi di etichetta testuale) non solo dimentica i non vedenti ma anche tutti gli utenti che soffrono di cecità ai colori.

    Ma per controbattere me stesso potrei citare un lungo scambio di e-mail che ebbi una volta con un web designer americano e non vedente (si, esistono ;)). Mi disse una cosa che mi fece riflettere parecchio: che questa regola di inserire testi alternativi nulli per le immagini decorative era per lui un dramma durante il suo lavoro perché ogni volta che analizzava un sito altrui, era costretto a farsi descrivere gli elementi decorativi dai suoi colleghi. Io alla fine gli dissi che è l’utente più debole che va tutelato, e che quindi io posso essere d’accordo in linea di principio con lui, ma progetterò per il non vedente normale, che non è un drago con Jaws e che naviga per cercare semplici informazioni o usufruire di servizi nella maniera più veloce e corretta possibile. Può sembrare riduttivo, ma nell’infinito universo delle disabilità ci si può perdere se non si traccia una linea di confine, anzi, di buon senso.

    Nel tuo commento però fai un’analisi che utilizza un modello medico: se il cieco lo è dalla nascita il colore non gli interessa, se lo è diventato ne ha l’immagine mentale e quindi gli interessa (semplifico il tuo pensiero ovviamente). La realtà è più complessa:

    Come spiegavo nel mio post precedente, è il contenuto nel contesto che conta: ci sono contesti in cui la descrizione del colore è essenziale *per tutti* (l’arte o la moda) e contesti nei quali è totalmente irrilevante *per tutti*. Inoltre anche il cieco dalla nascita con un riconoscitore di colori parlante (esistono) e imparando a memoria gli abbinamenti giusti non uscirà mai di casa vestito come Alrlecchino. Inoltre i colori possono essere abbinati mentalmente a sensazioni di tipo diverso: rosso –> caldo, blu –> freddo, ecc. e questo può, in linea di principio, portare a modelli mentali dei colori anche per i ciechi dalla nascita. Viceversa un cieco non dalla nascita sarà interessato al colore esattamente come e quanto un vedente: solo, cioè, quando la descrizione del colore è rilevante nel contesto ;).

    Insomma alla fine a mio modo di vedere, e per non impazzire durante un progetto, la regola è non usare mai codici colore ed eventualmente descrivere il colore di un “oggetto” solo quando è assolutamente richiesto dal contesto.

  8. si si, parlavo solo dell’ALT, non di bottoni ed elementi di navigazione. Cmq ok, risposta soddisfacente :D

  9. Mi pongo una domanda: come mai il testo alternativo sarebbe riseravato solo ai non vedenti? Lo trovo utile a tutti, puo’ comunque aiutare nel capire un’immagine. O sbaglio?

  10. Ciao Tom,
    io verrei mettere i tag title e alt text alle mie immagini, il problema è che sono situate all’inizio degli articoli e vengono indicizzate come testo all’interno dei risultato di ricerca di Google (non ho impostato metatag description manuali ma lascio fare a Google), soprattutto nel caso corrispondano alle keyword cercate dall’utente…

    Hai qualche idea per ovviare a questo inconveniente senza dover aggiungere metatag description alle pagine? grazie in anticipo

  11. @emanuele: non lo vedo come un inconveniente, se le immagini hanno bisogno di un alt text non dovrebbe essere un problema vederlo apparire nei risultati di ricerca. Si presume che Google utilizzi quel testo solo se inerente, quindi è un bene se compare.

    Se puoi, il mio consiglio è di pensare prima all’utente e poi alla SEO :)

  12. Sisi ma infatti per gli utenti è più che chiaro anche senza alt-text o title (non avrebbe senso vedere un testo alternativo per un’immagine a puro scopo decorativo dell’articolo), però per dire se faccio un articolo e voglio che l’immagine non venga considerata alla stregua di testo è un po’ un problema… dici che almeno il tag title lo posso usare comunque? Perchè forse provoca lo stesso errore…

    Ps volevo chiederti anche un piacerone immenso… quando hai tempo potresti dare un’occhiata al mio sito? ho il problema che vorrei mantenere la centratura corrente rispetto al browser ma fare in modo che se la finestra viene rimpicciolita eccessivamente tutta la parte del blocco notes non continui a scorrere verso sinistra (diventando irraggiungibile)… è un problema che riguarda più che altro la visualizzazioni su telefoni cellulari o finestre molto piccole… grazie

  13. @emanuele la soluzione dovrebbe essere semplice: se l’immagine è decorativa alt e title non servono, altrimenti sì, e il fatto che Google indicizzi quel testo non può essere che un vantaggio. Perdonami se ho capito male.

    Per quanto riguarda il tuo sito, il tema che utilizzi (come la maggior parte) è ottimizzato per una risoluzione fino a 1024px. Per i cellulari potresti considerare l’uso di un plugin come WpTouch oppure MobilePress, di cui ho parlato in passato.

  14. Eheh in realtà l’ho ottimizzato io, va bene anche per risoluzioni orizzontali molto basse (anche in torno ai 500px di larghezza) ma molti cellulari si limitatano a 360px o meno… ti ringrazio comunque, davvero gentile :)